Здравствуй, уважаемый друг!

Кажется, ты используешь AdBlock. Этот проект развивается и существует за счет доходов от рекламы.
Добавь, пожалуйста, нас в исключения.

Спасибо за понимание.

Теперь мы команда!

PageSpeed Insights: как добиться 100/100 и зачем это нужно?

18 февраля 2015 в 18:49 Автор: Nikita_Sp в категории Создание сайтов 45 комментариев

Инструмент PageSpeed Insights был представлен компанией Google в 2011 году, и за время своего существования успел набрать определенную популярность среди разработчиков и SEO оптимизаторов и ввести их в заблуждение, заставив убрать все стили и все js файлы из кода страницы.

Google PageSpeed Insights

Сегодня мы обсудим этот инструмент, узнаем как получить результат 100/100 на PageSpeed Insights, и действительно ли это необходимо: влияет ли это на выдачу или другие показатели сайта.

Что такое PageSpeed Insights?

PageSpeed Insights — это бесплатный сервис рекомендаций разработчикам веб-сайтов по ускорению отображения страницы в браузере клиента. Принцип работы сервиса:

  • анализ страницы по указанному адресу;
  • перечисление элементов страницы, приводящих к замедлению её прорисовки;
  • рекомендации по устранению проблем замедления прорисовки страницы.

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

Для чего это нужно?

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

Как видит посетитель вашу страницу сайта:

  1. переход по ссылке (запрос страницы);
  2. белый экран;
  3. загрузка, ожидаем;
  4. страница целиком открылась.

На практике, уже на втором шаге сама страница (html код страницы) уже загружена, и браузер, в виду структуры документа, подгружает стили, скрипты и т.п. и откладывает прорисовку, т.к. все эти компоненты расположены в начале кода страницы (обычно в <head>), таким образом откладывая отображение документа до его прорисовки.

PageSpeed Insights: вера или рекомендации

Некоторые разработчики, SEO-оптимизаторы или владельцы сайтов ошибочно предполагают, что показатель PageSpeed Insights влияет на ранжирование страниц, или же принимают его за правило оптимизации страниц, однако это не совсем так. Подтверждением того что некоторые просто «веруют» в этот сервис является скрин технического задания, которое мне попало в руки.

PageSpeed Insights: техническое задание с требованием высокой оценки

На самом деле инструмент настроен на сокращение времени между запросом страницы и началом демонстрации первых ее элементов. Также данная оценка не влияет на ранжирование страниц. Суть данной оптимизации исключительно в уменьшении времени между кликом по ссылке (запросом страницы) и первым откликом страницы (отображение первых элементов).

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

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

Полезные советы PageSpeed Insights

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

Сжатие CSS и JS файлов (минимизация) — на некоторых хостингах присутствует возможность включения функции предварительной минимизации этих файлов. Сервер берет ваш файл, и минимизирует его, удаляя все пробелы, разрывы строк и из красивого и форматированного файла вы получаете одну строку, уменьшая таким образом меньший размер файла и соответственно уменьшая скорость его загрузки.

Например Хостинг Ukraine, имеет такую функцию, что позволяет минимизировать все файлы, и после обработки сервером файла файл имеет такой вид:

PageSpeed Insights: минимизированный CSS средствами сервера хостинга Ukraine

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

Cокращение HTML кода — сжатие html кода, путем удаления лишних пробелов и разрывов строк. Сродни сжатию JS и CSS. Также может быть сделано в ручную или средствами сервера вашего хостинг провайдера.

Включение кеширование и включите GZIP сжатие — установите сроки кеширования для ваших файлов, это значительно увеличит скорость загрузки вашего сайта. Данные настройки можно прописать в файле .httacess например так:


FileETag MTime Size
<ifmodule mod_expires.c>
<filesmatch ".(jpg|jpeg|gif|png|ico|css|js)$">
ExpiresActive on
ExpiresDefault "access plus 1 year"
</filesmatch>
</ifmodule>

<IfModule mod_setenvif.c>
BrowserMatch "MSIE" force-no-vary
BrowserMatch "Mozilla/4.[0-9]{2}" force-no-vary
</IfModule>

<IfModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text\.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image\.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</IfModule>

Оптимизируйте свои изображения — старайтесь загружать изображения в web форматах (png или jpg, например) в объективно удобном разрешении, старайтесь не использовать разрешения изображений к примеру за 2 000 пикселей по одной стороне, если это не необходимо. Объективно адекватный размер изображений варьируется от 600 до 1200-1500 пикселей.

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

PageSpeed Insights: настройки оптимизации хостинга Ukraine

Как добиться 100/100 на PageSpeed Insights

К сожалению оценку в 100 из 100 получить на PageSpeed Insights в моем видении для нормального сайта практически невозможно. На это влияют несколько факторов:

  1. некорректное отображение сайта, в погоне за оценкой;
  2. отсутствие возможности кешировать ресурсы, загружаемые со сторонних серверов (например Google Analytics или Яндекс.Метрика, кнопки социальных сетей, виджеты и многое другое);
  3. отсутствие возможности минимизировать ресурсы, загружаемые со сторонних серверов;
  4. сжатие изображений, которые устроят сервис, очень сильно повлияет на их качество;

Шутки ради, приведу вам пример сайта который набрал почти 100/100 по оценке PageSpeed (сайт который смог):

PageSpeed Insights: сайт, который смог

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

PageSpeed Insights: оценка моего сайта

Я также как и все остальные владельцы сайтов гнался за оценкой, но на стадии оптимизации изображений, инструментами, которые советует сам Google, я понял что все это фикция, т.к. оптимизировал изображения, качество незначительно ухудшалось, а оценка не росла, и сервис предлагал мне сжать их еще чуть-чуть. потом еще немного, и еще капельку…

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

Вверх!

Меню блога

Категории блога

Облако тегов