Google PageSpeed Insights. Часть 2
PageSpeed Insights говорит о проблемах на сайте, рассмотрим решение более сложные рекомендаций от Google PageSpeed
Google PageSpeed Insights. Часть 2

Google PageSpeed Insights. Часть 2

Во второй части рассмотрим более трудоемкие задачи по исправлению и избавлению от ошибок. Тут уже надо будет искать подход к каждому сайту и его шаблону. Давайте вместе поразмыслим как можно обойти некоторые грабли.


Это продолжение первого поста по решению проблем и рекомендациям Google PageSpeed Insights, смотрите первый пост: Google page speed или как набрать 100/100: Часть 1

Ну как не крути, друзья приходится выбирать или 100 пунктов по гуглу или тот вид сайта что задумали. Это я к тому что, как правило если у вас есть изображения в самом начале поста, то будет вот такая рекомендация.

Оптимизируйте загрузку видимого контента

screenshot_1.png.jpeg

Связанно это с тем, что размер изображения, в мое случае, больше размера текста. Вот и получается что текст отображается раньше а потом догружается картинка. Как не крутил избавиться красивым способом не получается.

В моем случае был выбран подход ленивой загрузки картинок, так как вес картинок все же имеет значение. В этом есть особый плюс. Картинки не загружаются пока не попадают в поле зрения в браузере, а это очень важно для мобильных версий.

Что могу сказать по поводу приведения сайта к рекомендации "Оптимизируйте загрузку видимого контента", старайтесь выводить быстро загружаемый контент вверху страницы. Все что долго грузится - загружаем позже через js.

Теперь просто о сложном.

Пункт: Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы

На мой взгляд это самый сложный пункт, который светится у большинства сайтов. Так уж сложилось, что с первых шагов сайтостроения, скрипты и css файлы подключаются в head части страницы.

Раньше это никого не пугало. И вот пришли к нам мобильные устройства с медленным интернетом. Критерии к скорости загрузки возросли. А не секрет, что файлы js и css в начале страницы, задерживают от рисовку страницы до момента их полной загрузки.

Это естественно сказывается на терпении пользователя. Если много скриптов будет грузиться, то на мобильнике будет белый экран. И пользователь закроет ваш сайт, так и не увидев его великолепный дизайн. ;)

И так, что же рекомендует наш дядюшка гугл?

  1. Загружайте js файлы всегда в конце документа html (footer).
  2. По возможности js файлы загружайте в асинхронном режиме.
  3. Основной или критический css загружайте в теле в тегах <style> в начале документа, а не критические тоже в footer документа.

Теперь пройдемся по пунктам.

Загружайте js в footer

Это все вполне реально, но есть одно но. Если вы не разработчик и используете уже готовую CMS, то ваш сайт может поломаться. Ведь многие дополнительные скрипты настроены на загрузку в head.

Знаю, что для многих CMS уже появились дополнительные плагины для этого. Можете этим воспользоваться. Если же вы разработчик, то вам придется пересмотреть всю архитектуру работы js скриптов. В принципе не сложно, но потребует времени и знания.

Загружайте js в режиме async

(асинхронная загрузка)

Тут есть и плюсы и минусы. Огромный плюс асинхронной загрузки скриптов - это полная отвязка загрузки от рендинга. Такие скрипты загружаются в фоновом режиме и никак не влияют на от рисовку сайта. Скрипты загружаемые в режиме asinc полностью независимые и тут появляется минус.

Минус асинхронной загрузки js файлов в том, что они могут загрузиться и до события ready документа и после него. Все зависит от размеров файла, а ведь на этом событии многое завязано в javascript.  В данном случае придется контролировать все загружаемые файлы. Создавать свои события для запуска плагинов и т.д.

Но честно говоря - это того стоит.

Лично мой подход был таким: 

  • В документе сайта я загружаю обычным способом, только один js файл в режиме asinc. Это файл загрузчик js скриптов.
  • Все остальные файлы загружаются уже через загрузчик LoadJS с возможностью установки кастомных событий. Т.е. я могу загружать дополнительные файлы при условии, что необходимые файлы уже загружены. И снова создавать новые события.
  • Все плагины и скрипты запускаются по определенным событиям, которые создаются по мере загрузки js фалов с зависимостями.

Может быть я опишу свой вариант загрузки с событиями, но позже. 

Основной или критический css

Тут есть несколько вариантов.

Вариант 1: Вставлять минимизированный код основного css файла в теги <style> и это все в head секцию документа. Но там не должно быть ничего лишнего. Желательно оптимизировать данные так, что бы они касались только верхней части документа.

Вариант 2: Подгружать через js данные из файла и так же вставлять в <style> тег в head. Я выбрал второй вариант и подгружаю через window.XMLHttpRequest.

Пример моей функции:

function addCss(filecss) {
	xhr = window.XMLHttpRequest ? new XMLHttpRequest : new ActiveXObject("Microsoft.XMLHTTP");
	xhr.open("GET", filecss, !1);
	xhr.send();
	var a = document.createElement("style");
	a.innerHTML = xhr.responseText;
	document.head.appendChild(a);
}
addCss('/css/main.css');

Остальные css файлы, которые можно назвать вспомогательными, можно загружать обычным способом в футер или через js загрузчики.

Поделюсь своим маленьким секретом:

Так как после первой загрузки критического css через функцию подгрузки addCss (та что выше), данные css файла попадают в кеш браузера, то я решил немного схитрить и оптимизировать.

После первой загрузки критического css файла, я ставлю cookies маркер, что файл уже загружался и он в кеше. И при следующей загрузке страницы я уже не использую функцию addCss, а подключаю файл стилей обычным способом в секции head.  И файл подгружается моментально из кеша.

Есть еще один пункт рекомендаций от гугла PageSpeed Insights, он звучит как "Сократите время ответа сервера".

По данному пункту невозможно дать однозначную рекомендацию.Все зависит от CMS, которую вы используете и настроек сервера хостинга. И много чего еще. Возможно позже я напишу несколько пунктов по этой рекомендации, но на сегодня все..

Всем скорости сайтов и добра)

Сайтостроение0 комментариев

Поделитесь с друзьями: