Плагины WordPress для ускорения сайта

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

Во-вторых, это важно, потому что люди говорят, что это важно. Когда вы собираетесь загрузить сайт, как долго вы способны ждать, пока не расстроитесь, вернетесь к результатам поиска и попробуете что-нибудь еще? Может казаться, что прошла вечность, например, 5-10 секунд, но вы ошибаетесь. Часто люди уходят с медленно загружающегося сайта уже через 2 секунды.

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

Что такое PageSpeed Insights?

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

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

PageSpeed Insights анализирует сайт и дает ему оценку по 100-балльной шкале. Рейтинг представляет собой смесь лучших практик веб-разработчиков, политик Google и технических ограничений. Оценка ниже 50 — это плохо; выше — лучше. Обычно все стремятся к чему-то выше 80.

Вот некоторые соображения, которые Google учтет, если ваш сайт нуждается в таких изменениях:

• Время ответа сервера. Чем дольше ваш хост-сервер отвечает на входящий пинг, тем ниже будет ваш рейтинг. Решение проблемы, как правило, заключается в переезде на другой сервер: некоторые дата-центры работают медленнее, чем другие, и общий хостинг работает медленнее, чем выделенный.
• Блокирующие рендеринг скрипты. Некоторые файлы JavaScript и CSS необходимо загрузить для завершения загрузки страницы. Как правило, решение состоит в том, чтобы применять эти стили или сценарии асинхронно, чтобы страница могла продолжать загрузку при одновременной загрузке сценариев.
• Кэширование браузера. Кэширование позволяет браузеру сохранять некоторые элементы страницы локально при загрузке страницы, поэтому, когда пользователь возвращается на страницу или переходит на другую страницу на сайте, ему не нужно повторно загружать файлы. Общие элементы, такие как общая таблица стилей или изображение логотипа, должны кэшироваться для увеличения скорости последующей загрузки.
• Оптимизация изображений. Плагин Smush может сжимать размер файлов изображения без видимой потери данных в них. Человеческий глаз не сможет увидеть разницу, но размер файлов будет уменьшен на 10-50%. Это позволит загружать их намного быстрее и сократить время загрузки.
• Редиректы. Если вы перенаправляете пользователя с одного URL на другой, такое перенаправление занимает много времени. Минимизация количества редиректов ускоряет загрузку.
• Общее сжатие файлов. Использование чего-то вроде сжатия GZip позволит вашему серверу сделать файлы намного меньше, поэтому они будут загружаться и распаковываться быстрее, чем несжатый файл.
• Минимизированный код. Минимизатор удалит лишнее форматирование и позиционирование из файлов HTML, CSS и скриптов, сделав их намного меньше. Помните, что один пробел может показаться вам ничем, но компьютер считывает его как «%20», поэтому пробел, который не требуется для рендера HTML, но помогает вам читать код, на самом деле просто делает размер файла больше, если речь идет о компьютере.

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

Решения от WordPress

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

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

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

Merge Minify Refresh

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

Этот плагин делает именно то, что обещает название.

• Часть 1 это слияние (merge). Любые файлы скриптов объединяются, если это возможно. То же самое касается CSS-файлов. Группы файлов для разных приложений сгруппированы вместе. Все, что загружается на страницу, группируется в один файл, все, что загружается независимо от страниц, группируется в другой, и так далее.
• Часть 2 состоит в том, чтобы затем минимизировать (minify) сгруппированные файлы. Удаление всех ненужных пробелов и символов, удаление комментариев — плагин делает все это. Он минимизирует CSS и замыкает JavaScript-файлы, чтобы сгенерировать новые, более маленькие файлы. Когда пользователь посещает вашу страницу, он загружает сжатые и уменьшенные файлы вместо всех отдельных скриптов.

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

Позвольте сказать, что этот плагин невероятно эффективен. На одном из сайтов, где мы его установили, время загрузки сократилось с почти двух секунд до половины секунды, сократив количество запросов с 80 до 30 — это снизило показатель отказов, что напрямую улучшило поисковой рейтинг. Все в одном плагине — совсем не плохо.

Optimus

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

Изображения переполнены ненужными данными. Некоторые из них — это метаданные, которые вам не нужны, когда вы делитесь ими в Интернете, например, оригинальный автор файла, данные EXIF фотографии и т. д. Если вы хотите сохранить все это в неприкосновенности, вы можете сделать это, но, как правило, это бесполезно вне сайта-портфолио фотографа.

Что еще более важно, изображения полны безумно мелких деталей, которые человеческий глаз не в состоянии видеть. Большинство из вас, вероятно, не помнят время, когда веб-изображения были ограничены 32 цветами, или когда было очень важно, чтобы монитор компьютера мог обрабатывать настройку «миллион цветов». В наши дни это норма для всего, от ПК до умных часов.

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

Дело в том, что вы можете рассмотреть кучу этих цветовых вариаций и никогда не увидеть разницу конечном изображении. Если два пикселя рядом друг с другом имеют небесно-голубой цвет, но один из них #87ceeb, а другой — # 87ceec, для невооруженного глаза они выглядят идентичными. Сомневаемся, что вы сможете увидеть разницу между ними, если они будут стоять рядом друг с другом, и вы будете видеть пограничную линию между ними.

Сжимание изображений с помощью такого плагина, как Optimus, удаляет много лишних данных. Он превратит этот ceec-пиксель в ceeb-пиксель, уменьшая объем данных в файле изображения, но оставляя само изображение функционально неизменным. Единственные функциональные данные, которые вы можете потерять, — это изображение, содержащее стеганографическое сообщение.

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

WP Super Cache

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

Одна из сильных сторон WordPress — насколько эта платформа модульна. Это вызвано ее способностью динамически генерировать страницы из составных частей. Недостатком этого является то, что не существует «страницы», которую можно загрузить и кэшировать. Именно здесь вступает в игру WP Super Cache.

WP Super Cache генерирует статические HTML-файлы из ваших динамических страниц WordPress. Эти HTML-файлы затем кэшируются локально на сервере, экономя время сервера, необходимое для создания страницы «на лету».

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

Leverage Browser Caching

Leverage Browser Caching просто отдает приоритет кешированию браузера и устанавливает более длительное время хранения кэшированных файлов.

Scripts to Footer

Ленивая загрузка — это процесс сообщения определенным файлам, обычно скриптам, о том, что они могут загружаться позже, когда они действительно нужны пользователю. Это позволяет избегать «ожидания рендеринга скриптов» в PageSpeed Insights. Если остальная часть сайта продолжает загружаться до скриптов, он не дожидается их и, следовательно, загружается быстрее. Поместить сценарии в футер — простой способ добиться этого.

Плагин Scripts to Footer просто помещает любые ненужные скрипты в футер вашего сайта. Основные элементы, такие как CSS для дизайна сайта, загружаются наверху, но такие вещи, как аналитика, слайды или всплывающие окна о выходе загружаются позже.

Disqus Conditional Load

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

Disqus Conditional Load — это ленивая загрузка специально для системы комментариев Disqus. Плагин гарантирует, что скрипты раздутых комментариев загружаются позже, только когда пользователь прокручивает достаточно далеко, чтобы увидеть их. Это ускоряет время загрузки сайта за счет видимости страницы.

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