Руководство разработчика по сокращению времени загрузки WordPress до 2 секунд (с данными)

Хотите узнать, с чего начать с улучшения скорости страницы? Обозреватель Том Демерс делится тем, как он исправлял улучшения скорости страницы на нескольких сайтах WordPress без (большого) ввода от разработчика.Благодаря постоянному сосредоточению внимания на опыте пользователей и показателях участия в последних обновлениях алгоритмов, маркетологам стало еще более важно обратить внимание на то, насколько быстро их сайты. Скорость страницы уже давно является рейтинговым фактором для результатов поиска на рабочем столе, и она может вскоре повлиять на рейтинг мобильных устройств. Однако преимущества улучшенного времени загрузки значительно превышают их влияние на SEO и органическое ранжирование вашего сайта. Рассмотрим недавние данные Google, в которых показано, что «53 процента посещений заброшены, если мобильный сайт занимает больше трех секунд для загрузки», или что «для каждой второй задержки загрузки мобильных страниц конверсии могут упасть до 20 процентов». Итак, как вы на самом деле ускоряете свой сайт? Для многих нетехнических маркетологов попытка выяснить, как улучшить скорость страницы, может быть непростой задачей. Какие рычаги вы должны на самом деле тянуть, чтобы создать результат? И как вы получаете эти изменения, реализованные на вашем сайте? Я не разработчик. Моя компания владеет и управляет множеством разных (относительно простых) издательских сайтов, построенных на WordPress. Я приступил к работе над улучшением времени загрузки для этих сайтов без какого-либо вмешательства со стороны разработчиков, чтобы понять, какое влияние может повлиять на некоторые простые настройки, которые может сделать любой (даже я!). В этом посте я проведу каждую из оптимизаций, объясню, что повлияло на наши сайты, и обмениваются фактическими данными в зависимости от времени загрузки, оценки скорости Google и т. Д. Три важных момента, на которые я вернусь позже в сообщении:

Как я уже сказал, это довольно простые сайты, построенные в WordPress, поэтому все плагины и решения являются специфичными для WordPress.

Более сложный сайт, построенный на другой платформе с различными функциями (например, сайты электронной коммерции, более сложные сайты публикации), будет иметь множество дополнительных, более сложных проблем и также будет по-разному реагировать на эту тактику, чем наши сайты .

Не позволяйте совершенству быть врагом хорошего, когда дело доходит до скорости страницы; разработчики могут сказать вам, что для достижения чистого времени загрузки страницы «наилучшей практики» вам необходимо перепроектировать ваш сайт (что может быть непрактично для вашей компании в данный момент). Хотя это может быть так, вероятно, существует некоторая комбинация тактики, описанной ниже, которую вы можете реализовать, чтобы улучшить скорость страницы. Помогите разработчикам сосредоточиться на правильных показателях (которые мы рассмотрим ниже) и работаем по улучшению.

Все это говорит о том, что этот пост (и понимание некоторых основных рычагов, доступных для улучшения скорости страницы) должен помочь вам лучше понять потенциал улучшения скорости на вашем сайте.

Для чего вы оптимизируете? Выбор правильных показателей скорости страницы

Как и многие начинающие оптимизаторы, я сосредоточил свои усилия на скорости страницы, основываясь на рекомендациях Google по обеспечению качества страницы. Это прямо из уст Google, дает очень легкие для понимания показатели (класс, как и в школе!), И имеет полезные предложения для ускорения загрузки страниц. Инструмент определенно может быть полезен, но по мере того как вы копаетесь в скорости страницы, вы можете признать, что:

оценка может быть немного выигрышной. Иногда вы ускоряете скорость загрузки страницы, и ваш балл упадет. Иногда вы ничего не будете делать, и оценка будет двигаться вокруг некоторых. Помните, что Святой Грааль здесь, чтобы ускорить ваш сайт для ваших посетителей, поэтому не просто изучайте тест!

