Краткое руководство по Google Page Speed

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

Введение в Google Page Speed

Google Page Speed — дополнение к Mozilla Firefox (с установленным дополнением Firebug), с помощью которого можно определить параметры производительности Веб-сервера и CMS размещенного на нем сайта. Оценка выполняется с точки зрения оптимальных методов повышения скорости отдачи страниц Веб-сервером (Web Performance Best Practices).В данном случае речь идет о таких методах, как:
1. Оптимизация кеширования: оптимизация кеширования статических объектов сайта (CSS, скриптов на JavaScript и изображений) как браузерами, так и прокси-серверами;
2. Уменьшение round-trip times (RTT): сокращение числа DNS-запросов и HTTP-редиректов; объединение файлов, содержащих скрипты на JavaScript; объединение файлов, содержащик CSS; упорядочивание файлов, содержащих CSS и скрипты на JavaScript, а также встроенных скриптов на JavaScript; использование четырех-пяти Веб-серверов для обеспечения параллелельной загрузки компонентов страниц;
3. Уменьшение размера запросов: уменьшение размера cookie’s; загрузка статических объектов из доменов, не использующих cookie’s;
4. Уменьшение размера ответов: использование Gzip-компрессии; удаление ссылок на неиспользуемые CSS; компактное написание кода JavaScript; компактное написание CSS; задержка загрузки кода на JavaScript, который запускается не сразу после загрузки страницы; оптимизация изображений; использование уникальных URL для всех компонентов страниц с целью снижения RTT;
5. Оптимизация рендеринга страниц браузером: отказ от неэффективных CSS-селекторов; отказ от CSS-выражений; перемещение ссылок на CSS, а также встроенных CSS в заголовки документов; определение размеров изображений.

Анализ сайта с помощью Google Page Speed

Для выполнения анализа параметров производительности сайта необходимо запустить Firefox и перейти по нужному адресу. Затем следует активизировать Firebug (выполнить команду главного меню Инструменты » Firebug » Открыть Firebug или нажать клавишу <F12> или щелкнуть по значку Firebug в правой части строки состояния), перейти на закладку Page Speed и нажать кнопку Analyze Performance. После этого начнется процесс тестирования, который может продолжаться от нескольких секунд до нескольких минут, а затем будет выведен отчет:

Результаты тестирования сайта

В данном фрагменте отчета можно увидеть Overall performance summary (общую оценку производительности), которая в данном случае имеет значение — Medium priority, и список, каждая строка которого содержит маркер приоритета и ссылку на описание соответствующего метода повышения производительности, а иногда еще и кнопку . Значки, отражающие Overall performance summary и/или являющиеся маркерами списка, содержащего результаты выполнения соответствующих тестов, имеют следующие значения:
High priority — High priority — сайты, с Overall performance summary, отраженной данным значком, или параметры, помеченные данным маркером, следует оптимизировать в первую очередь, т.к. это не потребует больших усилий, но обеспечит существенный прирост производительности;
Medium priority — Medium priority — оптимизацию сайтов с Overall performance summary, отраженной данным значком, или параметров, помеченных данным маркером, можно отложить, т.к. она потребует приличных усилий, но не обеспечит ощутимый прирост производительности;
Low priority — Low priority — сайты с Overall performance summary, отраженной данным значком, или параметры, помеченных данным маркером, не нуждаются в оптимизации, либо их можно улучшить совсем незначительно (вероятность получения сайтом такой оценки ничтожно мала);
Information message — Information message — этим маркером помечаются элементы, не относящиеся к анализируемой странице, и/или ошибки тестирования.
Нажатие кнопки позволяет увидеть все предложения Google Page Speed, сформированные по результатам выполнения соответствующего теста. Так, например, тест Leverage browser caching проверяет ответы Веб-сервера на наличие корректных заголовков HTTP Expires (они задают интервал времени, в течение которого браузер может использовать объекты, ранее сохраненные в собственном кеше, а не загружать свежие копии этих объектов с Веб-сервера) для всех статических объектов:

Рекомендации теста Leverage browser caching

