Полное руководство по оптимизации скорости страницы для WordPress

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

вступление

У интернет-пользователей не хватает терпения, когда дело доходит до времени загрузки страниц. Мы нажимаем на ссылку или вводим URL-адрес и ждем секунду, две, три и все. Согласно статистике Google, 50% пользователей ожидают, что мобильный сайт загрузится за 2 секунды, а 53% пользователей скорее всего покинут страницу, если она загружается дольше 3 секунд. Это очень короткий период, если учесть, что среднее время загрузки домашней страницы на мобильном устройстве составляет 19 секунд (в сети 3G). Время загрузки на компьютерах быстрее, и среднее время загрузки составляет 5 секунд, но это все равно слишком долго.

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

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

Если ваш сайт был создан с учетом монетизации, будь то интернет-магазин электронной коммерции или вы продаете онлайн / оффлайн услуги, упускать потенциальных клиентов никогда не бывает хорошо. Вы в основном оставляете деньги на столе. Повышение скорости страницы должно положительно сказаться на вашем заработке. Забавный факт: кампания Обамы по сбору средств увеличила конверсию пожертвований на 14% за счет оптимизации сайта и сокращения времени загрузки страницы с 5 до 2 секунд.

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

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

Конечно, время загрузки варьируется по нескольким причинам, например, из-за скорости интернета посетителя, его местоположения и того, насколько «тяжелым» или раздутым является наш веб-сайт. Мы ничего не можем сделать со скоростью интернета посетителя, но мы можем позаботиться о других аспектах и ​​улучшить опыт для всех. В этом руководстве мы рассмотрим, как оптимизировать наш веб-сайт WordPress для повышения скорости, сделать его быстрым и компактным, так что вперед!

Оглавление

• Фонды
  • WordPress Хостинг
    • Общий хостинг
    • Управляемый хостинг
    • VPS или выделенные серверы
  • Тема WordPress
  • Плагины WordPress
• Шаги по оптимизации скорости страницы WordPress
  • Инструменты скорости страницы
    • Статистика Google PageSpeed
    • GTMetrix
    • Тест скорости сайта Pingdom
    • Тест веб-страницы
  • Оптимизация изображения
    • Мини-руководство по оптимизации изображений
    • Google PageSpeed ​​оптимизированные изображения
    • Другие улучшения изображения
    • Улучшения тематического исследования
  • Кэширование браузера
  • Сжатие ресурсов (Gzip или Deflate)
  • Удалите ненужные файлы JS или CSS
  • Блокирующий рендеринг JavaScript и CSS в содержимом верхней части страницы
  • Кэширование на стороне сервера
    • WP Rocket (плагин кэширования на стороне сервера)
  • Сеть доставки контента
    • Облачная вспышка
• Окончательные результаты
• Вывод

Фонды

Чтобы сделать ваш сайт максимально быстрым, мы должны построить его на хорошем фундаменте. Как и при строительстве дома, вы не хотите строить его на зыбучих песках и иметь проблемы в самом начале. Вы хотите построить его на прочном фундаменте, чтобы он прослужил долгое время без каких-либо проблем. Три основные вещи, которые нужно проверить:

• хостинг
• тема вордпресс
• плагины WordPress

WordPress Хостинг

Хостинг — это основа вашего веб-сайта WordPress и, следовательно, важнейший компонент, который нельзя упускать из виду, даже если у вас уже есть хостинг. Переход на лучшего хостинг-провайдера ускорит время загрузки вашего WordPress на несколько секунд.

Выбор правильного веб-хостинга важен, и вы не должны основывать свое решение на цене хостинга. Обычно при низких ценах вы получаете низкую производительность, и именно этого мы хотим избежать. Давайте рассмотрим доступные варианты хостинга и объясним, в чем различия.

Общий хостинг

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