не представляется вероятным, что Google использует этот показатель как ранжирующий сигнал, так же как и время загрузки в Google Chrome по сравнению с другими сайтами в результатах поиска, в которых вы участвуете, так как автор сайта в поисковой системе Daniel Cristo указывает .

Очень смелое смещение выше, чем ваша скорость, учитываемая по отношению к вашим конкурентам SERP. если у вас есть простой сайт B2B, вы можете посмотреть успешный сайт электронной коммерции и сказать: «Их сайт идет медленнее, чем у нас, и отлично! Мы должны быть в порядке! »Но на самом деле это не тот, с кем вы конкурируете. Вы хотите, чтобы ваш сайт был таким быстрым, каким он может быть, поэтому вы должны сравнивать его с сайтами, которые занимают место в наиболее важных результатах поиска для вашего сайта. Итак, если мы не используем инструментальные средства Google PageSpeed ​​Insight, как всех и всех для наших усилий по оптимизации, какие показатели мы должны сосредоточить? Комиссар по поисковым системам Крис Ливерсидж делает большую работу, чтобы более подробно описать это в своем превосходном сообщении на разных событиях скорости страницы, но фактически я сосредоточился на:

время до первого байта (TTFB). Как быстро после того, как будет сделан запрос, что ваш сервер и / или CDN (который мы немного поработаем) отправит первый байт данных.

критический путь рендеринга / рендер рендеринга - по существу, когда отображается ваше содержимое «над складкой».

рендеринг полной страницы - при загрузке всей страницы.

Опять же, мы хотим сосредоточиться на пользовательском опыте на нашем сайте, поэтому следите за тем, чтобы содержимое выше свертки было быстрым и быстро загружалось на всю страницу. Показатель TTFB (хотя и несовершенный) может быть полезен, поскольку он позволяет нам узнать, является ли проблема времени загрузки результатом проблем с сервером. Итак, это наши показатели. Как мы знаем, хотя наши страницы даже медленны?

Инструменты измерения скорости страницы

Во-первых, нам понадобится инструмент для их измерения. К счастью, для этих целей существует множество бесплатных бесплатных инструментов. Я использовал веб-тест, который их довольно просто излагает. Вот результаты для Search Engine Land, которые неплохо подходят для такой визуальной домашней страницы и большого и сложного сайта публикации: Там, где есть инструменты, существует множество возможностей для измерения скорости и получения предложений, в том числе:

Бесплатный инструмент Pingdom

GT Metrix

Основной CDN бесплатный инструмент

Инструмент Varvy.

И другие. Для наших целей здесь я буду использовать данные из Web Page Test.

Каковы наши цели? Что такое «хорошая» скорость страницы?

Опять же, время загрузки страницы будет значительно отличаться от ниши к нише и SERP до SERP, поэтому наша первоначальная цель должна быть просто «лучше». Тем не менее, давайте рассмотрим некоторые общие рекомендации по оптимальной практике в отношении целевых времен для этих событий:

TTFB - Идеально менее 200 мс (миллисекунды), по крайней мере менее 500 мс (исследование Moz, проведенное несколько лет назад, показало, что на многих сайтах с высоким рейтингом был TTFB в 350 мс, тогда как сайты с более низким рейтингом часто были ближе к 650 мс.)

Начать рендеринг - Идеально менее 1 секунды, по крайней мере, менее 2 секунд.

Полностраничный рендеринг - Идеально менее 3 секунд, по крайней мере, менее 5 секунд. (Джон Джон Мюллер рекомендует в течение 2-3-секундного времени загрузки и упоминает, что он также использует веб-тест.)

Опять же, если ваше полное время загрузки страницы заходит через 15 секунд, и это за 5 секунд до завершения критического пути, не просто поднимите руки. Начните оптимизацию и работайте, чтобы снизить эти цифры, даже если вы не сможете получить их до секунды. Быстрее - лучше!

Хорошо, так что вы можете сделать, чтобы улучшить скорость страницы?

Предположим, вы измеряете скорость своей страницы, и она медленная; что вы можете сделать, чтобы изменить ситуацию? Наиболее распространенные предложения инструмента Google PageSpeed ​​Insights (и экспертов по оптимизации) включают в себя:

сокращение времени отклика сервера.

включение сжатия.

использование кэширования браузера.

исключить блок блокировки визуализации над слоем (CSS и JS).

Изменить код.

сжатие и изменение размеров изображений.

Я рассмотрю, какие оптимизации я смог реализовать на четырех разных сайтах WordPress, а также время загрузки до и после, возникающее в результате этих оптимизаций. Опять же, эти числа не будут действительны для всех сайтов, и не каждая лучшая практика будет оказывать такое же влияние на каждый сайт. Но я думаю, что благодаря этому процессу вы увидите, как некоторые простые, быстрые оптимизации могут существенно повлиять на скорость. Обратите внимание, что, хотя есть некоторые оптимизации, которые вы можете сделать с базовым пониманием HTML, есть некоторые точки перегиба, где важно получить технический ресурс, чтобы перепрыгнуть, и выяснить лучший способ улучшить время загрузки вашего сайта.

Шаг 1: Сравнение показателей скорости страницы

Во-первых, я сделал снимок показателей скорости страницы каждого сайта на домашней странице сайта и более глубокой странице статьи. Я сделал это специально для целей этого поста. Если вы хотите оптимизировать свой сайт, вы в идеале захотите взглянуть на таблицу показателей или, по крайней мере, на выборку страниц с самым высоким трафиком и на типичной странице для каждого шаблона на вашем сайте. По сравнению с некоторыми сайтами эти цифры не страшны - но для простых контент-сайтов, построенных на WordPress без большого количества звонков и свистков, определенно есть много возможностей для улучшения. Мы реализовали четыре различные рекомендуемые оптимизации скорости страницы. Ниже мы увидим влияние каждой оптимизации по мере ее реализации, а затем совокупное влияние всех оптимизаций. Итак, давайте вникаем в оптимизацию.

Шаг 2: очистка кода

Инструмент «PageSpeed ​​Insights» Google рекомендовал «минимизировать» каждый из CSS, JavaScript и HTML сайтов. Для этого мы использовали бесплатный плагин WordPress с именем Autoptimize. На четырех сайтах потребовалось около 20 минут: После оптимизации HTML, JS и CSS и загрузки встроенных JS и CSS инструмент Google переместил миниатюру и «Исключить блокирование визуализации JavaScript и CSS в вышеописанном содержимом» в столбец «Оптимизация найден»: Каково было воздействие? Как вы можете видеть, большинство страниц увидели улучшение, а некоторые увидели значительные 20-процентные обновления. Но в некоторых случаях было незначительное улучшение или даже худшая производительность. Существует некоторая дисперсия теста для тестирования, но вы видите, что, хотя эти улучшения обычно улучшают скорость страницы, их уровень воздействия зависит и зависит от сайта. Обратите внимание: это бесплатная версия плагина с «лучшей догадкой» в идеальных настройках. Будьте осторожны при внесении изменений в код вашего сайта, и, как я расскажу позже в сообщении, это определенная область, где вы можете захотеть обратиться к разработчику за советом.

Шаг 3: кеширование браузера

Затем мы хотели использовать кеширование браузера. Как правило, для этой цели вы можете использовать плагины WordPress, такие как WP Super Cache или WP Rocket, но эти сайты размещались в WP Engine, который имеет некоторые проблемы совместимости с некоторыми из этих плагинов. Таким образом, мы просто включили кеширование объектов WP Engine: Каково было воздействие? Как вы можете видеть, это оказало более сильное влияние, чем наши усилия по очистке кода, и на двух сайтах мы увидели значительное улучшение производительности на 20-30%, и только две страницы видели всплеск времени рендеринга.

Шаг 4: Внедрение CDN

Опять же, WP Engine имеет свой собственный вариант CDN, поэтому мы включили этот, который также является чрезвычайно простым процессом в WP Engine: Каково было воздействие? Это первая реализация, в которой мы действительно видели заметное снижение производительности. Несколько вещей, чтобы отметить там:

CDN реализуется для улучшения скорости страницы для пользователей в разных частях страны, поэтому теоретически его (положительное) воздействие должно быть больше для разных тестовых случаев в разных областях по всему миру.

Опять же, это был всего лишь один тест против небольшого числа сайтов - другие люди протестировали CD Engine WPN и увидели лучшие результаты, поэтому ваш пробег может варьироваться.

Важным выводом здесь является то, что, опять же, не каждая оптимизация будет оказывать одинаковое воздействие на каждый сайт, и иногда некоторые усилия будут иметь минимальное или вообще не влияют на реальность.

Шаг 5: Оптимизация изображения

Наконец, мы работали над сжатием и изменением размеров изображений на каждом из сайтов. В некоторых случаях изображения на сайтах уже были сжаты, а самым крупным виновником была (как вы увидите, домашняя страница) для сайта четыре. Я нахожу, что на сайтах, которые его игнорируют, оптимизация изображений часто является самым быстрым, простым и наивысшим достижением скорости страницы. Для этого мы использовали плагин сжатия изображений под названием Optimus. Мы также сжимали и изменяли размер каждого изображения на страницах «вручную», чтобы убедиться, что сжатие не повлияло на качество и что файлы были как можно меньше: Существует ряд плагинов оптимизации изображений для WordPress, включая, но не ограничиваясь:

Optimus

WP Smush

Сжатие изображений EWWW

Сжатие коротких пикселей

Всякий раз, когда вы используете эти типы плагинов, вам необходимо знать потенциальные проблемы с качеством изображения / рендерингом где-то на вашем сайте, если вы применяете их ко всем существующим изображениям в медиатеке. (После некоторого дополнительного тестирования / рекомендаций со стороны скорости страницы - подробнее об этом ниже - мы фактически переключились на Short Pixel.) Существует также ряд инструментов для сжатия отдельных изображений перед их загрузкой, в том числе:

Optimizilla

Compressor.io

Крошечный PNG

И есть много других. Каково было воздействие? Как вы можете видеть из нескольких домашних страниц, сжатие изображений может привести к некоторым из самых больших выигрышей загрузки страницы. Лучше всего сжатие изображений и замена несжатых версий - задача, для которой вам обычно не нужна какая-либо помощь в разработке. Опять же, уровень улучшения зависит от сайта. Сайты, на которых изображения уже были сжаты и изменены (или просто оказались меньше), очевидно, не будут получать ничего от этого конкретного шага.

Итак, каково совокупное влияние наших усилий?

Как вы можете видеть, результаты здесь варьируются от сайта к сайту. Но мы побрили целых 2 секунды от времени загрузки, выполнив эти шаги, и почти в каждом случае мы улучшили скорость, с которой посетители видят наш вышеописанный контент. Но некоторые времена загрузки на самом деле немного ухудшились для всех наших усилий, и казалось, что для простого сайта мы сможем выиграть много таких нагрузок. Итак, что еще вы можете сделать?

БОНУС ШАГ: Возьмите pro!

Получив значительный доход от некоторых моих любительских усилий DIY, я решил пойти и нанять разработчика, специализирующегося на оптимизации скорости страницы. Наш специалист продолжал работать еще больше. В частности, они:

удалены или заменены плагины в моей конфигурации WordPress, которые они определили как замедляющие работу сайта.

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

Этот процесс фактически сократил наши (улучшенные) времена загрузки пополам. Это отличный пример того, как разработчик хорошо разбирается в передовой практике скорости страницы, что может значительно улучшить ваши результаты. Если у вас есть внутренний ресурс разработки, сообщайте свои цели (уменьшая время загрузки страницы и скорость, которую пользователь видит в важных элементах выше), и при необходимости обменивайтесь ресурсами, чтобы они знали о лучших методах ускорения вверх по сайту. Мнения, выраженные в этой статье, принадлежат авторам гостевых изданий, а не обязательно поисковым системам. Здесь перечислены авторы работ.