Ускорение WordPress: как мы оптимизировали производительность List25 на 256%

/

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

Вы, наверное, слышали, что скорость WordPress важна для SEO. У более быстрого сайта больше взаимодействия с пользователем, больше просмотров страниц и больше продаж. В ходе исследования странного цикла они обнаружили, что задержка в одну секунду может стоить вам 7% продаж, на 11% меньше просмотров страниц и на 16% снижения удовлетворенности клиентов.

Пример использования Strangeloop Speed

Так как же на самом деле ускорить WordPress?

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

Обзор

List25 - это развлекательный блог. У сайта более 1,5 миллиона подписчиков, а у канала YouTube более четверти МИЛЛИАРДА просмотров.

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

До того, как мы начали оптимизацию, наша домашняя страница загружалась 2,21 секунды, согласно Pingdom. После того, как мы закончили, время загрузки нашей страницы упало до 1,21 секунды (примерно на 45% быстрее).

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

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

Хостинг WordPress

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

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

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

Вы можете сразу увидеть улучшение времени отклика нашего сервера. Время отклика увеличилось с 442 мс до 172 мс. Это улучшение на 256%.

Время ответа сервера List25 после перехода на SiteGround

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

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

Если вы хотите сменить хост, обязательно попробуйте SiteGround.

Плагин кеширования

Когда дело доходит до ускорения WordPress, кеширование является вторым по важности фактором после вашего веб-хостинга.

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

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

Что такое кеш страницы?

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

Если вас нет на сайте, не волнуйтесь. Вы можете настроить кеш на своем сайте WordPress, используя одно из многих доступных решений, например W3 Total Cache или WP Super Cache.

Мы используем W3 Total Cache, который предоставляет несколько вариантов кэширования страниц, кэширования базы данных и кэширования объектов.

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

CDN

Сети доставки контента (CDN) могут помочь вам повысить скорость вашего сайта. Мы используем MaxCDN с самого начала List25, поэтому эта часть не изменилась.

Мы написали полную статью о том, что такое CDN и зачем он вам нужен, вместе с инфографикой.

Что такое CDN

CDN позволяет нам обслуживать все CSS, Javascript и изображения из сети доставки контента. Это работает путем определения местоположения посетителя сайта и предоставления контента с сервера, ближайшего к посетителю.

Если вы не хотите покупать премиальное решение CDN, вы можете использовать Cloudflare.

Объединение файлов для уменьшения количества HTTP-запросов

По мере того, как вы добавляете дополнительные плагины, они часто добавляют свои собственные файлы JavaScript и CSS. Каждый дополнительный файл - это новый HTTP-запрос.

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

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

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

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

Мы использовали спрайт изображения, который объединил несколько значков социальных сетей и сайтов в одно изображение:

List25 Sprite

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

  1. Загрузить изображение как фоновое изображение
  2. Определите ширину и высоту элемента, для которого нам нужен значок
  3. Установите положение фона для нашего изображения, чтобы загрузить необходимый значок

Например, чтобы загрузить значки социальных сетей на боковой панели, мы используем:

li.widget_social_icons ul li { float: left; width: 36px; height: 36px; margin: 0 10px 10px 0; padding: 0; background: url(../images/sprite.png) no-repeat; } li.widget_social_icons ul li.twitter { background-position: 0 -50px; } li.widget_social_icons ul li.facebook { background-position: -36px -50px; } li.widget_social_icons ul li.pinterest { background-position: -72px -50px; } li.widget_social_icons ul li.google { background-position: -108px -50px; } li.widget_social_icons ul li.rss { background-position: -144px -50px; } li.widget_social_icons ul li.youtube { background-position: -180px -50px; }

CSS-свойства background-position, width и height помогают нам настроить таргетинг на конкретную часть изображения, которую мы хотим вывести:

List25 Sprite, отредактированный

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

Объединив вместе JavaScript, CSS и изображения, мы значительно сократили количество запросов.

Минификация кода

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

Для List25 мы используем SCSS, таблицу стилей на основе синтаксиса (Введение в Sass). Это позволяет нам структурировать наши файлы CSS по нескольким направлениям разработки в удобном для чтения макете:

Список25 SCSS

Затем мы используем CodeKit для компиляции файлов SCSS в один файл CSS. CodeKit также удаляет пробелы и разрывы строк, чтобы файл был как можно меньше:

В результате мы смогли уменьшить размер вашего CSS-файла на 28%.

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

Мы оптимизировали наши изображения в двух областях: наша тема WordPress и загруженный контент.

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

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

Мы также рассказали всем нашим авторам о важности сохранения изображений, оптимизированных для Интернета. См. Наше руководство о том, как сохранять изображения, оптимизированные для Интернета.

Социальный шеринг без Javascript

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

Список25 кнопок социального обмена

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

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

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

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

Используя RUM (Real User Monitoring) от Pingdom, этот новый плагин общего доступа сократил «истинное» время загрузки страницы с 6 секунд до чуть более 2 секунд. Это также обеспечило сокращение количества запросов на сторонние скрипты.

Результат

Мы значительно улучшили скорость работы нашего сайта. Время загрузки увеличилось с 2,2 до 1,22 секунды.

6

Нам удалось значительно сократить время отклика нашего сервера.

Время ответа сервера List25 после перехода на SiteGround

Это помогло сократить время, затрачиваемое на загрузку страницы ботом Google, что повысило скорость сканирования.

Время, затраченное в Инструментах для веб-мастеров на сканирование страницы

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

List25 Показатель отказов

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

Заключение

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

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

Нужна помощь с WordPress? Свяжитесь сейчас
[email protected]

Это переведенная версия оригинальной статьи от wpbeginner, весь контент, изображения и авторство принадлежит автору

Как добавить обновления контента в WordPress и расширить свой список рассылки

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

Как отображать последние сообщения в WordPress

Вы хотите, чтобы ваши последние сообщения отображались в WordPress? Отображение недавних сообщений помогает пользователям легко находить ваш новый

Как создавать формы AMP в WordPress (простой способ)

Вы хотите создавать формы, удобные для AMP на своем сайте WordPress? Accelerated Mobile Pages или AMP - это проект Google, который ускоряет загрузку веб-сайтов на мобильных

Как отключить автоматическое связывание URL-адресов в комментариях WordPress

Знаете ли вы, что когда пользователь добавляет простой текстовый URL-адрес в свои комментарии, WordPress автоматически делает его интерактивным. Недавно