Как установить модуль 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+)). И мне это удалось:

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

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

Как установить модуль 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:

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

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

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

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

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

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

Автор: Jeff Reifman

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

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

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

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

Научиться

Метки:

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

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

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

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

  1. Юрий

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

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

  2. Илья

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree