Советы по улучшению основных веб-показателей вашего сайта WordPress
Опубликовано: 2021-09-13У Google есть способ создать волну паники как среди веб-дизайнеров, так и среди владельцев веб-сайтов. Когда они вносят изменения в свой алгоритм поиска, люди начинают пытаться наверстать упущенное. Легко понять, почему. Никто не хочет, чтобы их рейтинг SEO пострадал.
Итак, когда были объявлены показатели Core Web Vitals, реакция была довольно предсказуемой. Поскольку эти изменения основаны на производительности сайта, наше внимание было обращено на молниеносную загрузку.
Но это не всегда просто. Веб-сайты, на которых работает система управления контентом (CMS), такая как WordPress, могут быть особенно сложными. Есть много факторов в игре. Таким образом, повышение производительности требует комплексного подхода.
Когда начать? Ознакомьтесь с нашим руководством по повышению оценки Core Web Vitals вашего веб-сайта WordPress.
Реализовать кэширование
Один из самых простых способов увеличить скорость веб-сайта WordPress — реализовать кеширование. Во многих случаях ранее медленный сайт станет значительно быстрее с помощью этого единственного шага. Это справедливо даже для относительно дешевого хостинга.
По умолчанию страницы и сообщения WordPress должны получать содержимое и настройки из базы данных сайта. Это требует времени. Кэш, с другой стороны, будет обслуживать контент в виде статических файлов HTML, что устраняет необходимость обращения к базе данных. Когда посредник (т. е. база данных) будет убран, загрузится быстрее.
Некоторые пакеты хостинга, в частности управляемый хостинг WordPress, будут включать кеш на основе сервера. Часто это лучший вариант, так как он требует от веб-дизайнеров очень мало и работает достаточно хорошо. Возможно, его нужно будет очищать время от времени. В противном случае, это опыт невмешательства. И его можно эффективно комбинировать с плагином для дальнейшего повышения скорости.
Даже если ваш хост не обеспечивает кэширование на уровне сервера, вы все равно можете оптимизировать производительность с помощью плагина. Плагины кэширования различаются по объему, сложности и цене. Но они дают ощутимые результаты, когда дело доходит до сокращения времени загрузки. Это, в свою очередь, положительно влияет и на Core Web Vitals.
Отложить загрузку скриптов и стилей блокировки рендеринга
При тестировании производительности вашего веб-сайта в Google PageSpeed Insights часто возникает вопрос о ресурсах, блокирующих рендеринг. Это скрипты и стили, которые не считаются «критическими» — это означает, что они не требуются для отображения содержимого страницы «в верхней части страницы».
Эти ресурсы могут помешать ускорению загрузки. В частности, они влияют на показатель «Самое большое содержание контента (LCP)» в Core Web Vitals. Это время, необходимое для загрузки основного содержимого страницы. Сокращение LCP жизненно необходимо.
Один из способов улучшить ситуацию — задержать (или отсрочить) загрузку различных элементов контента (изображений, видео, блочного текста). Это гарантирует, что сначала загружаются только необходимые сценарии и стили, а все остальное загружается позже.
Наряду с минификацией, многие плагины для кэширования/оптимизации WordPress также включают этот тип функций. Однако это может потребовать некоторого эксперимента, так как отсрочка неправильного ресурса может быть проблематичной.
Обязательно проверьте все внесенные вами изменения и проверьте консоль браузера на наличие ошибок. Как только вы найдете правильную конфигурацию, количество ресурсов, блокирующих рендеринг, на вашей странице должно значительно сократиться.
Оптимизация изображений
Широкое использование больших изображений и сложных ползунков только усложняет задачу оптимизации производительности. Эти активы могут выглядеть красиво, но могут легко составлять мегабайты данных. Это не даст вам проходной балл по Core Web Vitals, особенно на мобильных устройствах.
К счастью, есть несколько способов облегчить нагрузку. Прежде всего, избавьтесь от любых изображений, которые вы считаете ненужными. Удаление даже одного большого изображения может иметь значение.
Остальные изображения можно оптимизировать. Это уменьшит размер их файлов и снизит их влияние на время загрузки.
Как вы относитесь к оптимизации изображения, зависит от вас. Вы можете загрузить копию своих худших преступников и сжать их с помощью вашего любимого редактора изображений, а затем загрузить их обратно на свой веб-сайт. Или вы можете автоматизировать процесс с помощью полезного мультимедийного плагина WordPress.
Адаптивные изображения
Для мобильных пользователей WordPress включает возможность обслуживать адаптивные изображения через srcset
. Фактически, он автоматически сделает за вас грязную работу над изображениями, размещенными в вашем контенте. Это невероятно ценно, поскольку предотвращает замедление работы мобильных пользователей с огромными медиафайлами размером с настольный компьютер. Для изображений, не входящих в область основного содержимого, вам может потребоваться дополнительная работа, чтобы реализовать эту функцию.
Современные форматы изображений
Также стоит обратить внимание на форматы файлов, которые вы используете. Например, формат Google WebP часто позволяет уменьшить размер файла при сохранении качества изображения. Обратите внимание, что некоторые новомодные форматы не поддерживаются в устаревших браузерах (кхм, IE), поэтому могут потребоваться резервные версии. В этом также могут помочь плагины.
Ленивая загрузка всего
Функция ленивой загрузки загружает элементы только тогда, когда они находятся в области просмотра браузера. Задерживая загрузку изображений, фреймов и другого стороннего контента (например, виджетов социальных сетей), вы можете сосредоточить ресурсы на элементах, которые пользователи увидят в первую очередь.
WordPress уже реализует нативную ленивую загрузку изображений на основе браузера. Когда вы добавляете изображение на страницу или в сообщение, атрибут loading="lazy"
помещается в <img>
. То есть при условии, что изображение включает атрибуты высоты и ширины.
Это здорово, но как насчет других элементов, таких как видео или фреймы? Эти элементы также могут утяжелить страницу при загрузке с самого начала.
Iframes теперь по умолчанию загружаются отложенно, так что не беспокойтесь. Для некоторых более сложных элементов может потребоваться собственный код или плагин для реализации этой функциональности.
Уберите беспорядок
Со временем даже хорошо поддерживаемый сайт WordPress может захламиться. Забитая база данных, неиспользуемые плагины, которые все еще активны, раздутая тема с функциями, которые вы не используете — это случается. И это также может снизить ваши основные веб-жизненные показатели.
Вот почему важно наводить порядок время от времени. База данных вашего сайта может быть оптимизирована вручную или настроена на регулярную оптимизацию. Неиспользуемые плагины можно деактивировать и удалить. Темы можно сделать компактнее или заменить на что-то лучшее.
Изучите, что замедляет работу вашего сайта, найдите виновных и устраните их. Вы можете быть удивлены тем, насколько большую разницу это может иметь.
Улучшите основные веб-жизненные показатели вашего веб-сайта
Core Web Vitals усложняет и без того сложный процесс оптимизации производительности веб-сайта WordPress. Даже веб-сайт, который имеет хорошие оценки по другим показателям производительности, может по-прежнему отставать в этой области. Больше всего это проявляется в мобильном тестировании.
Хорошей новостью является то, что есть много мелочей, которые дизайнеры могут сделать, чтобы наверстать упущенное. Внедрение кеша закладывает отличную основу и дает немедленный прирост. Оттуда нужно уменьшить размер файлов и загрузить стили и сценарии в порядке важности.
Если пойти еще дальше, также имеет смысл настроить CSS вашего сайта с учетом Core Web Vitals. Это может помочь с ужасной оценкой Cumulative Layout Shift (CLS) и сократить раздувание.
В общем, то, что хорошо для производительности, хорошо и для Core Web Vitals. Результаты могут улучшиться довольно быстро. Просто знайте, что потребуется некоторое количество проб и ошибок, чтобы разобраться с некоторыми из этих отдельных недостатков.
Основная цель — обеспечить загрузку только самого необходимого, когда пользователь посещает ваш веб-сайт. Это порадует как посетителей, так и Google.