Представьте себе большую пиццу (хммм?…), каждый сайт на виртуальном хостинге получает совсем крошечный кусочек. Но поскольку на вашем сайте много посетителей, ему нужно больше пиццы! Он все еще голоден, но пиццы больше нет :(, потому что другие сайты тоже голодны…

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

Конфигурация сервера на общих хостингах очень ограничена, и у вас не так много места, чтобы настроить его по своему вкусу. Сервер предварительно настроен на определенные, обычно очень общие настройки, и он должен без проблем запускать WordPress. Проблемы возникают позже, в виде нехватки памяти или в виде ограниченных настроек PHP, которые необходимы для правильной работы плагина.

Я не могу рекомендовать виртуальный хостинг для любого бизнес-сайта, но если бы мне пришлось, я бы сказал, что он больше всего подходит для сайтов с очень низким трафиком.

Управляемый хостинг

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

Серверы на управляемом хостинге менее загружены, что означает больше серверных ресурсов для вашего сайта. Эти серверы обычно оптимизированы для максимально плавной работы WordPress, у них больше памяти, вычислительной мощности и системы кэширования.

Установка и настройка аппаратного и программного обеспечения этих управляемых серверов хостинга осуществляется хостинговой компанией (отсюда и слово «управляемый»). Другие услуги, такие как резервное копирование, балансировка нагрузки, аварийное восстановление и проверки/предотвращения безопасности, также могут быть частью управляемого хостинга, в зависимости от предложения хостинговой компании.

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

VPS или выделенные серверы

Если придерживаться аналогии с пиццей, с VPS (Virtual Private Server) вы получаете несколько кусочков пиццы, но не всю пиццу, а с выделенными серверами вы получаете всю пиццу.

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

Оба этих варианта предлагают больший контроль и ресурсы, но они также стоят дороже и требуют больше навыков для их настройки и обслуживания в долгосрочной перспективе. VPS/выделенные серверы также могут управляться, так что вам не нужно быть гуру серверов, чтобы их использовать. Они подходят для сайтов с большим объемом трафика.

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

Бесплатная оптимизация сайта, которую сейчас предлагает каждый приличный хостинг, заключается в обновлении версии PHP до 7.x. Если ваш сайт WordPress работает на PHP ниже 7, например 5.6 или даже старше, обратитесь в службу поддержки хостинга и попросите их обновить его до последней стабильной версии. Если вы ищете новый хостинг, вы можете спросить их поддержку, есть ли у них версия PHP 7.x. Все они должны ответить твердым «да», но если у них нет возможности использовать PHP 7.x, я бы рекомендовал держаться от них подальше. PHP 7, по сравнению со старыми версиями, является большим улучшением, когда речь идет о скорости и производительности, и на него очень легко переключиться, так что воспользуйтесь этим.

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

Тема WordPress

Когда мы выбираем тему WordPress для нашего сайта, мы всегда начинаем с дизайна темы, и это нормально. Сначала мы должны выбрать несколько тем, которые нам нравятся, потому что мы хотим, чтобы наш сайт был потрясающим, а отличный дизайн — это первое, что видит посетитель. Во-вторых, это, вероятно, функциональность темы. Предлагает ли тема или рекомендуемые плагины темы нужную нам функциональность? Если это так, отлично! Мы в деле! Что мы почти всегда забываем, так это проверить, насколько быстро загружается тема.

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

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

Плагины WordPress

Часто возникает вопрос: «Сколько плагинов слишком много?». Проблема не в количестве плагинов WordPress, а в качестве кода и влиянии плагина на систему. У вас может быть более 50 активных плагинов, каждый из которых отвечает за небольшую специфическую функциональность (с хорошим кодом), и сайт будет работать нормально. С другой стороны, у вас может быть 5 активных плагинов, и один из них может засорять вашу систему, замедляя работу WordPress.

Просмотр кода каждого плагина — хорошая идея, но «ни у кого нет на это времени», к тому же для этого вам потребуются хорошие знания в области программирования. Если вы пойдете по этому пути, вам следует остерегаться плагинов, которые ставят в очередь множество внешних ресурсов, делают много HTTP-запросов, делают ненужные (неоптимизированные) запросы к базе данных и т. д. (в основном все, что может замедлить работу веб-сайта WordPress, без уважительной причины).

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

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

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

Шаги по оптимизации скорости страницы WordPress

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

Во-первых, вы должны создать резервную копию своего сайта WordPress, вот руководство о том, как это сделать с помощью плагина WordPress. Береженого Бог бережет!

Во-вторых, я хотел бы предупредить вас, чтобы вы не ожидали оценки 100/100 в инструментах скорости страницы, которые мы будем использовать в нашем руководстве. Стремление к оценке 100/100 не является хорошей идеей или даже возможно на некоторых сайтах. Все зависит от того, какой контент отображается на вашем сайте. Если на сайте есть только немного текста и изображения, то, конечно, высшая оценка вполне возможна. Но если у вас длинная страница с большим количеством мультимедийного контента и интеграцией других сторонних приложений, таких как карты Google и т. д., то 100 баллов вам не по карману, и вам также не следует стремиться к этому.

Почему нельзя делать 100/100? Если вы будете следовать инструкциям инструментов скорости страницы и оптимизировать все, как они говорят, ваш сайт может работать неправильно. Если вы переместите все блокирующие файлы JS или CSS в нижний колонтитул, то появится мигание CSS (сначала появится нестилизованный контент, а когда загрузится CSS, сайт «вспыхнет» на место), то же самое произойдет с кодом JS , который изменит любые элементы DOM после загрузки кода JS.

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

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

Я установил последнюю версию WordPress, тему MedicPress, все рекомендуемые плагины темы и импортировал демо-контент. Это наша отправная точка для тестового сайта.

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

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

Первое правило оптимизации вашего WordPress для скорости таково: всегда измеряйте!

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

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

Инструменты скорости страницы, которые мы рассмотрим:

• Статистика Google PageSpeed
• GTmetrix
• Тест скорости сайта Pingdom
• Веб-страницаТест

Есть и другие инструменты, но эти самые популярные, и мы будем придерживаться их.

Статистика Google PageSpeed

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

Если у вас есть неоптимизированные изображения или файлы ресурсов (JS или CSS), он сгенерирует zip-файл с их оптимизированными аналогами, которые вы можете заменить на своем сервере. Довольно аккуратно, правда? Мы рассмотрим оптимизацию изображений и кода позже, просто знайте, что Google PageSpeed ​​может помочь вам в этом.

В Google PageSpeed ​​Insights не так много подробной информации, как в других инструментах, но это хорошая отправная точка, которая охватывает все важные аспекты оптимизации скорости страницы. В нем перечислены шаги, которые улучшат ваш сайт в наибольшей степени.

Я запустил этот инструмент с URL-адресом нашего тестового сайта и получил 71 балл для настольных компьютеров и 67 для мобильных устройств, так что есть возможности для улучшения. В список возможных предложений по оптимизации входят:

• Включить сжатие (сжатие ресурсов с помощью gzip или deflate),
• оптимизировать изображения,
• сократить время отклика сервера,
• устранить код JavaScript и CSS, блокирующий рендеринг, в содержимом верхней части страницы,
• минимизировать JavaScript.

GTmetrix

Этот инструмент дает вам более подробную информацию о том, какие вещи оптимизированы, а какие нет. Каждая деталь оптимизации указана и оценена по шкале от 0 до 100. Список упорядочен по важности, поэтому, если вы будете следовать задачам сверху вниз и оптимизировать те, которые не набрали 100 %, вы окажетесь на правильном пути к максимально быстрому ускорению сайта WordPress.

Используя инструменты тестирования PageSpeed ​​и YSlow, GTmetrix генерирует оценки для вашей страницы и отображает задачи, которые необходимо улучшить. Приятной особенностью этого инструмента также является отчет Waterfall, который будет графически отображать, как загружается ваш сайт, и вы сможете быстрее обнаружить узкие места. На изображении ниже вы можете видеть, что моему медленному виртуальному хостингу потребовалось 1,13 секунды, чтобы ответить первой информацией. Это слишком долго, но мы сможем это исправить.

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

Я запустил инструмент GTmetrix (расположение: Ванкувер, Канада) на нашем тестовом сайте и получил оценку PageSpeed ​​77 и оценку YSlow 71. С помощью этого инструмента мы также получаем следующую полезную информацию:

• Время полной загрузки: 3,1 с,
• Общий размер страницы: 803 КБ
• Запросов: 54

Мне больше всего нравится инструмент GTmetrix, так как вы получаете много актуальной информации в одном месте. В этом руководстве мы будем в основном использовать инструмент GTmetrix для измерения прогресса оптимизации.

Тест скорости сайта Pingdom

Pingdom — еще один инструмент, который немного по-другому отображает информацию об оптимизации. Вы получаете те же основные сводные данные, что и в инструменте GTmetrix (без оценки YSlow). С Pingdom у вас есть возможность проверить скорость страницы в 4 разных местах. Все результаты разные для каждого местоположения, что показывает, что расположение сервера важно, но мы также сможем улучшить это (с CDN позже в статье). Мы будем использовать инструмент Pingdom для проверки времени загрузки страницы в 4 доступных местах, поскольку тесты Pingdom выполняются быстрее.

Pingdom также отображает некоторые интересные таблицы, такие как размер контента или количество запросов, отфильтрованные по типу контента или по домену, а также имеет каскадный отчет.

Веб-страницаТест

Инструмент WebPageTest имеет еще больше параметров конфигурации, чем предыдущие инструменты. У него больше мест на выбор, можно выбрать скорость интернета, вы можете включить / отключить несколько параметров браузера и протестировать определенные устройства.

Это хороший инструмент, который отображает подробный каскадный отчет для каждого запуска (по умолчанию он делает 3 запуска, но вы можете изменить это в настройках) и отображает оценку от A до F для каждого из этих факторов оптимизации скорости:

• Время первого байта (время отклика),
• поддержка активности включена,
• сжать передачу (gzip),
• сжимать изображения,
• кешировать статический контент,
• эффективное использование CDN.

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

Я запустил этот инструмент для нашего тестового сайта. Вы можете увидеть результаты на скриншоте ниже:

Мы рассмотрели наиболее популярные инструменты скорости страницы и провели начальные тесты скорости страницы, так что теперь мы, наконец, готовы приступить к оптимизации нашего сайта WordPress. Для справки, это исходные результаты инструментов скорости страницы, которые мы будем использовать для измерения нашего прогресса в оптимизации скорости:

• Статистика Google PageSpeed
  • Мобильный: 67
  • Рабочий стол: 71
• GTmetrix
  • Скорость страницы: 77
  • YSlow: 71

Оптимизация изображения

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

Загрузка больших неоптимизированных изображений, используемых в небольшом месте на вашем веб-сайте, — это большое «нет-нет». Пример: у вас есть место для изображения размером не более 600 x 400 пикселей на вашем сайте, и вы загружаете изображение размером 1920 x 1080 пикселей (или даже больше!). Теперь вы повторите эту ошибку пару раз, и ваш сайт будет работать очень медленно.

Первое, что нужно сделать, это изменить размер изображения до нужного размера. В нашем примере слот изображения никогда не будет больше 600 x 400 пикселей, поэтому мы должны изменить размер изображения до этого размера.

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

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

Мини-руководство по оптимизации изображений

Выберите правильный формат изображения — наиболее популярными форматами изображений для использования в Интернете являются JPEG и PNG. Вы можете значительно сэкономить на размере файла изображения, выбрав правильный формат изображения (Марко в своей статье сэкономил 45%). Вы должны использовать:

• Формат .jpg для фотографий, изображений с градиентами и изображений с миллионами цветов.
• Формат .png для изображений с ограниченным количеством цветов (логотипов) и изображений с прозрачностью.

Измените размер изображений . Как я уже упоминал выше, вы всегда должны изменять размер изображений перед их загрузкой на свой сайт WordPress. Во-первых, проверьте, насколько велико пространство, в котором вы будете использовать изображение, и соответствующим образом измените его размер. Вы можете изменить размер изображений с помощью программы обработки изображений, такой как GIMP или Photoshop.

Сжимайте изображения — это можно сделать с помощью онлайн-инструмента сжатия изображений или с помощью плагина WordPress:

Онлайн-инструмент сжатия : Марко рекомендует онлайн-инструмент Optimizilla. Просто загрузите свои изображения в приложение Optimizilla, и после завершения процесса загрузите оптимизированные изображения, которые затем следует загрузить на свой сайт WordPress. Это звучит немного утомительно, поэтому, конечно, есть плагин WordPress, который может упростить этот процесс.

Плагин для сжатия изображений WP : снова Марко протестировал самые популярные плагины для сжатия изображений и объявил победителем: Оптимизатор изображений ShortPixel. После установки плагина вам нужно будет запросить ключ API, чтобы использовать плагин (очень простой процесс). Настройки плагина по умолчанию великолепны, поэтому вам не нужно ничего настраивать, просто перейдите в Media -> Bulk ShortPixel и нажмите кнопку «Начать оптимизацию». Любое новое загруженное изображение также будет оптимизировано. Примечание: бесплатная версия этого плагина позволяет оптимизировать только 100 изображений в месяц, если вам нужно больше, вам придется переключиться на их платный план. Мы хотим, чтобы наши клиенты имели доступ к лучшим инструментам, поэтому мы сотрудничаем с ShortPixel, и теперь члены нашего ProteusClub также получают 1000 кредитов бесплатно для использования с плагином ShortPixel WordPress.

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

Google PageSpeed ​​оптимизированные изображения

Это альтернативный способ оптимизации существующих изображений на вашем сайте WordPress. Если вы выполнили действия, описанные выше в разделе «Мини-руководство по оптимизации изображений», то вы, вероятно, уже оптимизировали изображения, и поэтому у Google PageSpeed ​​не будет для вас изображений. Молодец! Вы все еще можете прочитать этот раздел в информационных целях

Я упоминал во введении к инструменту Google PageSpeed, что Google создает zip-файл с оптимизированными файлами, которые вы можете использовать на своем сайте. Вы можете скачать zip-файл, нажав на эту ссылку:

В этом zip-файле у вас есть папка image с оптимизированными изображениями. Вы можете загрузить их через FTP или загрузчик файлов вашего хостинга. Замените/перезапишите изображения в правильных папках для загрузки (…/wp-content/uploads/…). После этого вы также должны создать уменьшенные версии (миниатюры) этих изображений на своем сайте WordPress. Вы можете сделать это с помощью плагина Regenerate Thumbnails.

Другие улучшения изображения

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

Ленивая загрузка изображений

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

Ленивая загрузка может быть реализована с помощью специального кода или плагина WP. Позже мы будем использовать плагин кэширования WP Rocket, который также имеет функцию отложенной загрузки.

Хотлинкинг изображений

Что такое хотлинкинг? Он отображает изображение, размещенное на другом сервере. Например, если у вас есть очень популярный пост и в этом посте у вас красивое изображение. Посетитель (вор) может скопировать исходный URL-адрес изображения и использовать его на своем сайте. Это означает, что изображение будет запрошено и предоставлено с вашего сервера. Умножьте вора на 100, и вы получите тысячи внешних запросов, на которые должен отвечать ваш сервер, что может замедлить работу вашего сервера.

Это не прямая оптимизация скорости страницы, а оптимизация сервера. Вы можете решить проблему хотлинкинга с помощью некоторого кода в файле .htaccess. Вы можете сделать еще один шаг (быть немного злым) и заменить украденное изображение другим, может быть, не таким красивым изображением :). Это также можно сделать в файле .htaccess. Откройте файл .htaccess на своем сервере и добавьте в него этот код. Замените your-website.com своим доменом, google.com любым другим доменом, которому вы хотите разрешить доступ к своим изображениям, и замените http://replacing-stolen-image-url-goes-here.jpg с URL-адресом изображения, которое вы хотите отображать для любых украденных изображений.

 RewriteEngine on RewriteCond %{HTTP_REFERER} !^$ RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?your-website.com [NC] RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?google.com [NC] RewriteRule \.(jpg|jpeg|png|gif)$ http://replacing-stolen-image-url-goes-here.jpg [NC,R,L]