Для выполнения более детального анализа можно задать Advanced Options: включить Profile Deferrable JavaScript (выявление кода JavaScript, который запускается не сразу после загрузки страницы); обеспечить Automatically Run at Onload (автоматическое тестирование всех посещаемых страниц) и выбрать требуемый User Agent (тип браузера). Эти опции активизируются в меню, для вывода которго следует щелкнуть по стрелке, расположенной рядом с названием закладки Page Speed. Учтите, что включение Profile Deferrable JavaScript значительно замедляет работу браузера, поэтому не стоит использовать данный тест без острой необходимости. Также следует отметить, что в большинстве случаев рекомендуется использовать User AgentDefault Value, т.к. другие значения могут вызвать различные ошибки.
На этом я заканчиваю описание процедуры тестирования сайта с помощью Google Page Speed. Мне кажется, что приведенной информации будет достаточно всем, кто занимается поддержкой сайта на любительском уровне. Для Веб-разработчиков и специалистов служб технической поддержки Google Page Speed предлагает более продвинутые функции анализа параметров производительности и мониторинга активности сайтов, однако, их описание выходит далеко за рамки данной статьи и требует для понимания наличие соответствующей квалификации.

Оптимизация сайта с помощью Google Page Speed

Google Page Speed, как и любой подобный инструмент, не умеет настраивать Веб-серверы и CMS сайтов, а всего лишь дает рекомендации, которые следует использовать при самостоятельной настройке или при составлении технического задания, а также при приеме выполненных работ в случае привлечения сторонних специалистов. Однако, Google Page Speed может сильно помочь Вам в вопросах «механической» (не использующей какие-либо интеллектуальные методы) оптимизации файлов, содержащих CSS и скрипты на JavaScript, а также изображений. Оптимизация выполняется прозрачно в процессе анализа сайта. Более компактные копии объектов сохраняются в трех подпапках папки, которая выбрана в разделе Save Optimized Files To меню Advanced Options, при этом CSS-файлы сохраняются в подпапке page-speed-css, скрипты на JavaScript — в подпапке page-speed-javascript, изображения — в подпапке page-speed-images, а рекомендации по оптимизации выводятся в разделы Minify CSS, Minify JavaScript и Optimize images отчета о результатах тестирования. Все предложения Google Page Speed, сформированные по результатам выполнения каждого из этих тестов, можно увидеть, нажав кнопку в нужной строке. Например, результат выполнения теста Minify CSS для главной страницы данного сайта до оптимизации выглядел следующим образом:

Рекомендации теста Minify CSS

В данном фрагменте отчета видно, что страница использует 8 CSS-файлов, имеющих общий размер 31,3 килобайта, который может быть сокращен на 10,6 килобайт (или на 33,8%). Ниже следует список, каждая строка которого содержит ссылку на один из восьми исходных CSS-файлов, полученное уменьшение размера в килобайтах (процентах) и ссылку на оптимизированный файл. После того, как я сделал резервные копии и обновил CSS-файлы, отчет преобразился, кнопка пропала, маркер приоритета в строке Minify CSS поменялся с High priority на Low priority:

Результаты оптимизации CSS-файлов

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

Заключение

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

Понравилась статья?

 Подпишитесь на RSS или почтовую рассылку

 Присоединяйтесь в Google+ или Twitter

 Поделитесь ссылкой в социальной сети или блоге

Краткое руководство по Google Page Speed: 5 комментариев

  1. Дополнение безусловно полезное, но до стадии сдачи проекта использовать его практически не имеет смысла. Особбенно касательно css и js оптимизации. И потом, Google не раз подкидывал «свинью» прекращая поддержку или перебрасывая продукт в разряд платных. Надеюсь жучков в нём нет, ведь бесплатность всех продуктов гугла обеспечивается усиленым сбором статистики. За статью спасибо!

    • На стадии разработки можно выявить и устранить огрехи в настройке Веб-сервера и CMS, а насчет CSS/JS-оптимизации полностью согласен. Касаемо статистики — пусть собирают. Лично мне прятать нечего 🙂

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

    • Гуглу влом индексировать большое количество кода.

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

      Не забывайте бэкапить то что было и просматривать то что получилось

      На мой взгляд, это аксиома.

  3. Использую для проверки изображений. Часто бывает, что авторы ленятся и не оптимизируют изображения. Порой, можно выиграть 300-500 Кб на этом.

Оставить комментарий