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

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

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

Google Page Speed - дополнение к Mozilla Firefox (с установленным дополнением Firebug), с помощью которого можно определить параметры производительности Веб-сервера и CMS размещенного на нем сайта. Оценка выполняется с точки зрения оптимальных методов повышения скорости отдачи страниц Веб-сервером.В данном случае речь идет о таких методах, как:
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> или щелкнуть по значку в правой части строки состояния), перейти на закладку Page Speed и нажать кнопку Analyze Performance. После этого начнется процесс тестирования, который может продолжаться от нескольких секунд до нескольких минут, а затем будет выведен отчет:

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

Для выполнения более детального анализа можно задать Advanced Options: включить Profile Deferrable JavaScript (выявление кода JavaScript, который запускается не сразу после загрузки страницы); обеспечить Automatically Run at Onload (автоматическое тестирование всех посещаемых страниц) и выбрать требуемый User Agent (тип браузера). Эти опции активизируются в меню, для вывода которго следует щелкнуть по стрелке, расположенной рядом с названием закладки Page Speed. Учтите, что включение Profile Deferrable JavaScript значительно замедляет работу браузера, поэтому не стоит использовать данный тест без острой необходимости. Также следует отметить, что в большинстве случаев рекомендуется использовать User Agent - Default 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 для главной страницы данного сайта до оптимизации выглядел следующим образом:

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

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

Заключение

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