Если вы не хотите заменять украденное изображение своим собственным изображением, используйте этот код. Это отключит изображение на их сайте:

 RewriteEngine on RewriteCond %{HTTP_REFERER} !^$ RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?your-website.com [NC] RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?google.com [NC] RewriteRule \.(jpg|jpeg|png|gif)$ - [NC,F,L]

Улучшения тематического исследования

Давайте посмотрим на прогресс, которого мы добились на нашем тестовом сайте после оптимизации изображений. Как вы знаете, я импортировал демо-данные для нашей медицинской темы, которую мы используем в качестве тестовой площадки. В этих демонстрационных изображениях использовались правильные форматы файлов, и они уже имели правильный размер, поэтому я мог пропустить эти два шага. Если бы мне нужно было загрузить новое изображение, я бы не пропустил их!

Итак, я установил плагин ShortPixel и запустил массовый оптимизатор. Плагин сообщил, что средняя оптимизация изображения составила 38%. Замечательно!

Я запустил инструмент PageSpeed ​​Insights, и Google указал, что некоторые изображения могут быть сжаты еще больше, поэтому я последовал своему собственному совету, использовал изображения, подготовленные для меня Google, и загрузил их на свой сервер через FTP.

После того, как изображения были отсортированы, результаты инструментов скорости страницы были следующими:

