Использование WP Rocket в качестве секретного оружия для нашего агентства WordPress

Что, если бы я сказал вам, что вы можете создавать быстрые и эффективные веб-сайты WordPress, которые набирают более 90% в PageSpeed ​​Insights? Еще лучше, что, если бы я сказал вам, что вы можете получить эти впечатляющие баллы для мобильных устройств и пройти Core Web Vitals для каждого проекта?

Мы делаем это последовательно для клиентских проектов, используя быстрые темы, хороший хостинг и, самое главное, WP Rocket. Использование WP Rocket — это секретное оружие нашего агентства WordPress!

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

Наш опыт и опыт работы с WordPress

Наше агентство Clio Websites помогает клиентам запускать новые красивые веб-сайты с 2007 года.

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

Одним из наших основных предложений является помощь клиентам в повышении производительности их веб-сайтов, и WP Rocket играет в этом ключевую роль. Мы использовали WP Rocket для проектов, в которых используются пользовательские темы, редактор блоков (Gutenberg) и популярные конструкторы страниц, такие как Elementor и WP Bakery, и получили отличные результаты. Вот почему мы называем WP Rocket секретным оружием нашего агентства WordPress.

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

Из-за своей нестандартной архитектуры WordPress требует особого внимания, когда дело доходит до производительности. Реализации Vanilla WordPress часто обращаются к базе данных SQL для поиска информации, что приводит к частым обращениям к серверу, когда пользователи взаимодействуют с веб-сайтом.

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

Как работает кэширование

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

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

Как минификация может повысить производительность

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

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

Что такое задержка и отсрочка активов?

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

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

4 распространенные проблемы с производительностью веб-сайта

У нас большой опыт создания и помощи клиентам в повышении производительности веб-сайтов.

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

1. Большие и несжатые изображения
2. Неправильно настроенные подключаемые модули кэширования или отсутствие подключаемых модулей кэширования
3. Несжатые активы (файлы CSS и JavaScript) без функций задержки или отсрочки
4. Неэффективные темы и плагины

Как выявить проблемы с производительностью

Существует ряд бесплатных инструментов, которые можно использовать для диагностики и устранения проблем с производительностью веб-сайта. Нашими любимыми инструментами являются PageSpeed ​​Insights, GTmetrix и WebPageTest.

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

В следующих нескольких разделах мы рассмотрим наиболее распространенные проблемы с производительностью и способы их устранения.

1. Несжатые изображения

Использование больших и несжатых изображений — наиболее распространенная проблема, негативно влияющая на скорость загрузки сайта. Средний размер веб-сайта в 2022 году составляет около 2,3 МБ для настольных компьютеров и около 2 МБ для мобильных версий.

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

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

2. Неправильно настроенные или отсутствующие плагины кэширования

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

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

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

3. Несжатые активы без функций задержки

Сжатие других ресурсов веб-сайта, таких как файлы CSS и JavaScript (JS), легко с помощью правильных инструментов и может дать отличные результаты. В следующем разделе мы покажем вам, как вы можете сделать это, чтобы улучшить производительность вашего сайта.

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

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

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

4. Неэффективные темы и плагины

Неэффективные темы WordPress могут включать в себя множество скриптов, раздутых ресурсов и неправильных методов программирования, что может значительно повлиять на производительность сети. Мы рекомендуем работать с темами, которые в первую очередь быстрые и эффективные (например, Hello Elementor, GeneratePress и Astra).

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

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

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

Как мы используем WP Rocket для достижения> 90% баллов

Никто не любит использовать медленный веб-сайт. Особенно на их мобильных устройствах.

После того, как вы определите проблемы с производительностью, с которыми сталкиваются веб-сайты ваших клиентов, вы можете решить их с помощью WP Rocket и набрать более 90% на мобильных устройствах.

Что это значит для ваших клиентов и вашего агентства

Недавно мы помогли клиенту повысить производительность с 54% до 97% на мобильных устройствах, просто установив и настроив WP Rocket :

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

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

В другом примере мы использовали WP Rocket, чтобы повысить производительность мобильных устройств с 24% до более чем 90% и помочь им пройти Core Web Vitals (см. снимок экрана ниже). Вскоре после того, как были решены проблемы с производительностью и устранены ошибки медленности Google Search Console, мы увидели, что их SEO-трафик подскочил на 55% .

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

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

В следующем разделе мы рассмотрим общие функции WP Rocket, которые мы используем на веб-сайтах WordPress, чтобы повысить производительность и набрать более 90% на мобильных устройствах.

1. Настройки кеша

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

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

Параметр «Cache Lifespan» также является тем, что мы обычно увеличиваем для повышения производительности. По умолчанию установлено значение 10 часов, что означает, что каждые 10 часов кеш веб-сайта будет полностью удален.

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

2. Настройки оптимизации файлов

Раздел «Оптимизация файлов» — один из самых важных и впечатляющих разделов WP Rocket. Но с большой силой приходит большая ответственность.

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

CSS-оптимизация

Раздел вверху обрабатывает модификации и улучшения файлов CSS, а раздел внизу обрабатывает улучшения файлов JavaScript.

Включение функции «Минимизировать файлы CSS» удалит все пробелы и ненужные символы из файлов CSS вашего веб-сайта и ускорит загрузку этих ресурсов. Обычно мы включаем эту настройку.

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

Оптимизация доставки CSS также является отличной функцией, которую вы можете попробовать, если видите предупреждения в PageSpeed ​​Insights. Как вы можете видеть в нашем примере выше, у нас не включена эта настройка, и мы по-прежнему получаем 97% на мобильных устройствах для этого конкретного клиентского сайта.

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

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

Оптимизация JavaScript

Раздел оптимизации JavaScript имеет аналогичные параметры и функции.

Мы рекомендуем включить минимизацию JavaScript, но не включать «объединение», если вы используете серверы, использующие HTTP2.

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

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

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

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

3. Параметры мультимедиа и настройка

Еще одна распространенная проблема, с которой мы сталкиваемся, — это несжатые изображения и отсутствие ленивой загрузки.

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

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

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

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

4. Предварительная загрузка

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

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

5. Другие настройки WP Rocket

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

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

WP Rocket автоматически сократит эту активность с 1-минутного до 2-минутного интервала, чтобы сохранить ресурсы сервера и повысить производительность.

Другие настройки надстройки включают в себя включение кэширования Varnish (автоматически определяется WP Rocket) и совместимость с WebP.

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

WebP — это относительно новый стандарт сжатия изображений и расширение файла, которое поддерживают все современные браузеры. Для повышения производительности плагин сжатия изображений, такой как Imagify, может автоматически преобразовывать ваши изображения PNG и jpg в WebP. WP Rocket может автоматически отображать эти изображения из кеша.

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

Подведение итогов

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

Поддержание результатов производительности после настройки

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

Мы всегда тестируем производительность веб-сайта раз в месяц с помощью PageSpeed ​​Insights и GTmetrix, чтобы убедиться, что веб-сайт продолжает быстро загружаться. Также рекомендуется следить за новыми функциями и обновлениями WP Rocket, которые могут помочь улучшить ситуацию. WP Rocket постоянно совершенствуется и добавляет новые функции, которые могут помочь пользователям повысить производительность своего веб-сайта.

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