Как ускорить загрузку вашего сайта WordPress с помощью плагинов

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

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

Статистика PageSpeed

Google PageSpeed ​​Insights — это бесплатный онлайн-инструмент, который проверяет скорость загрузки любого веб-сайта, выявляет проблемы, расставляет приоритеты и дает рекомендации по их устранению.

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

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

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

Мой счет

Моя оценка ужасная 46 . Первое, на что следует обратить внимание, это то, что в результатах есть три разных раздела:

• Следует исправить (2 шт.)
• Рассмотрите возможность исправления (6 пунктов)
• Пройдено (2 предмета)

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

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

Следует исправить

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

• Включить сжатие
• Удалите JavaScript и CSS, блокирующие рендеринг, в содержимом верхней части страницы.

Включить сжатие

Моя самая важная проблема заключается в том, что я не использую сжатие. Это показывает, что я могу уменьшить размер передаваемого файла на 79%. Это можно сделать с помощью gzip или deflate.

Ускоритель оценки производительности WP

Этот бесплатный плагин имеет сжатие gzip и решит несколько других проблем, таких как проблемы с CSS и JavaScript, удалив строки запроса, добавив заголовок Variable: accept-encoding и установив кэширование с истекшим сроком действия. Я выбрал его, потому что у него 4,7/5 с более чем 10 000 активных установок. Он был разработан, чтобы ускорить загрузку страниц и улучшить тесты оценки страницы.

Это дало мне 78 баллов с сообщением о сокращении времени отклика сервера. Это во многом связано с моим планом хостинга. Я исправляю это, перемещая свой сайт на новый план хостинга. Это выходит за рамки данной статьи.

Одна из замечательных вещей в этом заключается в том, что это решило некоторые из основных проблем со следующей проблемой: устранение блокирующего рендеринг JavaScript и CSS в содержимом верхней части страницы. Теперь эта проблема перемещена в раздел "Рассмотрите исправление". Также полностью исправлено кэширование браузера Leverage. Теперь сайт проходит 4 правила, тогда как раньше он проходил только 2.

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

Странно то, что время отклика сервера увеличилось с 0,96 до 1,4. Уменьшение времени отклика сервера теперь было в разделе «Должен исправить». Это потребовало плагина кэширования.

Общий кэш W3

W3 Total Cache — безусловно, самый популярный плагин для ускорения работы сервера вашего сайта. У него почти миллион активных установок и рейтинг 4,4/5. Он оптимизирует ваш сайт за счет кэширования. Вы можете выбрать различные параметры кэширования по отдельности. К ним относятся страница, база данных, объект и браузер. Он будет кэшировать будущие заголовки с истекшим сроком действия и теги сущностей, каналы и результаты поиска. Он также имеет функции для минимизации ваших JS, CSS и HTML. Это ускорит ваш показатель Google PageSpeed ​​как минимум в 10 раз, когда он полностью настроен.

Я попробовал это со всеми включенными функциями кэширования. Это подняло мой счет до 86 . Впервые мой сайт теперь в зеленом, и все проблемы, которые у меня были, были в разделе «Рассмотреть исправление». Теперь он проходит 5 правил, включая время ответа сервера, которое теперь говорит «сервер ответил быстро».

Рассмотрим исправление

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

Первоначально проблемы включали:

• Используйте кеширование браузера
• Время ответа сервера
• Сократить JavaScript
• Оптимизация изображений
• Минимизировать CSS
• Сократить HTML

Вот посмотрите на текущие проблемы.

Устранение блокировки рендеринга Javascript и Css в содержимом верхней части страницы

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

Есть несколько способов исправить это:

• Отложить загрузку
• Загружать асинхронно
• Вставьте их прямо в HTML

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

Автооптимизация

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

Это также решит несколько проблем, таких как минимизация JS и CSS в списке ниже.

