Как установить модуль Google PageSpeed

Как установить модуль Google PageSpeed

От автора: приветствую в третьем уроке по оптимизации Google Page Speed. Для тех, кто не в курсе, Google PageSpeed – бесплатный инструмент, который оценивает производительность и юзабилити вашего сайта для мобильных устройств и настольных платформ. Это очень важно, так как Google использует этот инструмент для определения ключевых элементов SEO ранжирования, т.е. того, как высоко мы будем находиться в поисковой выдаче.

Как установить модуль Google PageSpeed

Вебмастеры знают, что лучше иметь хороший PageSpeed, хотя вокруг этой темы множество споров. К примеру, скорость страниц New York Times на данный момент составляет 60-68 из 100.

В первом уроке я пытался улучшить PageSpeed с темой, которую спроектировало ныне несуществующее агентство, Hands On Improving Google PageSpeed (Envato Tuts+). В конечном счете я довел PageSpeed на мобильных устройствах до 70 и на десктопе до 86.

Во втором уроке я создал блог с уклоном в разработку сайтов, а также настроил код WP так, что PageSpeed подскочил до 100 как на мобильных устройствах, так и на десктопе (см. оптимизируем Google PageSpeed до 100 в WordPress (Envato Tuts+)). И мне это удалось:

Современные технологии веб-разработки

AngularJS, Webpack, NodeJS, ReactJS, TypeScript, Gulp, Git, Github...
Узнайте все о современных технологиях в веб-разработке

Узнать подробнее

Как установить модуль Google PageSpeed

Сегодня я расскажу вам про мой опыт оптимизации с PageSpeed, а также про менее известный способ делать то же самое самому, про модуль от Google PageSpeed. Его можно установить на Apache и nginx.

«PageSpeed можно интегрировать с вашим веб-сервером, будь-то Apache или Nginx, для автоматической оптимизации вашего сайта.» — Google

Прежде чем мы продолжим, хочу напомнить, что я стараюсь отвечать на ваши комментарии. Если у вас возникли вопросы или предложения по теме, пожалуйста, пишите об этом в комментариях или мне на Twitter @reifman. Мне хочется, чтобы вы разобрались с WP и PageSpeed.

Как поддерживать оптимальный индекс PageSpeed

Если бы я занимался своим блогом все время, возможно было бы не сложно поддерживать оптимизацию кода под PageSpeed, так как плагины WP и темы обновляются. Но это не так. Честно говоря, поддержание индекса на плаву отнимает слишком много времени.

Я бы очень хотел вернуться в те времена, когда для обновления хватало одного клика мыши.

Google никак не вознаграждает вас за высокий PageSpeed

Кроме того, я заметил, что после перехода на новую тему и оптимизации PageSpeed до 100, трафик упал и держался на низком уровне. Конечно, на падение косвенно повлиял и адаптивный макет темы, но Google никогда не вознаграждал меня за PageSpeed 100.

Точно так же, как я говорил в статье про установку AMP в WP (Envanto Tuts+), AMP создан для привлечения внимания крупных издателей, но никак не мелких. Google так и не привел ко мне в блог дополнительный трафик после того, как я добавил поддержку AMP.

Поэтому я решил переключиться с PageSpeed на новую тему, которая помогла бы пользователям легче перемещаться по моему сайту. Я также удалил AMP на некоторое время.

Изучаем модуль Google PageSpeed

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

О модуле Google PageSpeed

В основном, модуль Google PageSpeed автоматизирует множество задач по оптимизации производительности, на которые смотрит PageSpeed при составлении рейтинга. Модуль работает на популярных open-source серверах Apache и Nginx.

Модуль PageSpeed сжимает и объединяет подключаемые файлы, такие как JS и CSS, а также заменяет изображения на сжатые версии в прогрессивном формате (.webp).

Скриншоты моего PageSpeed перед установкой

После установки новой темы я взял старые скриншоты индекса PageSpeed. Я получил 83 на десктопе:

Как установить модуль Google PageSpeed

И 64 на мобильных устройствах:

Как установить модуль Google PageSpeed

Устанавливаем модуль PageSpeed

В этом уроке я покажу вам, как установить модуль на Apache. Google также дает инструкцию по установке на nginx. В каталогах пакетов Ubuntu нет модуля PageSpeed, его нужно вручную загрузить через wget:

$ wget https://dl-ssl.google.com/dl/linux/direct/mod-pagespeed-stable_current_amd64.deb
--2016-10-02 15:10:54--  https://dl-ssl.google.com/dl/linux/direct/mod-pagespeed-stable_current_amd64.deb
Resolving dl-ssl.google.com (dl-ssl.google.com)... 74.125.22.136, 74.125.22.91, 74.125.22.190, ...
Connecting to dl-ssl.google.com (dl-ssl.google.com)|74.125.22.136|:443... connected.
HTTP request sent, awaiting response... 200 OK
Length: 7009850 (6.7M) [application/x-debian-package]
Saving to: ‘mod-pagespeed-stable_current_amd64.deb’
 
100%[=========================================================================>] 7,009,850 38.6MB/s in 0.2s
 
2016-10-02 15:10:54 (38.6 MB/s) - ‘mod-pagespeed-stable_current_amd64.deb’ saved [7009850/7009850]

Затем установите модуль с помощью dpkg:

Современные технологии веб-разработки

AngularJS, Webpack, NodeJS, ReactJS, TypeScript, Gulp, Git, Github...
Узнайте все о современных технологиях в веб-разработке

Узнать подробнее
$ sudo dpkg -i mod-pagespeed-*.deb
Selecting previously unselected package mod-pagespeed-stable.
(Reading database ... 668500 files and directories currently installed.)
Preparing to unpack mod-pagespeed-stable_current_amd64.deb ...
Unpacking mod-pagespeed-stable (1.11.33.2-r0) ...
Setting up mod-pagespeed-stable (1.11.33.2-r0) ...
Enabling module pagespeed.
To activate the new configuration, you need to run:
  service apache2 restart

И наконец apt-get -f install, чтобы пофиксить зависимости:

$ sudo apt-get -f install
  [sudo] password for ...:
  Reading package lists... Done
  Building dependency tree
  Reading state information... Done
  The following packages were automatically installed and are no longer required:
 ca-certificates-java default-jre default-jre-headless fonts-dejavu-extra
 gconf-service gconf-service-backend gconf2 gconf2-common icedtea-6-jre-cacao
 icedtea-6-jre-jamvm icedtea-netx icedtea-netx-common java-common
 java-wrappers libasyncns0 libatk-wrapper-java libatk-wrapper-java-jni
  ...
  ...
 openjdk-7-jre openjdk-7-jre-headless sound-theme-freedesktop
 ttf-dejavu-extra tzdata-java
  Use 'apt-get autoremove' to remove them.
  0 upgraded, 0 newly installed, 0 to remove and 0 not upgraded.

Перезапустите сервер Apache:

$ sudo service apache2 restart
 * Restarting web server apache2

Поддержка файлов с вашего CDN

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

Вот так можно просматривать и редактировать файл конфигураций модуля:

$ sudo nano /etc/apache2/mods-available/pagespeed.conf

Базовая конфигурация:

<IfModule pagespeed_module>
 # Turn on mod_pagespeed. To completely disable mod_pagespeed, you
 # can set this to "off".
 ModPagespeed on
 
 # We want VHosts to inherit global configuration.
 # If this is not included, they'll be independent (except for inherently
 # global options), at least for backwards compatibility.
 ModPagespeedInheritVHostConfig on

Все ваши сайты будут работать с этими настройками по умолчанию. Но поддомены CDN нужно добавить вручную:

# ModPagespeedDomain
 # authorizes rewriting of JS, CSS, and Image files found in this
 # domain. By default only resources with the same origin as the
 # HTML file are rewritten. For example:
 #
 # ModPagespeedDomain cdn.myhost.com
 #
 # This will allow resources found on http://cdn.myhost.com to be
 # rewritten in addition to those in the same domain as the HTML.
 #
 # Other domain-related directives (like ModPagespeedMapRewriteDomain
 # and ModPagespeedMapOriginDomain) can also authorize domains.
 #
 # Wildcards (* and ?) are allowed in the domain specification. Be
 # careful when using them as if you rewrite domains that do not
 # send you traffic, then the site receiving the traffic will not
 # know how to serve the rewritten content.
ModPagespeedDomain c?.jeffreifman.com

Мои CDN это c1-, c2-, c3- и c4- .jeffreifman.com, я использовал символ подстановки ? для ссылки на них. После этого опять нужно перезапустить сервер, как вы делали это ранее.

Смотрим результаты модуля PageSpeed

Проверить, работает ли модуль PageSpeed можно, открыв исходный код сайта. Ниже показан пример верхней части страницы JeffReifman.com:

<!DOCTYPE html>
<html lang="en-US" prefix="og: http://ogp.me/ns#">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="http://jeffreifman.com/xmlrpc.php">
<script type="text/javascript"
 src="http://jeffreifman.com/wp-content/cache/minify/568f4.js.pagespeed.jm.7B4hJGmADB.js">
 </script>

Обратите внимания, теперь URL в атрибуте src выглядит так:

568f4.js.pagespeed.jm.7B4hJGmADB.js 

Пример побольше, вручную вставленное изображение (кстати, одно из моих объявлений) было конвертировано PageSpeed в формат .webp:

<img src="http://c3.jeffreifman.com/wp-content/uploads/2016/10/
xssd-virtual-servers-300x250.jpg.pagespeed.ic.g1foLP8khJ.webp"

Все происходит автоматически.

Потрясающие результаты PageSpeed

В целом, результаты работы модуля PageSpeed были просто супер. Я добил 4 пункта на десктопе и целых 8 на мобильных устройствах. Результаты на десктопе:

Как установить модуль Google PageSpeed

Результаты на мобильных устройствах:

Как установить модуль Google PageSpeed

Заключение

Если вы системный администратор, Google PageSpeed будет вам кстати. Инструмент полностью настраиваемый, его можно подстроить как угодно для максимального эффекта. Однако для среднестатистического разработчика я сомневаюсь в его эффективности:

базовый прирост производительности ограничен;

дальнейшая настройка слишком сложна;

повышение PageSpeed не ведет к прямому росту (если вообще ведет) трафика от поисковиков.

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

Автор: Jeff Reifman

Источник: https://code.tutsplus.com/

Редакция: Команда webformyself.

Современные технологии веб-разработки

AngularJS, Webpack, NodeJS, ReactJS, TypeScript, Gulp, Git, Github...
Узнайте все о современных технологиях в веб-разработке

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Практика оптимизации сайта: ускорение загрузки Вашего сайта в разы

Узнайте как ускорить загрузку сайта .

Научиться

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (2)

  1. Юрий

    Совсем недавно прошла Вебмастерская Яндекса. Было много интересных материалов.
    И на одном из семинаров был вопрос. Добивался ли кто 100%-го показателя от Гугл Спид. Никто не мог вспомнить и привести пример. Мне этот момент запомнился.
    И вот Вы, буквально через неделю, даете такую информацию. Причем даже для мобильных устройств.
    То есть, с точки зрения Гугла, Вы достигли максимально возможной скорости.
    Браво!
    Успехов! Так держать!

    И статья тоже полезная конечно.
    Спасибо.

  2. Илья

    Здравствуйте. Скажите пожалуйста, для перевода статьи нужно просить разрешение у автора? Или достаточно поставить ссылку на источник?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree