Добро пожаловать во вторую часть нашей серии статей о Google PageSpeed. В первом эпизоде я оптимизировал PageSpeed тогдашней темы моего сайта, MySiteMyWay’s Construct. Мне удалось добраться до 70 Mobile и 86 Desktop.
Однако с закрытием MySite я выбрал новую тему и достиг 100 PageSpeed для мобильных и настольных ПК. Мне потребовалось около 12 часов дополнительных усилий для достижения этой цели. Теперь производительность моего сайта — один из самых быстрых сайтов WordPress, который я видел за долгое время. Проверьте это . Просмотр почти мгновенный.
В этом уроке я расскажу вам, как я это сделал и что я узнал о WordPress и Google PageSpeed. Большую часть дня я работал над этим, я думал, что смогу достичь максимума в 90-х. Я был немного удивлен, когда он неожиданно подскочил до 100 для Desktop — и осталось всего несколько деталей, чтобы максимизировать Mobile.
Для тех, кто не знает, Google PageSpeed — это бесплатный инструмент, который оценивает производительность и удобство использования вашего сайта для мобильных и настольных платформ. Это очень важно, потому что Google использует его для определения ключевых элементов нашего SEO рейтинга, то есть того, насколько высоко мы оказываемся в их результатах поиска.
Если вы хотите больше узнать о преимуществах повышения скорости сайта, прочитайте статью Moz, Почему Оптимизация скорости сайта должна быть частью вашей стратегии SEO . Он подчеркивает: «… несколько примеров показали, что более быстрая загрузка страниц сильно коррелирует с более высоким доходом».
Google и WordPress не делают это простым
В конечном счете, оптимизация моего PageSpeed заняла много времени и усилий и сделала мой сайт уязвимым для будущих плагинов и обновлений скриптов Google. Большая часть этой работы довольно запутанная, детализированная и отнимающая много времени. Это также немного сводит с ума и ошеломляет. Спасибо, Google.
Статический сайт обычно имеет один файл с CSS и JS-включениями, которые можно легко минимизировать и комбинировать. WordPress намного сложнее. Так много создается динамически с помощью WordPress — хм — не идеальная архитектура.
Может потребоваться время, чтобы найти, где создаются файлы, находятся ли они в темах или плагинах, и как решить эти проблемы. Оказывается, когда у вас есть семь плагинов, включая файлы JavaScript, и вы хотите свести их к минимуму и объединить в одно включение, допуская при этом возможность регулярных обновлений плагинов, это довольно сложная задача в мире WordPress — постоянно меняющиеся темы и плагины.
Изображение предоставлено: Моя фотография из Музея Пикассо в Париже.Теперь он может называться «Грустный разработчик, сталкивающийся с PageSpeed of Mobile 55 / Desktop 62»
Тем не менее, позвольте мне ободрить вас, показывая, как я это сделал (у вас нет ничего полезного сегодня, не так ли?). Имейте в виду, потребности вашего сайта могут немного отличаться от моих.
Прежде чем мы начнем, пожалуйста, помните, я стараюсь участвовать в обсуждениях ниже. Если у вас есть вопрос или предложение по теме, пожалуйста, оставьте комментарий ниже или свяжитесь со мной в Twitter @reifman . Мне интересен ваш опыт работы с WordPress и PageSpeed.
Основополагающие шаги для PageSpeed 100
Выбор новой темы
Если вы ищете новую тему WordPress и хотите оценить PageSpeed, вы можете быть удивлены тем, что оценки по известным темам часто идут в 60–70-х годах, но также и в 90-х годах. Вот пара статей, оценивающих темы и PageSpeed через ColorLib и WPMU . В любом случае я ожидал большего.
Так же, как пример ожиданий отрасли, сайт New York Times для меня набрал 53/55, что намного ниже 100.
На PageSpeed различных тем большое влияние оказывают количество и размер файлов JavaScript и CSS, которые они используют, количество используемых изображений и их размер, а также подход их мобильной реализации, то есть, как правило, отзывчивый в настоящее время. Некоторые создатели, кажется, не смотрят на свои PageSpeeds при создании.
Первым была его базовая скорость. Средняя оценка Mobile 74 и Desktop 89 начинается с их демонстрационного сервера. Хотя это уже было немного лучше, чем до максимизации Construct, это была более современная тема, и было много оставшихся шагов по оптимизации, которые я мог попробовать. Я надеялся вывести PageSpeed в высокие или низкие 90-е.
Кроме того, учитывая рост числа читателей на мобильных устройствах, я хотел отказаться от использования боковых панелей, особенно для размещения рекламы (я надеюсь написать о моих новых направлениях дохода в нашейпродолжающейся серии Google DFP ) . Тема Medium хорошо справляется со сложением левой боковой панели в адаптивное меню и скрытием правой боковой панели.
Начальная скорость страницы носителя
Здесь был начальный PageSpeed для демо-версии Medium (демо-хостинг никогда не бывает сильно оптимизирован). Было действительно обнадеживающе видеть, что у него было много нерешенных проблем, потому что это показало, что это было лучше, чем мой оптимизированный Construct, до того, как были приложены дополнительные усилия, и похожие задачи, которые я знал, чтобы выполнить, чтобы максимизировать его оценку:
Вот больше вопросов:
И более:
И проблемы пользовательского опыта, которые были более локализованы:
Имейте в виду, что изменение темы может быть довольно сложным. Для меня замена, исключение и обновление встроенных шорткодов из темы «Конструкт» заняли больше всего времени, и я еще не закончил, например, раскрывающиеся колпачки, варианты pullquote, кнопки, вкладки и навигационные меню на основе страниц. Мой путь на 100 подтолкнул меня к тому, чтобы идти вперед.Как выполнить массовый поиск и замену в WordPress предлагает несколько хороших решений для поиска и замены коротких кодов.
Хотя это руководство не поможет вам выполнить точные шаги по повышению PageSpeed вашего сайта до 100, оно поможет вам найти множество возможных решений и выявить общие препятствия. Есть еще один замечательный обобщенный ресурс, которым я поделюсь в конце.
Краеугольные камни производительности в WordPress
Я связывался с ArrayThemes немного о демо-исполнении Sub-100 темы Medium. Они отправили отличный ответ:
Оптимизация теста PageSpeed должна проходить с недоверием … наша демонстрация не работает, но мы не нуждаемся в кэшировании наших демонстраций … Предложения PageSpeed не совсем точны или не являются примером производительности темы. Это будет полностью зависеть от вашей настройки, сервера, кэширования и других оптимизаций, которые вы решите сделать.
Это делает идеальной отправной точкой для рассмотрения общих основополагающих элементов для производительности WordPress. Все нижеприведенные области производительности относятся не только к основам, но и к базовым показателям PageSpeed.
Оказывается, есть несколько плагинов, разработанных, чтобы помочь вам решить проблему эффективного кэширования. Вот два из лучших, которые я пробовал:
Minit : плагин WordPress для объединения файлов CSS и JavaScript.
Минимизация зависимостей : автоматически объединяет и минимизирует любые сценарии и таблицы стилей, поставленные в очередь с использованием стандартной системы зависимостей.
Оба были полезны, но ни один из них не убрал для меня барьеры, связанные с PageSpeed, такие как встраивание CSS в мой <head> для устранения проблем PageSpeed; Другими словами, этот плагин вряд ли приведет вас к 100 PageSpeed. Я обнаружил, что минимизация зависимости эффективна и полезна, но отсутствие гибкости заставило меня уйти.
В конечном счете, я бы неоднократно возвращался к W3 Total Cache и находил новые, более мощные способы повысить его производительность. Он не идеален и, безусловно, имеет некоторые ошибки UX, он работал достаточно хорошо, чтобы я мог найти свой путь с другими подходами к PageSpeed 100.
В конце концов, я выбрал только один новый плагин, который позволил легко устранить проблемы PageSpeed с Disqus — я рассмотрю это ниже.
В конце концов, вы можете выбирать из множества CDN, таких как CloudFlare и RackSpace .
Оптимизация изображения
Недавно я начал экспериментировать с новым сервисом оптимизации изображений KeyCDN и плагином WordPress. Есть небольшая вероятность того, что он управляется роботами, созданными на старых Apple Lisas и Mac:
Он работает хорошо, но другой популярной альтернативой является WP-Smush , старый плагин с более чем 300 000 пользователей.
Устранение блокировки рендера
Если у вас есть большое количество файлов, которые необходимо загрузить для стилизации (CSS) и активации (JS) функциональности вашей веб-страницы, большинство браузеров будут замедляться после параллельного запроса четырех ресурсов.
Вот пример жалобы на блокировку рендера CSS в PageSpeed:
Это может быть сложный элемент WordPress для устранения из-за темы и архитектуры плагина. Мы вернемся к этому.
Какие шаги в конечном итоге подтолкнули мой сайт до 100?
Целевые подходы к оптимизации
Если вы выполнили все основные основы, описанные выше, то улучшение вашей PageSpeed с помощью WordPress требует значительных усилий и может занять довольно много времени.
Давайте шаг за шагом пройдемся по выявленным проблемным областям и путям их решения. По правде говоря, я провел огромное количество экспериментов с различными инструментами и подходами. Я регулярно отказывался от одного подхода и возвращался к другому. Мое решение оказалось довольно хорошо управляемым набором решений. Путь не был прямой Йода.
Минимизация HTML, JavaScript и CSS
Например, вот как вы минимизируете HTML в W3 Total Cache:
Пакетирование JavaScript в конце страницы
Точно так же легко минимизировать JavaScript в W3 Total Cache. Обратите внимание, что ниже я инструктирую W3TC вставлять сжатый файл не в <head> а непосредственно перед </body> . Задержка JavaScript может улучшить ваш счет PageSpeed.
Минимизация комбинированного CSS из тем и плагинов
Поскольку и темы, и плагины используют JavaScript и CSS, требуется немного поработать, чтобы свести их вместе и объединить в один файл (а этого даже недостаточно для PageSpeed, о чем я расскажу ниже).
Чтобы блокировать плагины от загрузки их собственного CSS и дать W3TC команду загружать сжатые и комбинированные версии, вам нужно найти дескриптор плагина для CSS-файла (отличный от имен файлов) и добавить код в вашу тему, чтобы прервать инструкции по загрузке плагина. Затем введите путь к каждому файлу CSS в диалоговом окне W3TC выше, чтобы загрузить его с другими.
if ( !$this->options[‘exclude_css’] ) wp_enqueue_style(«toc-screen»);
if ( $this->options[‘smooth_scroll’] ) $js_vars[‘smooth_scroll’] = true;
wp_enqueue_script( ‘toc-front’ );
Следуя совету Тэдлока, я снял с регистрации свой плагин, включенный в файл functions.php моей темы, начиная с CSS — вы должны найти ссылки, используемые разработчиком плагина:
Я вручную создал комбинированные CSS-файлы с этими тремя таблицами стилей плагинов. Затем я попросил W3TC минимизировать и объединить этот файл в свою собственную таблицу мега-стилей, как показано выше.
Оптимизация загрузки CSS для PageSpeed
W3TC может объединить все мои файлы тем и плагинов, но PageSpeed по-прежнему не нравится видеть даже один CSS-код (так много для хорошей практики разработки HTML):
В итоге я загрузил девять CSS-файлов (только семь показаны ниже). Во-первых, вы должны найти дескрипторы плагинов для CSS и отменить их регистрацию в своей теме, как описано выше. Затем вы должны указать им все на W3TC.
Хотя есть несколько способов получить минимизированную версию всего этого, на самом деле я просто взял сжатый файл W3TC. Я удалил все аргументы кеширующего запроса, например ?cbe3w2 , с поиском и заменой в TextEditor. Я все еще лояльный пользователь TextMate, но на самом деле он имел большие задержки и зависал всякий раз, когда я пытался перемещаться по минимизированному файлу CSS. Поэтому TextEditor помог мне редактировать эти файлы по отдельности.Извиняюсь перед пуристами, я еще не перешел на Sublime.
Несмотря на то, что мне удалось вставить свой уменьшенный CSS в заголовок, позже мне нужно было изменить его, чтобы динамически получать содержимое файлов CSS и отображать их на месте.
После того, как я добавил еще один плагин для совместного использования в социальных сетях, вставка больше не работала, и мне пришлось разделять файлы с помощью вышеуказанного механизма. Это также обеспечивает большую гибкость в будущем. Google PageSpeed никогда не видит этого, и мой кэш Varnish скрывает любое замедление включения двух файлов.
В итоге я настроил все свои CSS-файлы в W3TC, сделал копии сжатых файлов, а затем отключил эту функцию:
Одним из недостатков W3TC является то, что он постоянно показывает раздражающие сообщения об ошибках, даже если вы намеренно используете его необычным образом.
При перемещении файлов CSS из каталогов плагинов, убедитесь, что вы установили правильные относительные пути к изображениям и т. Д. Для работы из корневого каталога сайта. У меня было много ситуаций, когда изображения не загружались, пока я не нашел, где разрешить эти вещи. Я поделюсь примером в разделе « Устранение неполадок » ниже.
Кэширование внешних скриптов в браузере
Забавно, но Google PageSpeed жалуется, если вы загружаете его библиотеки JavaScript извне. Я получил недостатки для внешних скриптов, связанных с Flickr, Disqus и Google Analytics:
Это оказалось довольно большим препятствием и требует много времени и сложности, чтобы полностью решить эти проблемы.
Устранение проблем с Flickr Embed
Во-первых, я недавно вернулся из поездки в Индию и разместил отдельные посты в блоге с фотографиями, встроенными в Flickr, на главной странице. Моя средняя тема быстро прокручивает несколько сообщений, поэтому PageSpeed пожаловался на все из них.
После того, как PageSpeed пожаловался на размеры встроенных изображений, размещенных на Flickr (при различном количестве пикселей), и увидел эти внешние недостатки JavaScript, я вернулся к самостоятельному размещению оптимизированных изображений на своем сайте. Они все еще ссылаются на Flickr для моего текущего альбома в Индии.
Это хороший пример того, как попытка использовать мощный сторонний сервис с простой целью встраивания фотографий убивает ваш счет PageSpeed. Flickr не сделал оптимальной работы, чтобы помочь пользователям WordPress решить эту проблему. Просто в качестве примера им нужно будет:
Предлагайте встроенные размеры, которые удовлетворяют оптимизацию изображения PageSpeed (возможно, как отдельные параметры экспорта, скомпрометированные для вашей PageSpeed - Flickr о качестве изображения)
простота публикации кода JavaScript для интеграции в комбинированные файлы WordPress и W3TC
Обратите внимание, что я изменил пути к своим локальным копиям скриптов. Затем я сделал локальные копии сценариев для Google Analytics и Google DFP, и вскоре после этого было разрешено кэширование в браузере в PageSpeed, за исключением Disqus.
Решение проблемы загрузки плагина Disqus
Я точно не уверен, что это за безопасность, поддержка мультиплатформенности или просто «ум», но Disqus и другие провайдеры, такие как Flickr, похоже, скрывают реальные файлы, которые они загружают с другими файлами. Это делает оптимизацию PageSpeed намного более сложной и зачастую неразрешимой.
По общему признанию, я потратил два-три часа, пробуя разные подходы для оптимизации плагина Disqus — у меня ничего не получалось.
Хотя он предназначен для многих вещей, он также позволяет оптимизировать PageSpeed с установкой.
Внезапно недостатки кэширования в браузере PageSpeed исчезли. Слава к DCL!
Исправление целей крана
PageSpeed часто жалуется на слишком близко расположенные ссылки на мобильных устройствах. Я экспериментировал с несколькими подходами и в итоге просто перестал показывать теги на мобильных устройствах.
Если я потрачу больше времени, я, вероятно, смогу улучшить их UX и перейти с PageSpeed.
Отсутствующие изображения из сжатого и комбинированного CSS
Плагин ArrayToolkit, который отображает значки следования в правой боковой панели, перестал работать для меня. Мне потребовалось некоторое время, чтобы разобраться, какие пути необходимо кодировать с абсолютными путями, чтобы это работало.
В конечном итоге я нашел и заменил эти пути исправленными относительными путями к исходному каталогу плагинов:
У меня все еще есть одна проблема, которую мне нужно решить. Мой новый плагин вкладок (Construct имел встроенные вкладки) перестал работать по пути. Мне просто нужно потратить время на его отладку, но это должно быть довольно легко разобраться.
Выбор лучшего минификатора
Я экспериментировал с YUI Compressor с W3TC для сжатия моих файлов JavaScript и CSS. Вместо того, чтобы привести к увеличению скорости, все вроде сломалось.
Если вы хотите выяснить, что я сделал неправильно, вы можете установить Java и YUICompressor следующим образом:
Пожалуйста, оставьте в комментариях, если вы знаете, как заставить его хорошо играть с WordPress.
В заключение
После второго раунда работы над новой темой все сложилось лучше, чем я надеялся. Я никогда не был уверен, что достигну своей оптимальной цели.
Моя последняя страница Скорость счета
Я набрал 100 PageSpeed для мобильных и настольных компьютеров. Еще более заметно, что мой сайт работал очень быстро — быстрее, чем я когда-либо делал блог раньше. Мне очень любопытно посмотреть, как входящий поисковый трафик и активность читателей реагируют на более высокие показатели и производительность в течение следующих нескольких месяцев.
Вот мои последние оценки PageSpeed, первый Mobile:
А теперь рабочий стол:
Рабочий стол сначала набрал 100, и мне пришлось вернуться и закончить некоторые настройки (обращаясь к меткам тапов), чтобы получить Mobile там.
И опять же, скорость сайта делает его быстрым визитом. Если вам известны другие коммерческие сайты, работающие на скорости 100 PageSpeed, пожалуйста, поделитесь ими в комментариях. Я бы с удовольствием их увидел.
Как один из примеров изменений в SEO, мое популярное эссе о знакомствах переместилось на третье место в рейтинге мобильных результатов в разделе « Знакомства в Сиэтле » (пока не на настольном компьютере). Это говорит мне о том, что, возможно, истории на крупных сайтах, избивающих его, имеют плохую мобильную PageSpeeds, потому что это не просто.
Проблема будущего обслуживания
Чтобы максимизировать PageSpeed моего сайта, мне пришлось внести ряд изменений в мою тему, которые теперь будут создавать зависимости от изменений внешних скриптов и обновлений темы и плагинов. Теперь, когда я выполнил свою краткосрочную задачу, у меня есть работа, чтобы упорядочить свои системы и упростить управление ею.
Мне также нужно будет лучше отслеживать обновления тем Medium и интегрировать изменения. Создание дочерней темы из моих изменений также может облегчить этот процесс. В основном я буду искать изменения, которые перезаписывают мои, обновленные (или дополнительные) файлы JavaScript и CSS.
Управление обновлениями плагинов
Точно так же, когда плагины обновляются, мне нужно следить за такими же обновлениями. Это может помочь мне лучше организовать использование GitHub с плагинами WordPress. Я уже использую это для моей темы.
автоматизация
Возможно, я захочу потратить некоторое время на написание сценариев, чтобы отследить, какие файлы JavaScript и CSS используются с обновленной темой и плагинами, загрузить их на мой сервер, а также свернуть и упаковать соответствующие файлы для ссылки или включения.
SSL
Наконец, одним из моих сюрпризов является то, что SSL не требуется для достижения PageSpeed 100. Это несколько имеет смысл, но подчеркивает, что различные различные компоненты могут влиять на ваш рейтинг в поиске Google. Скоро я напишу о реализации бесплатного SSL от Let’s Encrypt с WordPress.
Что дальше?
Если вам понравилось это, но вы хотите прочитать более общий учебник, который не углубляется в детали, которые могут или не могут относиться к вам, Google PageSpeed Scoring 100/100 с WordPress от KeyCDN является отличным дополнением. Я также написал спонсорскую статью об их CDN в Envato Tuts + ( Ускорьте доставку контента с помощью KeyCDN ) и продолжил работу с ними как с клиентом.
В то же время, если вы ищете другие утилиты, которые помогут вам создать свой растущий набор инструментов для WordPress или кода для изучения и стать более опытным в WordPress, не забудьте посмотреть, что у нас есть в Envato. Рынок
В будущем я рассмотрю еще несколько улучшений для повышения общей эффективности моего сайта. Это включает:
Просмотрите страницу PageSpeed моих самых популярных постов, таких как Amazon Marketplace Fraud Made Easy (в настоящее время 97), чтобы убедиться, что все они работают на уровне 100. Как и в этом примере, часто это просто размер встроенных изображений, который мешает PageSpeed.
Улучшение управления моей темой и плагинами для максимально возможной поддержки этих оптимизаций по мере поступления обновлений, например, отслеживание изменений в файлах JS и CSS в обновлениях, сохранение обновленных копий внешних файлов JS, таких как Analytics, повторное сжатие обновленных файлов и т. Д.
Обновление моего сервера до PHP7 . Обновление обещает почти двукратное улучшение производительности. Это не просто обновить до выпуска Ubuntu в комплекте, но это не так уж сложно.
Обновление моего сервера до Varnish4 . Обновление требует некоторой доработки файлов конфигурации, и я не уверен в ее улучшении производительности и совместимости с W3 Total Cache, но я готов попробовать.
ИзучитеCacheEnabler KeyCDNдля предоставления более эффективных изображений Webp пользователям Chrome. Размеры файлов Webp значительно меньше, но пока не поддерживаются Safari. Я на самом деле очень рад улучшению пользовательского опыта с этим.
