Добро пожаловать в обзор и небольшие наблюдения о трансформации сервиса от гугл - скорость загрузки страниц 'google page speed'. Для начала небольшое отступление.
Еще давно, во времена первых зародышей сайтов для его ТОПа достаточно было накупить ссылок, скопировать какой-то контент и все готово для отображения его в первых позициях выдачи. Тогда никто не говорил о привычном нам адаптиве или упаси господь о скорости загрузки страниц. Но благо время идет и технологии с требованиями по качеству растут и развиваются.
Что такое google page speed
Это сервис от поисковой системы google с помощью которого можно мерять скорость загрузки страниц. Инструмент также дает рекомендации что необходимо сделать для того что бы сайт был быстрее. И действительно выполняя рекомендации сайт становится очень шустрым. Это заметно по тому что при переходе между страницами порой шапка сайта даже не перегружается.
Почему так важна скорость загрузки страниц
Потому что это непосредственно влияет на позиции в поиске. Гугл давно уже заявил что скорость загрузки особенно в мобильной версии влияют на индекс. Чем быстрее сайт - тем он будет выше. Да, есть много других факторов, но этот также учитывается.
Что нового в page speed
Первое на что обращаешь внимание это обновленный интерфейс. Да, он стал запутанней, но если разобраться то ничего сложного в нем нет. Также добавилось новых функций, о них и пойдет речь.
Время загрузки первого контента - это интервал между началом загрузки страницы и появлением первого блока с фото или текстовой информацией. Очень важный фактор потому что представьте что вы с мобильного где-то на улице срочно ищете что либо и при переходе на сайт у вас не хватит терпения ждать секунды что бы увидеть контент. А если при переходе контент сразу появится даже в неособо читабельном виде то вы уже дождетесь загрузки. Много отказов именно по долгому появлению первых блоков.
Индекс скорости загрузки - нечто похожее на время загрузки первого контента, но не совсем оно. Этот индекс показывает насколько быстро контент становится доступен для просмотра на устройстве. Например как быстро отрисовывается страница в браузере.
Время загрузки для взаимодействия - этот параметр также достаточно важен если у вас на сайте есть какие-либо интерактивные элементы, например формы обратной связи т.п. Вспомните как часто вы нервничали когда после загрузки страницы приходилось ждать что бы поставить курсор в поле ввода. Это возникает из-за скриптов или долгого рендеринга страницы браузером по причине перенагруженности кода.
Время загрузки достаточной части контента - указывает на интервал по истечении которого пользователь увидит основной контент на странице.
Время окончания работы ЦП - иными словами насколько тяжелая страница для процессора устройства посетителя. Этот параметр прямо указывает насколько долго будет 'тупить' сайт. Это время которое надо для полной отрисовки сайта в устройстве. Чем оно меньше - тем быстрее и без тормозов откроется страница.
Приблизительное время задержки при вводе - очень интересная метрика в page speed. Она показывает насколько подтупливает действие при вводе чего либо на странице. Например если у вас на сайте есть выпадающий список то гугл смотрит и анализирует как этот список будет выпадать после ввода символов. Если это больше 50мс то это заметно пользователю. Опять же - это зависит все от структуры сайта и его нагрузкой скриптами.
Как видим скорости появления первого блока, первого возможного взаимодействия, достаточной части контента и т.д. гугл уделил очень пристальное внимание т.к. это и вправду очень важно. И задача разработчика наиболее быстро показать контент что бы посетитель по покидал страницу.
Оптимизация
В этом блоке google дает рекомендации на что необходимо обратить внимание что бы ускорить загрузку страницы. Это крайне ценная информация т.к. робот анализирует данные на странице и подсказывает какие шаги надо сделать что бы стать быстрее.
Часто ругается на формат фото, на его размеры и на ресурсы которые блокируют отображение. Если с форматом фото и размерами все ясно, то по ресурсам - что это за блокираторы такие? На самом деле это скрипты и стили.
Очень классный совет как сделать все супер правильно. Для начала определите те самые минимально необходимые стили и скрипты что бы страница загружалась без скачков и артефактов. Их и надо оставить вверху страницы. А все что вторичное - опускаете вниз сайта и Вы увидите как страница станет быстрее, да и балл подымется.
Часто еще есть замечания что надо отложить загрузку скрытых изображений. Это можно побороть поставив плагин lazy load он как раз и подгружает фото по мере необходимости при скролле. Это улучшает скорость и добавляет попугает в page speed-e.
За уменьшение размера стилей и скриптов думал не писать, но все же как это не упомянуть. В продакшине старайтесь использовать только минифицированные стили и скрипты - так легче браузеру. Да и ресурсы заметно 'худеют' от этого. Если ресурсы не минифицированные - получите предупреждение.
Конечно, не лишнее написать о скорости ответа сервера - он должен быть до 100мс что бы было все ок.
Еще одно нововведение это термин 'Сокращение размера структуры DOM' который говорит что страница на мобильном должна быть максимально простая и легкая. Не надо много элементов в верстке, все должно быть максимально простым.
Диагностика
В блоке диагностики вы можете увидеть анализ работы javascript, правила для кеширования статики, минимизация в основном потоке и другие данные по сайту. Расписывать думаю что не стоит все можно почитать когда будете анализировать сайт в google page speed.
Выводы
Теперь для 'оптимизации' недостаточно пожать скрипты, стили и фото. Для современного сайта необходимо разделять шаблон для десктопа и шаблон для мобильных устройств. В шаблоне для мобильных необходимо максимально облегчить стили, скрипты!, загрузку фото и конечно же количество элементов в DOM что прямо влияет на скорость загрузки и отрисовки страницы.
Вывод здесь один - максимально оптимизируем свои сайты что бы повышаться в позициях а также не забываем что однажды поработав над сайтом он будет быстрым все последующее время.
