Добро пожаловать в мой третий учебник по оптимизации вашей скорости Google Page . Для тех, кто не знает, Google PageSpeed — это бесплатный инструмент, который оценивает производительность и удобство использования вашего сайта для мобильных и настольных платформ. Это очень важно, потому что Google использует его для определения ключевых элементов нашего SEO рейтинга, то есть того, насколько высоко мы оказываемся в их результатах поиска.
Поэтому веб-мастера знают, что важно иметь хорошую PageSpeed, хотя по этому поводу ведутся споры. Например, скорость страницы New York Times в настоящее время составляет 60 и 68 из 100.
В первом эпизоде я рассказывал, как улучшить мою PageSpeed с помощью темы, созданной ныне несуществующим провайдером, « Практика улучшения Google PageSpeed (Envato Tuts +)» . В конечном счете, я сделал это для PageSpeed для мобильных телефонов 70 и настольных 86.
Во втором эпизоде я сделал свой блог целенаправленным сайтом для разработки и настроил свой код WordPress таким образом, чтобы достичь PageSpeed 100 как для мобильных устройств, так и для настольных компьютеров. См. Оптимизация Google PageSpeed до 100 в WordPress (Envato Tuts +) .
И я был успешен в этом какое-то время:
Сегодня я расскажу вам больше о моем опыте с оптимизацией PageSpeed и менее известной альтернативе тому, как делать это самостоятельно, о собственном модуле PageSpeed от Google . Вы можете установить его для Apache и nginx.
PageSpeed может интегрироваться с вашим веб-сервером Apache или Nginx для автоматической оптимизации вашего сайта. — Google
Прежде чем мы начнем, пожалуйста, помните, я стараюсь участвовать в обсуждениях ниже. Если у вас есть вопрос или предложение по теме, пожалуйста, оставьте комментарий ниже или свяжитесь со мной в Twitter @reifman . Мне интересен ваш опыт работы с WordPress и PageSpeed.
Поддержание оптимальной скорости страницы
Если бы мой блог был моим постоянным фокусом, то, возможно, не было бы слишком сложно поддерживать оптимизированный код для PageSpeed, так как появились обновления плагина WordPress и темы. Но это не так. И, честно говоря, поддержание этой работы оказалось слишком трудоемким.
Я хотел вернуться к старым временам обновлений щелчком мыши.
Google не вознаграждает вас за высокую скорость страницы
Я также заметил, что после того, как я переключился на новую тему и оптимизировал свою PageSpeed до 100, трафик фактически уменьшился и остался вниз. Конечно, адаптивный макет темы как-то связан с этим, но Google никогда не вознаграждает меня за достижение 100 PageSpeed.
Точно так же, как я обсуждал в Установке AMP в WordPress (Envato Tuts +) , AMP был создан, чтобы привлечь внимание издателей мультимедиа, но для небольших издателей мало что дает. Google никогда не предоставлял дополнительный трафик на мой блог после того, как я предоставил поддержку AMP.
Поэтому я решил отказаться от PageSpeed и переключиться на новую тему, которая поможет пользователям легче ориентироваться на моем сайте. Я также удалил AMP в настоящее время.
Опробовать модуль Google PageSpeed
Казалось, что это прекрасная возможность отключить все мои собственные JavaScript и CSS-связки и поэкспериментировать с модулем Google PageSpeed, который работает на уровне сервера, чтобы сделать это для вас.
О модуле Google PageSpeed
По сути, модуль Google PageSpeed автоматизирует большую часть оптимизации производительности, которую ищут его рейтинги PageSpeed. И это доступно на популярных серверах с открытым исходным кодом Apache и nginx.
Модуль PageSpeed сжимает и объединяет включенные файлы, такие как таблицы стилей JavaScript и CSS, но также заменяет изображения сжатыми, прогрессивными форматами файлов ( .webp ).
Снимки моей PageSpeed до установки
После установки моей новой темы я сделал снимки «до» моего балла PageSpeed. Я получил 83 для рабочего стола:
И ниже 64 для мобильного телефона:
Установка модуля PageSpeed
В этом руководстве я расскажу вам, как установить Apache. Google также предлагает инструкции по установке nginx .
Модуль PageSpeed не включен в каталоги пакетов Ubuntu, поэтому вам необходимо вручную загрузить его через wget :
|
01
02
03
04
05
06
07
08
09
10
11
|
$ 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 для установки модуля:
|
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 для исправления любых зависимостей:
|
01
02
03
04
05
06
07
08
09
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.
# 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 вручную:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
|
# ModPagespeedDomain
# authorizes rewriting of JS, CSS, and Image files found in this
# domain.
# HTML file are rewritten.
#
# 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.
# 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, поэтому я использовал ? подстановочный знак для обозначения всех четырех выше.
Затем, конечно, вы должны перезапустить Apache, как мы делали ранее.
Просмотр результатов модуля PageSpeed
Вы можете проверить исходный код на своем сайте, чтобы увидеть, работает ли модуль PageSpeed. Вот пример из верхней части страницы на JeffReifman.com :
|
01
02
03
04
05
06
07
08
09
10
|
<!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:
|
1
2
|
<img src=»http://c3.jeffreifman.com/wp-content/uploads/2016/10/
xssd-virtual-servers-300×250.jpg.pagespeed.ic.g1foLP8khJ.webp»
|
Все это происходит автоматически.
Потрясающие изменения в PageSpeed
В целом, результаты использования модуля PageSpeed сами по себе не впечатлили. Я набрал 4 балла на рабочем столе и (лучше) 8 баллов на мобильном телефоне.
Вот результат для рабочего стола:
Вот результат для мобильного телефона:
В заключение
Если вы системный администратор, модуль Google PageSpeed будет очень полезен. Он полностью настраивается, и вы можете настроить его различными способами для лучшего воздействия. Тем не менее, для среднего разработчика, я сомневаюсь в его эффективности:
- Основной прирост производительности был ограничен.
- Дальнейшая настройка очень сложна.
- Прибыль PageSpeed не позволяет четко (если вообще) отображать увеличение трафика из поисковых систем.
Я рад, что Google предлагает модуль, и он предназначен для работы в сложных системах, но его влияние на повседневных системных администраторов DIY ограничено.
Если у вас есть вопросы, пожалуйста, напишите их ниже. Или вы можете связаться со мной в Twitter @reifman . Пожалуйста, посетите мою страницу инструктора Envato Tuts +, чтобы увидеть другие учебники, которые я написал, такие как Клонирование WordPress в Linux (за 90 секунд). И я призываю вас ознакомиться с моими двумя сериями программ здесь: Как программировать с Yii2 и Как построить свой Запуск с PHP .