• Статистика Google PageSpeed
  • Мобильный: 72
  • Рабочий стол: 77
• GTmetrix
  • Скорость страницы: 81
  • YSlow: 71

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

Кэширование браузера

Когда пользователь посещает ваш сайт через браузер, он должен загрузить все ресурсы (HTML, изображения, JS, CSS, …) с вашего сервера, чтобы отобразить сайт для посетителя. Когда тот же пользователь посещает другую страницу вашего сайта, файлы CSS и JS обычно остаются прежними, но браузер может снова загрузить их с вашего сервера, если у вас нет правильной конфигурации сервера.

На вашем сервере должны быть установлены правильные заголовки кэширования и даты истечения срока действия, чтобы статические ресурсы (JS, CSS и другие файлы) могли храниться в кеше браузера. This greatly improves the performance for returning visitors or for visitors who look at more than one page on your site.

Usually, the hosting servers have that already configured. If the page speed optimization tools report that you are missing the “Leverage browser caching” optimization or something like that, then it's best to contact your hosting company and let them know that you want to set-up browser caching for your site. They will be able to sort that out for you or at least point you to the right direction on how to do that yourself.

If you want to do things yourself, then you have to know that these browser caching settings vary, depending on the server type your hosting company is using. A good starting point for Apache servers is the .htaccess file of the HTML5 Boilerplate project (check out the “Expires headers” section). An nginx configuration is available as well.

My shared hosting account has browser caching already configured, so there is nothing for us to do on our test site.

Resource Compression (Gzip or Deflate)

Files sent from your server (HTML, JS, CSS, …) to your visitors can be compressed, so that they can be transferred faster, which improves your page speed. This can be done by enabling Gzip or Deflate compression on your server.

