Внимание! Партнерский материал!
Если Вам необходимо увеличить скорость загрузки сайта на WordPress, то Вы можете сделать это самостоятельно с помощью плагинов и инструкций, либо обратиться за помощью к специалистам. Безусловно, второй способ будет намного быстрее и эффективнее, однако дороже.
Ниже будет подробно описаны факторы, которые влияют на время загрузки Вордпресс сайта. Также будут описаны некоторые методы, которые позволят достичь желаемого результата. Читайте внимательно и придерживайтесь инструкции, чтобы сократить время загрузки сайта и попасть в зеленую зону Google Page Speed.
Благодаря постоянному сосредоточению поисковых систем непосредственно на самом пользователе интернета и показателям последних обновлений алгоритмов Google, владельцам сайтов стало еще более важно обратить внимание на скорость загрузки их сайтов.
Не секрет, что скорость загрузки страницы уже давно является одним из главных факторов результатов сёрфинга в интернете. И сегодня вполне логично для любой страницы в интернете быть зависимой от мобильных устройств, а не от ПК.
Недавние данные от Google показали, что «в 53 процентах случаев пользователь закрывает вкладку, если на ее открытие требуется более трёх секунд».
Как же тогда повысить скорость загрузки страницы? Как добиться желаемого результата? Даже если Вы не разработчик, этот пост поможет Вам самостоятельно, без вмешательства специалистов, улучшить скорость загрузки страниц, построенных на WordPress.
Вот три важных момента, к которым мы вернемся позже:
- Мы рассматриваем сайты на WordPress, это значит, что все плагины и решения в данной статье касаются именно WordPress платформы.
- Более сложные сайты, построенные на других платформах с различными функциями (например, e-commerce сайты) будут иметь ряд дополнительных, более сложных проблем и решений, чем те, на которые акцентируем внимание мы.
- Не позволяйте совершенству быть врагом хорошего. Специалисты могут сказать Вам, что для достижения желаемого результата нужно перепроектировать сайт, что может понести за собой незапланированные затраты (сперва попробуем сами).
Поэтому, обращаясь к разработчикам, четко объясните ему задачу, пусть он отталкивается, в первую очередь, от Ваших возможностей и пожеланий.
Для чего Вы оптимизируете? Выбираем правильные способы ускорения загрузки страницы.
Как и многие начинающие SEO оптимизаторы (о том, что такое SEO и как с этим работать, рекомендую прочитать в моем блоге), мы сосредоточим свои усилия на скорости загрузки, основываясь на рекомендациях Google по улучшению качества страницы. Ниже представлена утилита PageSpeed Insights.
Безусловно, это очень полезный инструмент, однако стоит уделить его применению достаточно времени, чтобы получить наилучший результат. Бывает, Вы вслепую следуете рекомендациям сервиса, а общая оценка падает. Или наоборот, минимум действий дают лучший результат. Поэтому важно понять, как достичь оптимального решения, не жертвуя при этом контентом сайта. Помните, что Вы оптимизируете сайт не для себя, а для его посетителей.
Допустим, у Вас есть простой сайт для определенной аудитории.
Если Вы сравните его с какими-либо крупными коммерческими сайтами и обнаружите, что Ваши страницы загружаются быстрее – это не обязательно говорит о том, что всё в порядке. Ведь в действительности Вы соревнуетесь не с ними.
Чтобы сделать свой сайт настолько быстрым и популярным, насколько это возможно, сравнивайте его с проектами, которые находятся в топе важных для Вас результатах поиска, тематически схожими с Вашим.
Если же PageSpeed Insight от Google нам недостаточно для эффективной оптимизации, на что же заострить своё внимание тогда? Фактически, нам важны следующие значения:
- Время до первого байта (TTFB) – значение, которое показывает, насколько быстро после осуществления поискового запроса Ваш сервер отправляет первый байт данных.
- Критический путь рендеринга (CRP) – то минимальное значение ресурсов, что необходимо для отрисовки страницы.
- Полный рендеринг страницы – время, необходимое для отображения всей страницы.
Опять-таки, не забываем, что ориентируемся мы на пользователя, поэтому следите за тем, чтобы содержимое сайта загружалось молниеносно и быстро на всю страницу. Значение времени до первого байта полезно, поскольку позволяет узнать, является ли проблема времени загрузки страницы результатом проблем с сервером.
Со значениями разобрались. Но как же понять, быстрый наш сайт или все еще медленный?
Прежде всего, нам понадобится средство измерения скорости загрузки страницы. К нашему с Вами счастью, в интернете полным-полно бесплатных и платных инструментов для таких целей. Мы с Вами воспользуемся сервисом WebPageTest, он просто и доступно излагает всю необходимую нам информацию. Ниже приведены результаты страницы, которые являются удовлетворительными, учитывая, что проверку осуществляли для Польши, для пользователей наших с Вами провайдеров показатели будут еще выше.
Каковы наши цели? Какая скорость загрузки страницы считается «хорошей»?
Первоначальная цель – сделать скорость загрузки как можно лучше. Поэтому давайте рассмотрим некоторые общие рекомендации по значениям, от которых следует отталкиваться:
- Время до первого байта – идеальное значение до 200 миллисекунд, по крайней мере, менее 500 миллисекунд (исследование Moz, проведенное несколько лет назад, показало, что многие сайты с высоким рейтингом имели время до первого байта в 350 миллисекунд, а сайты с более низким рейтингом имели значение близкое к 650 миллисекундам).
- Начальный рендеринг – идеальное значение до 1 секунды, по крайней мере, менее 2 секунд.
- Полностраничный рендеринг – идеальное значение до 3 секунд, по крайней мере, менее 5 секунд (Джон Мюллер из Google рекомендует период от 2 до 3 секунд)
Опять же, если Ваша страница полностью загружается за 15 секунд, не опускайте руки. Оптимизируйте, пробуйте, работайте над тем, чтобы снизить эти цифры, даже если не получится свести к рекомендуемым значениям. Помните, что в нашем случае «быстрее – лучше».
Что же мы можем сделать для того, чтобы ускорить скорость загрузки страницы?
Наиболее распространенные рекомендации и предложения инструмента Google PageSpeed Insight (а также экспертов по оптимизации) включают в себя:
- Сокращение времени отклика сервера
- Включение сжатия
- Устранение кода блокировки (CSS и JS)
- Сокращение самого кода
- Сжимание и изменение размера изображений
Шаг 1: Чистка кода
PageSpeed Insight предложил нам сократить код CSS, JS, HTML, тем самым оптимизировав сайт. Для этого воспользуемся бесплатным плагином от WordPress, который называется Autoptimize. Оптимизация может занять до 5 минут.
После сокращения кода CSS, JS и HTML, инструмент PageSpeed Insight переместит пункт «Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы» из раздела «Предложения по оптимизации» в раздел «Примененные приемы оптимизации». На большинстве страниц будет заметно улучшение, некоторые из которых станут эффективнее вплоть до 20 процентов. В некоторых случаях могут быть незначительные улучшения или даже ухудшения, однако, в целом страницы станут быстрее и эффективнее.
Обратите внимание на то, что это бесплатная версия плагина, поэтому вносите изменения в код с предельной осторожностью. Конечно же, наилучшего результата получится достичь, наняв опытного разработчика для конкретной задачи.
Шаг 2: Кэширование браузера
Здесь мы рассмотрим использование кэширования браузера. Для этой цели, как правило, используют WordPress плагины, такие как WP Super Cache или WP Rocket, однако некоторые сайты размещаются в WP Engine, который иногда имеет проблемы совместимости с некоторыми из этих плагинов. Таким образом, можно просто разрешить кэширование в WP Engine, изменив «Disable» на «Enable».
Процесс кэширования, как правило, оказывает гораздо большее влияние, чем процесс по чистке кода. После этой процедуры можно увидеть улучшение производительности на 20-30%.
Шаг 3: Воплощение в жизнь CDN
CDN (Content Delivery Network) – это обычно большое количество серверов с соответствующим программным обеспечением, которые служат для ускорения отдачи информации конечному пользователю, то есть посетителю страницы.
Раз уж мы затронули WP Engine, то следует сказать, что он имеет свою собственную интерпретацию CDN. Как Вы видите, в применении этой функции нет абсолютно ничего сложного.
CDN применяется для улучшения скорости загрузки страницы для пользователей в разных географических точках, поэтому, в теории, его положительное воздействие на производительность страницы должно быть выше для разных случаев в разных регионах мира.
Не забывайте, что Ваш тест – один из множества. Результаты применения CDN разных сайтов могут варьироваться от очень успешных до минимальных улучшений, поэтому нельзя утверждать, что Ваш результат хорош или плох. Стало лучше – прекрасно, нет – устраняем проблемы дальше!
Шаг 4: Оптимизация изображений
Наконец, мы рассмотрим такую важную вещь, как сжатие и изменение размеров изображений для Вашего сайта. В некоторых случаях изображения уже могут быть оптимизированы, но убедиться, так ли это на самом деле - никогда не помешает. Вполне вероятно, что лишь часть изображений на Вашем сайте оптимизирована, в то время как другая часть – нет. Оптимизация изображений зачастую является самым простым и быстрым способом достижения наилучшей производительности страницы.
Для начала воспользуемся еще одним плагином WordPress для сжатия изображений, который называется Optimus. Также полезно будет изменить размеры изображений и сжать их «вручную», чтобы убедиться, что сжатие не повлияло на качество изображений, а их размер стал меньше.
Существует перечень плагинов для оптимизации изображений для WordPress:
- Optimus (описан выше)
- Smush Image Compression and Optimization
- EWWW Image Optimizer
- Short Pixel Image Compression
Это, конечно же, далеко не весь перечень, но для наших задач больше нам и не нужно. Всякий раз, когда Вы используете этот тип плагинов, необходимо знать о возможных проблемах с качеством изображения или рендерингом в какой-то области сайта, если плагин применяется ко всем изображениям медиатеки.
Упомянутый выше инструмент Short Pixel Image легок и прост в использовании. Он позволяет сжимать изображения до размеров, приемлемых для загрузки на сайт. Таким образом, перед загрузкой изображений на сайт, желательно сжать их все до единого, чтобы не снижать скорость загрузки страниц, где присутствуют картинки.
Вот еще несколько инструментов для сжатия изображений перед их загрузкой на сайт:
- Optimizilla
- Compressor.io
- Tiny PNG
И, конечно, множество других.
Сжатие изображений играет очень большую роль в оптимизации сайта. Этот шаг может привести к наилучшему результату повышения скорости загрузки страницы. Что самое приятное, сжатие изображений и замена несжатых – та часть работы, которая не требует вмешательства со стороны разработчиков, с этим вполне можно справиться самостоятельно!
Обратите внимание, что степень улучшения зависит непосредственно от самого сайта. Если изображения на нем уже были оптимизированы ранее, очевидно, что этот шаг не приведет ни к каким улучшениям.
Что же еще мы можем сделать? Нанять профессионала!
После реализации наших любительских усилий мы получим весьма приятный результат, по сравнению с первоначальной степенью оптимизации сайта. Специалист, в отличие от нас, хоть и повторит нашу с Вами работу, но сделает это гораздо эффективнее и с умом. Он проделает следующее:
- Удалит или заменит плагины в нашей конфигурации WordPress, если посчитает нужным, так как те могут замедлять работу сайта.
- Изменит код, конфигурацию сервера, а также настройки плагинов оптимизации скорости в лучшую сторону.
Если мы с Вами ускорили время загрузки страницы и нас это устраивает, то разработчик сделает свою работу и сократит это время еще вдвое! Привлечение специалиста – отличный пример того, как человек хорошо разбирается в своей работе, при этом значительно улучшая результат собственноручной оптимизации своего сайта.