Сначала я просто включил базовые настройки для HTML, JS и CSS. Это подняло мой балл до 88 и уменьшило проблемы до 3 ресурсов CSS. Один был создан самим плагином, а два других — шрифтами Google. Теперь он проходит 7 правил. Это решило Minify CSS и Minify HTML.

Лучшая минимизация WordPress

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

Когда я установил его, все настройки макета для моей темы были удалены, и все мои меню, изображения, ссылки и т. Д. Появились в крайнем левом углу экрана. К счастью, форматирование вернулось, когда я его удалил. Возможно, что-то в настройках нужно было подправить. Я уверен, что это хороший плагин, потому что у него более 60 000 активных установок и рейтинг 4,4/5. Я включил это только как предупреждение о том, что без какой-либо настройки оно может работать не так, как вам нужно.

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

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

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

EWWW Оптимизатор изображений

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

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

WP Смуш

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

Бесплатная версия не стирает ничего размером более 1 МБ и стирает только 50 файлов за раз. Для этого вам понадобится WP Smush Pro, который будет сжимать изображения размером до 32 МБ без ограничений по количеству за раз. Он делает резервную копию оригиналов, если они вам нужны. Цены начинаются от 19 долларов в месяц.

У меня было 114 изображений, которые нужно было отшлифовать. 8 из этих изображений превышали 1 МБ. Решил исправить своими руками. Он сжал 98 изображений и уменьшил размер файла на 4,79 МБ (8,82%).

Это подняло мой счет до 90 . Google Insights выявил 5 изображений, которые ему не понравились, но ни одно из них не превышало 1 МБ. Они варьировались от 0,7 КБ до 17 КБ.

Оптимизация изображений вручную

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

Сократите JavaScript, CSS и HTML

Я думал, что исправил это…

Когда я работал над другими проблемами, я увидел, что единственное сообщение, которое нужно минимизировать, было для JavaScript. Как только я оптимизировал свои изображения, все три проблемы вернулись. Я вернулся назад, чтобы понять, что произошло.

Попробовав Better WordPress Minify, а затем отключив его, мои сообщения о минимизации CSS и HTML вернулись. Мой результат упал до 88, и теперь я вернулся к 5 пройденным правилам. Я включил функции минимизации W3 Total Cache, и теперь он решил все проблемы с минимизацией. Теперь у меня было 88 баллов, и я прошел 8 правил. Кроме того, в верхней части страницы было шесть файлов. Я знал, что решил некоторые из них, поэтому, должно быть, что-то изменил.

Я выполнил некоторые действия по устранению неполадок и обнаружил, что отключил автооптимизацию, когда ранее у меня возникла проблема с Better WordPress Minify. Я снова включил автооптимизацию, отключил минимизацию из W3 Total Cache и очистил кеш (очень важный шаг!). Теперь я вернул 90 баллов, и сайт прошел 8 правил. Вернулись к трем CSS-файлам в верхней части страницы и предложению оптимизировать изображения.

Основываясь на своем прошлом опыте, я решил не тратить время на эти файлы. Я думаю, что Google ненавидит изображения любого размера (независимо от того, насколько маленькими я их получаю, я все равно получаю сообщение об уменьшении размера), и перейти с PageScore от 46 до 90 — это победа в моей книге. Я научился останавливаться, пока ты впереди.

Финальный счет

Моя итоговая оценка была 90/100. Плагины, которые я использовал для получения этой оценки:

• Автооптимизация (все функции включены)
• W3 Total Cache (включены только функции кэширования страниц)
• WP Performance Score Booster (все функции включены)
• WP Smush (бесплатная версия)

Для справки, оценка для мобильных устройств увеличилась с 36 до 78. Чтобы исправить это, мне пришлось бы оптимизировать свои изображения и файлы для мобильных устройств.

Последние мысли

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

Я хотел бы услышать от вас. Вы оптимизировали свой веб-сайт WordPress с помощью Google PageSpeed ​​Insights? Был ли ваш опыт похож на мой? Вы использовали разные плагины для решения проблем? Я хотел бы услышать о вашем опыте в комментариях.