You can contact your hosting support and ask them, if they can enable resource compression for your site or you can configure it yourself, but be sure you know which server type your hosting is using. We can again look at the HTML5 Boilerplate project for some tips, they have default server configs for each of the major server types. For example, my hosting is using Apache server, so I found this compression config. I've copied the content of this config, I've located the .htaccess file for my WordPress site via the FTP (it's in the root of your WP installation) and I copied it at the end of the file.

I've re-run the page speed tools, after I've enabled the resource compression for my WordPress site and here are the results:

• Google PageSpeed Insights
  • Mobile: 83
  • Desktop: 90
• GTmetrix
  • PageSpeed: 96
  • YSlow: 82

As you can see, we've improved our scores by a fair amount and all we did, was enable the resource compression, which did not take a lot of time. By compressing resources, we change the total page size from 803KB to 476KB, which is awesome! We made another step towards an optimized site, so let's continue.

Remove unneeded JS or CSS files

If you are using plugins, which include JS or CSS files on all your pages and you actually are not using the plugin features on those pages, then it's best to remove them. This can be done with custom code in your child theme, but I would recommend that you use a plugin for that. It's much easier!

The plugin that will help us do that is WP Asset CleanUp. After you install and activate this plugin, go and edit your home page. Home pages are usually the “heavier” pages, so we will look at it for our example, but you can do that for other pages as well.

Under the page content editor, you will see a section called WP Asset CleanUp . This section will list all CSS and JS files that are included on your front page. Now, your job is to find out, which of these files are not needed on your WordPress front page.

For example, in our test site, we are using the Contact Form 7 plugin, but we are only using the contact form on our “Contact Us” page, so we can safely remove (unload) its CSS and JS files from our home page. I can do the same with WooCommerce assets, since we are not using them on our home page as well. You should look at each asset in the list and check, if you can unload it. Watch out for the files with the red exclamation icon, you should probably never unload these, since they are core WordPress files and they are needed for the site to work properly. This is how my home page Assets CleanUp settings looks like:

I was able to safely remove 11 assets, which will save 11 resource requests when a page loads and that will improve the page speed.

Re-run of page speed test tools showed, that Google PageSpeed Insights score did not change (because it also did not list this as a recommended optimization), but the GTmetrix score did improve:

• Google PageSpeed Insights
  • Mobile: 83
  • Desktop: 90
• GTmetrix
  • PageSpeed: 97
  • YSlow: 86

Our site also loads faster, it now needs 2.7 seconds to load the whole site (in the beginning it took 3.1 seconds). We are improving the WordPress site speed slowly but surely. Bear in mind, I'm using one of our WordPress themes for the test, which are built from the ground up to be performing out of the box. If you're using some other WordPress theme, where the author didn't put any efforts to optimize it for speed, your improved loading speed results will most probably be much greater at this point.

With removing unneeded JS and CSS files from our home page, we improved our scores, load time, number of request and the total page size as well. Молодец!

Render-blocking JavaScript and CSS in above-the-fold content

One of the optimizations that Google PageSpeed Insights suggests is also: “Eliminate render-blocking JavaScript and CSS in above-the-fold content”. This is a tricky one. Remember when I said, that it's not good to chase a perfect score in the page speed tools? This is one of the reasons for that.

If we look at our example, the Google tool suggests that the Page Builder front-flex.css should be deferred or loaded asynchronously. We are using the Page Builder by SiteOrigin plugin for building content in our pages. So, if this file is responsible for making our layout of the page look good, then I might not respect Google suggestion and simply ignore it.

“But why would you disrespect Google? How dare you!” Well, this is only a tool and it gives you suggestions on what to do, but it does not know, if implementing some of these changes will break your site or ruin good user experience (UX) for your visitors. For example, if the tools had suggested that we load the style.css file with all the theme styles asynchronously, then it would have created the FOUC: Flash of unstyled content:

This is a bad UX, so I would ignore the suggestion from the tool and keep a good UX instead of improving our score. After all, Google is also using other factors it can gather from your website to rank it in the search results and user experience is one of them. When optimizing the website for speed, don't follow the recommendations blindly and forget about all the other aspects and goals your WordPress website has.

If the files that the tool suggests to be loaded asynchronously are valid candidates and they don't break anything, then of course we can implement that change. The best way is to just try to asynchronously load each suggested file and see, if the page still loads ok. Don't forget to reload the page without browser cache, so that a fresh copy of the page loads. You can do that by hard refreshing your site.

We will look at how to load files asynchronously in the WP Rocket plugin section below. There are other standalone plugins that offer this functionality, but since the WP Rocket has it build in, we don't need to pollute our WP installation with more plugins.

Server Side Caching

We've already talked about browser cache, but now we also have to take care of the server side cache. To understand server side caching we have to know the basics of how WordPress works, so let's look at that first.

When a visitor opens a WordPress page, the following things happen (basic explanation):

1. Server receives a page request.
2. WordPress PHP code begins to execute.
3. WordPress access the database to get the information it needs to build the requested page.
4. WordPress produces the HTML.
5. Server responds with the HTML for the browser to display it to the visitor.

These 5 steps have to be repeated for each page view, for each visitor. That's a lot of repetitive work for content that stays the same for each visitor (if your site is displaying mostly static content, which majority of websites is).

Server side caching eliminates pretty much all the server's hard work. It removes the need for repeating steps 2,3 and 4. So, when we enable server side caching, the process of a page request looks like this:

1. Server receives a page request.
2. Server retrieves the page HTML from the cache (if a cached version is available).
3. Server responds with the HTML for the browser to display it to the visitor.

As you can see, the hard work of running the WordPress code and accessing the database is bypassed, which means that the page loading time should be much faster.

If we look at the Google PageSpeed Insights tool suggestions, we will spot the “Reduce server response time” task. The tool says that our server responded in 0.98 seconds, which is not good. The slow shared hosting I'm using is definitely to blame for some chunk of that 1 second response time, but we'll be able to shorten it with server side caching.

Each page cache is usually saved with an expiration time of 24 hours, but that setting can be changed. This means that instead of thousands of page requests running the whole WordPress HTML building process, it will only be run once a day, to generate that cached page and the server will serve that cached page to other visitors. So, not only the page will be quicker, but the server will also have to do less work.

If you are updating a page in WordPress and an old cached version of the page is still available on your server, then you would have to clear that cache manually (usually with the click of a button) or some tools would do that for you automatically.

Some hosting companies already have a server side caching in place for their users, but this feature is usually available for managed WordPress hosting packages. So, before you follow instructions below, on how to setup server side caching, you should make sure that your server is not doing that for you already.

We will look at how to setup the WP Rocket plugin to enable server side caching and other features that it has (like lazy loading images, loading assets asynchronously, minification of JS and CSS files and much more). WP Rocket is a premium (paid) plugin, but I believe it's worth the investment. If you don't agree with me, that's fine WP Super Cache is a good free alternative, but it does not have the same extra features as WP Rocket and it's a little bit more cumbersome to setup.

WP Rocket (server side caching plugin)

As soon as we install and activate the WP Rocket plugin it will have some basic features enabled out of the box:

• Caching of all the pages for quick viewing.
• Decrease bandwidth usage with our GZIP compression.
• Management of the headers (expires, etags…).

The WP Rocket plugin default settings are a good starting point.

I've run the page speed tools a couple of times, so that they picked up the cached version of the site and these are the new results:

• Google page speed insights
  • Mobile: 91
  • Desktop: 97
• GTmetrix
  • PageSpeed: 97
  • YSlow: 87

The Google PageSpeed Insights tool no longer displays the “Reduce server response time” optimization suggestion, because we reduced it from 1 second to 121ms, that's a 88% improvement in server response time, just by activating the WP Rocket plugin! With this improvement, our fully loaded time is now 1.9 seconds, but we are not stopping here

Давайте посмотрим на настройки, которые может предложить плагин WP Rocket. WP Rocket имеет удобное контекстное меню в верхней строке меню администратора WP. Оттуда вы можете получить доступ к странице настроек, очистить кеш и получить доступ к другой полезной информации об этом плагине.

Прежде чем мы продолжим и попробуем различные настройки WP Rocket, я хотел бы отметить, что после каждого внесенного вами изменения вы должны подтвердить свой сайт на вкладке инкогнито/приватного браузера . Если вы вошли на свой сайт WordPress, то вы не увидите кешированную версию сайта. Во вкладке браузера в режиме инкогнито вы не войдете в систему и получите кешированную версию сайта, чтобы вы могли проверить, работает ли он нормально.

Также знайте, что включение каждой настройки WP Rocket может иметь разные результаты или даже негативно повлиять на скорость вашего WordPress, в зависимости от того, какую тему или плагины вы используете, поэтому простое включение всех настроек WP Rocket — не выход. Вы должны попробовать каждую настройку и измерить ее с помощью инструментов скорости страницы, чтобы увидеть разницу. Как вы увидите, некоторые методы не улучшат скорость нашей страницы, поэтому мы не будем их использовать.

Очистить кэш

Кэширование на стороне сервера начнет работать, как только вы активируете плагин WP Rocket, поэтому давайте посмотрим, как мы можем его очистить. Вы можете очистить кеш вручную, если щелкнете пункт меню «Очистить кеш» в контекстном меню WP Rocket. Плагин также позаботится об автоматической очистке кеша, когда вы обновляете настройки настройщика, изменяете/обновляете виджеты, категории и т. д., и частично очищает кеш при обновлении страницы. Для получения дополнительной информации о том, когда произойдет автоматическая очистка кеша, обратитесь к этому вопросу WP Rocket.

Кэш имеет срок жизни, который можно установить на вкладке «Основные» в настройках WP Rocket. Я предлагаю установить это значение на 1 день.

Кэш предварительной загрузки

Приятной функцией WP Rocket является «Предварительная загрузка кеша», которая предварительно загружает кеш вашей домашней страницы и страниц, на которые она ссылается, поэтому ваши пользователи всегда будут получать кешированную версию страницы. Я мог бы использовать эту функцию до запуска инструментов скорости страницы, и мне не пришлось бы запускать инструменты несколько раз, чтобы получить результаты кэшированной версии.

Доступ к настройкам кэша предварительной загрузки можно получить на странице настроек на вкладке «Предварительная загрузка». Ищите опцию «Предварительная загрузка бота», там вы найдете ручную и автоматическую опции. Если вы включите опцию автоматического бота, кеш предварительной загрузки будет запускаться каждый раз, когда вы обновляете или создаете страницу, или по истечении срока действия кеша. Этот параметр может повлиять на производительность вашего сервера, поэтому следите за журналами производительности, если вы его включаете. Если вы обновляете и создаете много постов/страниц и у вас есть виртуальный хостинг, я бы посоветовал вам не включать эту опцию. Вместо этого вы должны включить только опцию ручного бота, которая создаст еще один пункт контекстного меню WP Rocket под названием «Предварительная загрузка кеша», и он будет предварительно загружать кеш только при нажатии на него (после того, как вы закончите редактирование сообщений и страниц).

На вкладке настроек «Предварительная загрузка» вы также найдете настройки для предварительной загрузки кеша из карты сайта, поэтому вы можете определить карту сайта, и она будет использовать URL-адреса в карте сайта для предварительной загрузки кеша для этих страниц.

Ленивая загрузка

Я уже объяснял отложенную загрузку изображений в разделе оптимизации изображений этой статьи, но теперь, когда у нас установлен WP Rocket, мы можем включить эту функцию. Перейдите на вкладку «Основные» в настройках WP Rocket и включите LazyLoad для изображений, и если вы используете какие-либо видео или фреймы, вы также можете включить это.

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

Уменьшить файлы

Некоторые из предложений GTMetrix, которые мы все еще можем улучшить, заключаются в минимизации файлов HTML, CSS и JS. Поскольку наша тема WordPress и большинство рекомендуемых плагинов уже используют мини-версии для файлов JS/CSS, а на нашем сервере включен Gzip, эта оптимизация WP Rocket не принесет каких-либо существенных улучшений для нашего тестового сайта, но ваш случай может быть разные. Перейдите на вкладку «Статические файлы» в настройках WP Rocket и отметьте все 3 параметра в разделе « Минифицировать файлы ». Сохраните настройки и проверьте свой веб-сайт на вкладке инкогнито/приватной, чтобы вы могли найти любые проблемы, которые эти параметры могут вызвать на вашем сайте. На моем тестовом сайте WordPress минимизация CSS нарушила очередь файла flexbox css компоновщика страниц, поэтому мне пришлось отключить параметр минимизации файла CSS. Параметры HTML и JS работали нормально.

Я спросил поддержку WP Rocket, в чем может быть проблема, и они были достаточно любезны, чтобы отладить эту проблему на моем сайте. Проблема была вызвана кешем Varnish, используемым на моем виртуальном хостинге. Они предложили изменить конфигурацию Varnish на моем хостинг-сервере. Я связался со службой поддержки хостинга и, как я подозревал, не могу изменить конфигурацию Varnish на моем виртуальном хостинге, но я смогу это сделать, если перейду на пакет хостинга VPS. Как видите, использование виртуального хостинга — не лучшая идея.

Если у вас возникли проблемы с минимизацией CSS или JS, вы можете добавить URL-адрес файла, который вызывал проблемы, в поле исключенных файлов JS или CSS. Поиск файла, ответственного за проблемы, может быть сложным, но обычно вы знаете, какая функциональность не работает и какой плагин отвечает за эту функциональность, поэтому вы проверяете исходный код своей страницы и проверяете файлы, включенные этим плагином. Если плагин имеет несколько файлов JS или CSS, вы можете просто попробовать добавить их в список исключений и посмотреть, исчезнет ли проблема.

Объедините файлы JS и CSS

Вкладка YSlow в инструменте GTmetrix говорит нам «Делать меньше HTTP-запросов». В нем говорится, что наш WordPress использует 9 внешних JS-скриптов, и что мы должны попытаться объединить их в 1, и что страница использует 4 внешних файла CSS, и мы также должны попытаться объединить их в 1 файл. Если вы помните, мы уже удалили ненужные файлы JS и CSS в разделе Удаление ненужных файлов JS или CSS этой статьи.

Объединение всех файлов JS и CSS в один файл — не лучшая идея, потому что браузеры могут загружать 6 файлов меньшего размера параллельно, быстрее, чем 1-2 больших файла. Другая причина заключается в том, что некоторые файлы включены в заголовок HTML-документа, а другие — в конец документа, поэтому вам нужно разделить их как минимум на 2 файла.

Чтобы объединить файлы с WP Rocket, перейдите на вкладку «Статические файлы» в настройках плагина и включите параметры в разделе « Объединить файлы ». Как всегда, подтвердите свой сайт на вкладке инкогнито/приватного браузера, чтобы проверить наличие проблем.

В нашем примере у WP Rocket снова возникли проблемы из-за упомянутой выше проблемы с настройкой общего хостинга Varnish, поэтому мне пришлось отключить опцию объединения файлов JS.

Опять же, если у вас возникли проблемы с конкатенацией CSS или JS, вы можете добавить URL-адрес файла, который вызывал проблемы, в поле исключенных файлов JS или CSS, как на шаге минификации выше.

Удалить строки запроса из статических ресурсов

GTMetrix рекомендует удалять строки запросов из статических ресурсов, поскольку некоторые прокси-серверы не кэшируют ресурсы со строками запросов.

Строки запроса в статическом ресурсе (обычно файле JS или CSS) — это атрибут URL, который отмечает версию указанного файла. Это выглядит так: ?ver=2.5.8 и добавляется в конце URL-адреса: http://domain.com/css/front-flex.css?ver=2.5.8 .

Мы можем легко удалить эти строки запроса с помощью WP Rocket. Перейдите на вкладку «Статические файлы» в настройках плагина и включите параметр « Удалить строки запроса ».

После включения этой опции наш показатель GTmetrix PageSpeed ​​изменился на 98, но время загрузки страницы не изменилось.

Блокирующий рендеринг CSS/JS

Единственное оставшееся предложение инструмента Google PageSpeed ​​Insights — «Устранить блоки JavaScript и CSS, блокирующие рендеринг, в содержимом верхней части страницы». Это означает, что некоторые файлы JS или CSS блокируют загрузку страницы в содержимом верхней части страницы. Инструмент хочет, чтобы мы откладывали или асинхронно загружали эти блокирующие ресурсы.

И снова на помощь приходит плагин WP Rocket. Перейдите на вкладку «Статические файлы» и найдите параметры CSS/JS, блокирующие рендеринг . Там вы можете включить параметры JS и CSS, которые могут решить эту проблему. После включения параметра JS появится параметр Безопасный режим (рекомендуется) . Этот безопасный режим загрузит библиотеку jQuery (по умолчанию поставленная в очередь библиотека WP) в заголовке страницы, оставив ее в качестве блокирующего файла, но не нарушит работу страниц со встроенным кодом jQuery на странице. Поскольку jQuery все еще загружается в голову, инструмент PageSpeed ​​​​по-прежнему жалуется, что у нас есть JS-файл, блокирующий рендеринг.

Итак, если я отключу безопасный режим для нашего тестового сайта, инструмент Google PageSpeed ​​даст нам высший балл: 100 на мобильных устройствах и 100 на настольных компьютерах. Отлично, правда? Не совсем! Наш сайт по-прежнему работает нормально, но давайте посмотрим, как он загружается:

Вспышку нестилизованного контента (FOUC) можно исправить, используя параметр CSS Critical path в настройках WP Rocket (чуть ниже параметра CSS/JS, блокирующего рендеринг). Теория заключается в том, что вы можете добавить код CSS, необходимый для верхней части страницы, чтобы этот эффект вспышки нестилизованного текста не появлялся при загрузке страницы. Это сложнее, чем кажется. Есть инструменты, которые должны генерировать для вас этот критический CSS, но у меня не было большого успеха с ними.

Чтобы сгенерировать код CSS критического пути:

1. Отключите плагин WP Rocket на своем сайте.
2. Перейдите к инструменту Генератор CSS критического пути.
3. Введите URL вашего сайта и запустите его.
4. Скопируйте код CSS критического пути.
5. Активируйте плагин WP Rocket.
6. Вставьте код CSS в поле «Critical path CSS» в настройках WP Rocket.
7. Проверьте, есть ли какие-либо относительные пути URL-адресов в критическом коде CSS, и измените их на абсолютные пути.

Вот как сейчас выглядит загрузка нашего тестового сайта WordPress:

Стало лучше, но мне все равно не нравится. Да, оценка Google PageSpeed ​​100/100 — это здорово, но общее время загрузки медленнее, и у нас также есть еще 2 запроса, потому что мы включили эту опцию блокировки рендеринга CSS/JS. Основной проблемой для меня по-прежнему является пользовательский опыт загрузки страницы, поэтому я отключил эту опцию WP Rocket.

WP Rocket, безусловно, является плагином, который должен использовать каждый владелец веб-сайта WordPress, поскольку он обладает всеми функциями для ускорения вашего сайта. Просто активация плагина даст вам огромный импульс. Другие функции должны быть протестированы для каждого веб-сайта, поскольку каждая тема и плагин могут создавать свои проблемы.

Мы почти в конце наших шагов по оптимизации. Осталось только использовать CDN для активов нашего веб-сайта.

Сеть доставки контента (CDN)

Я уже несколько раз упоминал в этой статье, что время загрузки страниц различается в зависимости от местоположения сервера и местоположения посетителя. Например, мой виртуальный хостинг-сервер, который мы используем для тестирования, расположен в Остине, штат Техас (США), и в начале этой статьи, посвященной инструменту скорости страницы Pingdom, мы протестировали 4 местоположения. Вот результаты:

• Даллас, Техас (США) = 1,65 с.
• Сан-Хосе, Калифорния (США) = 2,53 с.
• Стокгольм, Швеция (ЕС) = 3,06 с.
• Мельбурн (Австралия) = 5,38 с.

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

• Даллас, Техас (США) = 0,63 с.
• Сан-Хосе, Калифорния (США) = 0,76 с.
• Стокгольм, Швеция (ЕС) = 1,21 с.
• Мельбурн (Австралия) = 2,24 с.

Мы будем использовать это время для сравнения времени загрузки нашего WordPress, когда мы настроим наш сайт для использования CDN.

Мы видим, что эти времена очень разные; это связано с тем, что данные должны пройти более длинный путь от нашего сервера до посетителя из Австралии, чем до посетителя в Далласе. Именно здесь CDN поможет нам сократить время загрузки.

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

Использование WordPress CDN имеет множество преимуществ, в том числе:

• Уменьшение задержки, которая представляет собой время и/или задержку, которую должно пройти расстояние.
• Сокращает время до первого байта (TTFB), которое является мерой того, как долго браузер должен ждать, прежде чем получит свой первый байт данных с сервера.
• Выдает контент из кеша для более быстрой загрузки страниц и меньшей нагрузки на ваш хостинг (исходный) сервер.
• Использует HTTP/2 по защищенным соединениям, чтобы воспользоваться преимуществами мультиплексирования, параллелизма, передачи на сервер и сжатия HPACK.
• Сжимает данные с помощью GZIP или Brotli, чтобы уменьшить размер файлов HTML, таблиц стилей и JavaScript.

В наши дни CDN предлагают множество других функций, особенно в отделе безопасности. Обычно они предлагают защиту от DDoS, обнаружение/предотвращение ботов и так далее.

Мы рассмотрим одну из самых популярных CDN под названием Cloudflare. Они предлагают бесплатный пакет, который включает в себя использование их глобального CDN, и это то, что нам нужно.

Облачная вспышка

Сначала зайдите на cloudflare.com и зарегистрируйте новую бесплатную учетную запись. После создания учетной записи вам нужно будет настроить свой веб-сайт на Cloudflare, чтобы он мог обслуживать ваш статический контент (активы).

Когда вы войдете в свою новую учетную запись Cloudflare, вам будет предложено добавить свой веб-сайт (домен), чтобы автоматически получать записи DNS.

Введите свой домен и нажмите «Начать сканирование». Несмотря на то, что я использую поддомен ( speed.gregorcapuder.com ), мне нужно было ввести только корневой домен: gregorcapuder.com . Сканирование заняло около минуты, а пока вы можете посмотреть короткое видео, которое объяснит, что происходит. После завершения сканирования вы можете нажать кнопку «Продолжить».

На следующем шаге вы увидите все записи DNS, которые Cloudflare смог найти для нашего домена. Здесь вы должны добавить любые записи, которые могут отсутствовать, поэтому просмотрите список и проверьте, не пропало ли что-то. В нашем примере отсутствовал поддомен скорости, поэтому я добавил его в список. В поле ввода имени я ввел «скорость» (имя моего субдомена), в адресе IPv4 я ввел тот же IP-адрес, что и мой основной домен (gregorcapuder.com), а затем нажал «Добавить запись». Как вы можете видеть на снимке экрана ниже, я включил Cloudflare для своего основного домена, а также для поддомена скорости (отмечен оранжевым облаком со стрелкой, бегущей за облаком). Это означает, что на этих двух веб-сайтах трафик будет обрабатываться и защищаться Cloudflare.

Когда вы закончите с записями DNS, вы можете перейти к следующему шагу, где вы выбираете план «Бесплатный веб-сайт» и продолжаете.

Последний шаг, чтобы включить Cloudflare для вашего веб-сайта, — это войти в панель управления вашего регистратора домена (где вы купили свой домен) и изменить серверы имен для вашего домена. Заявлено, что новые серверы имен вступят в силу в течение 48 часов, но в моем случае они были обновлены за 1 час. При этом простоев сайта не будет, так что не беспокойтесь.

Как только серверы имен будут обновлены для вашего сайта, вы увидите, что статус вашего сайта Cloudflare изменится на «активный».

Я оставил все настройки Cloudflare на панели инструментов по умолчанию, единственное, что я изменил, — это уровень безопасности. Перейдите на вкладку «Брандмауэр» и установите «Уровень безопасности» на « Низкий ». Это потому, что я не хочу, чтобы мои посетители получали «страницу вызова» при обнаружении ложного злоумышленника.

Теперь, когда мы настроили сторону Cloudflare, мы также должны включить настройки Cloudflare в нашем плагине WP Rocket.

Войдите в панель администратора WordPress и перейдите в настройки плагина WP Rocket. Перейдите на вкладку «CDN», включите вкладку « Показать настройки Cloudflare» и сохраните настройки. Это покажет новую вкладку «Cloudflare» в настройках WP Rocket, и вы должны открыть ее. Там вы должны ввести адрес электронной почты учетной записи Cloudflare, домен, а также скопировать и вставить глобальный ключ API Cloudflare. Чтобы получить глобальный ключ API, перейдите на панель инструментов Cloudflare (вкладка «Обзор») и нажмите ссылку «Получить ключ API». Вы увидите раздел «Ключ API» на этой новой странице, и вам следует нажать кнопку «Просмотреть ключ API» для строки «Глобальный ключ API». После того, как вы вставите глобальный ключ API в настройки WP Rocket, я также предлагаю включить опцию «Оптимальные настройки» в WP Rocket. Сохраните настройки, а затем нажмите кнопку «Очистить кеш Cloudflare», просто чтобы убедиться, что все работает нормально.

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

• Даллас, Техас (США) = 0,54 с.
• Сан-Хосе, Калифорния (США) = 0,70 с.
• Стокгольм, Швеция (ЕС) = 0,91 с.
• Мельбурн (Австралия) = 1,16 с

Как и ожидалось, больше всего улучшилось время загрузки в Европе и Австралии. И все наше время загрузки составляет около 1 секунды или меньше. Это отличное время загрузки!

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

Окончательные результаты

Наши окончательные оценки инструмента скорости страницы:

• Статистика Google PageSpeed
  • Мобильный: 91
  • Рабочий стол: 97

• GTmetrix
  • Скорость страницы: 98
  • YSlow: 91

Вот скриншоты:

Давайте сравним данные GTmetrix до и после нашей оптимизации:

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

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

Вывод

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

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

Я пропустил какой-либо шаг по оптимизации веб-сайта, который, по вашему мнению, может привести к существенному сокращению времени загрузки страницы? Позвольте мне знать в комментариях ниже!

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