Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress
Code

Установка модуля Google Page

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called Improving Google PageSpeed.
Optimizing Google PageSpeed to 100 in WordPress

Russian (Pусский) translation by Andy Yur (you can also view the original English article)

Final product image
What You'll Be Creating

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

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

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

Во втором эпизоде я сделал свой блог с фокусировкой на разработке сайта и настроил мой код WordPress так, чтобы показатель PageSpeed достиг 100 в мобильной и в десктопной версии. Читай Optimizing Google PageSpeed to 100 in WordPress (Envato Tuts+).

И я достиг успеха в этом на некоторое время:

Google PageSpeed Module - Page Insights at 100 for Mobile and Desktop

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

PageSpeed можно встроить с вашим сервером Apache или nginx для автоматической оптимизации вашего сайта. - Google

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

Поддержание оптимального PageSpeed

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

Я стремился вернуться к былым временам обновлений по щелчку мыши.

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

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

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

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

Испытание модуля Google PageSpeed

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

О модуле Google PageSpeed

В основном модуль Google PageSpeed автоматизирует большую часть процесса оптимизации производительности, которую ищет показатель PageSpeed. и они доступны на популярных open-ресурсах для серверов Apache и nginx.

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

Скриншоты моего PageSpeed до инсталяции

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

Google PageSpeed Module - Before Test 83 for Desktop PageSpeed

И всего 64 для мобильных устройств:

Google PageSpeed Module - Before Test 64 for Mobile PageSpeed

Установка модуля PageSpeed

В этом уроке я покажу как делать установку на сервере с Apache. Инструкцию по настройке nginx можно найти прямо на страницах Google.

Модуль PageSpeed не входит пакет дистрибутивов Ubuntu, поэтому вам надо будет скачать его самостоятельно через wget:

После, используя dpkg установить модуль:

И наконец, apt-get -f install исправляет любые зависимости:

После, перезагружаем сервер Apache:

Поддержка файлов от CDN

Ранее, я писал рекламную статью Accelerate Your Content Delivery With KeyCDN и до сих пор ей пользуюсь. Если вы используете CDN на вашем сайте, тогда вам надо упомянуть об этом в модуле PageSpeed.

Тут показано, как увидеть и отредактировать конфигурационный файл модуля:

А это базовая конфигурация:

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

Мой CDNs на c1-, c2-, c3- и c4- .jeffreifman.com, поэтому я использую подстановочный символ ? чтобы обращаться ко всем четырем.

После, конечно, вы должны ещё раз перезагрузить Apache, как мі делали это ранее.

Обзор результатов модуля PageSpeed

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

Заметьте, что src URL теперь:

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

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

Всё это происходить автоматически:

Не наилучшие изменения PageSpeed

В целом, результаты от использования модуля PageSpeed не приводили в восторг. Я поднял на 4 очка для десктопа и (немного лучше) на 8 очков для мобильных.

Тут очки "после" для десктопов:

Google PageSpeed Module - After Test 87 for Desktop PageSpeed

Тут очки "после" для мобильных:

Google PageSpeed Module - After Test 72 for Mobile PageSpeed

В заключение

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

  • Базовая подъём производительности ограниченный.
  • Дальнейшая настройка очень сложна.
  • Усиления PageSpeed не определённые (если вообще есть), и отображаются ли они на увеличении трафика поисковой системы.

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

Если у вас есть вопросы, пишите пожалуйста их ниже. Или вы можете связаться со мной в Twitter @reifman. Пожалуйста, посетите мою страницу инструктора на Envato Tuts+, чтобы увидеть другие обучающие программы, которые я написал, такие как Cloning WordPress in Linux (in 90 seconds.) И я призываю вас посетить две серии уроков программирования здесь: How to Program With Yii2 и Building Your Startup With PHP.

Связанные ссылки

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.