От автора: приветствую в третьем уроке по оптимизации Google Page Speed. Для тех, кто не в курсе, Google PageSpeed – бесплатный инструмент, который оценивает производительность и юзабилити вашего сайта для мобильных устройств и настольных платформ. Это очень важно, так как Google использует этот инструмент для определения ключевых элементов SEO ранжирования, т.е. того, как высоко мы будем находиться в поисковой выдаче.
Вебмастеры знают, что лучше иметь хороший 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+)). И мне это удалось:
Сегодня я расскажу вам про мой опыт оптимизации с 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 на десктопе:
И 64 на мобильных устройствах:
Устанавливаем модуль PageSpeed
В этом уроке я покажу вам, как установить модуль на Apache. Google также дает инструкцию по установке на nginx. В каталогах пакетов Ubuntu нет модуля PageSpeed, его нужно вручную загрузить через wget:
|
1 2 3 4 5 6 7 8 9 10 11 |
$ wget //dl-ssl.google.com/dl/linux/direct/mod-pagespeed-stable_current_amd64.deb --2016-10-02 15:10:54-- //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:
|
1 2 3 4 5 6 7 8 9 |
$ 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, чтобы пофиксить зависимости:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
$ 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:
|
1 2 |
$ sudo service apache2 restart * Restarting web server apache2 |
Поддержка файлов с вашего CDN
Не так давно я писал спонсорский пост ускоряем доставку контента при помощи KeyCDN, и я до сих пор пользуюсь этим сервисом. Если вы используете CDN на сайте, то модулю PageSpeed нужно сказать об этом.
Вот так можно просматривать и редактировать файл конфигураций модуля:
|
1 |
$ sudo nano /etc/apache2/mods-available/pagespeed.conf |
Базовая конфигурация:
|
1 2 3 4 5 6 7 8 9 |
<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 нужно добавить вручную:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
# 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 //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:
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html lang="en-US" prefix="og: //ogp.me/ns#"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="profile" href="//gmpg.org/xfn/11"> <link rel="pingback" href="//jeffreifman.com/xmlrpc.php"> <script type="text/javascript" src="//jeffreifman.com/wp-content/cache/minify/568f4.js.pagespeed.jm.7B4hJGmADB.js"> </script> |
Обратите внимания, теперь URL в атрибуте src выглядит так:
|
1 |
568f4.js.pagespeed.jm.7B4hJGmADB.js |
Пример побольше, вручную вставленное изображение (кстати, одно из моих объявлений) было конвертировано PageSpeed в формат .webp:
|
1 2 |
<img src="//c3.jeffreifman.com/wp-content/uploads/2016/10/ xssd-virtual-servers-300x250.jpg.pagespeed.ic.g1foLP8khJ.webp" |
Все происходит автоматически.
Потрясающие результаты PageSpeed
В целом, результаты работы модуля PageSpeed были просто супер. Я добил 4 пункта на десктопе и целых 8 на мобильных устройствах. Результаты на десктопе:
Результаты на мобильных устройствах:
Заключение
Если вы системный администратор, Google PageSpeed будет вам кстати. Инструмент полностью настраиваемый, его можно подстроить как угодно для максимального эффекта. Однако для среднестатистического разработчика я сомневаюсь в его эффективности:
базовый прирост производительности ограничен;
дальнейшая настройка слишком сложна;
повышение PageSpeed не ведет к прямому росту (если вообще ведет) трафика от поисковиков.
Я рад, что Google предлагает такой модуль, который к тому же спроектирован для работы в сложных системах, однако его влияние на работу системных администраторов в повседневных самодельных системах ограничено.
Автор: Jeff Reifman
Источник: //code.tutsplus.com/
Редакция: Команда webformyself.
Комментарии (2)