Как ускорить сайт wordpress: Как ускорить сайт в WordPress

Как ускорить сайт в WordPress

Современные сайты должны быть не только стильными, лаконичными и понятными, но и быстрыми. Если ваш веб-ресурс отстаёт хотя бы по одному из этих критериев — это отразится на лояльности посетителей и в конечном счёте на выручке. В статье расскажем, как ускорить сайт, созданный на WordPress.

Закажите услугу REG.Site

Попробуйте комплексное решение для создания сайта прямо сейчас!

Попробовать

Что такое скорость загрузки сайта

Когда мы открываем сайт в браузере, проходит какое-то время, прежде чем контент на странице целиком загрузится. Это может происходить очень быстро: 1–2 секунды, и тогда нам кажется, что всё открылось мгновенно. А может дольше – от 5 секунд. Тогда мы понимаем, с сайтом что-то не так и, скорее всего, закроем его, чтобы не тратить своё время.

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

1. TTFB (Time To First Bite) — время до первого байта. Когда пользователь попадает на страницу, его браузер отправляет серверу HTTP-запрос. Сервер, в свою очередь, отдаёт первый байт страницы. Этот интервал между запросом и отдачей первого байта должен быть минимальным.

2. Время отрисовки страницы — первым делом сервер загружает HTML-файл страницы. Это «голая» структура с минимумом контента. На этом этапе пользователь видит общие очертания: где расположены заголовки, изображения и так далее.

3. Время загрузки контента — заключительный этап, на котором страница загружается целиком вместе со всеми остальными CSS- и JS-файлами, изображениями и кнопками.

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

Зачем нужно ускорять сайты

Скорость загрузки влияет не только на UX (восприятие пользователями), но и на ранжирование в поисковых сетях. Рассмотрим подробнее.

Если сайт грузится дольше 3 секунд:

• Возрастают «отказы».
  Никто не любит ждать, особенно клиенты. Если вместо перечня и описания услуг, они видят белую страницу или не до конца прогрузившуюся структуру — большинство из них просто перейдут на другой сайт в первые 15 секунд. Это и называется «отказом».
• Уменьшается конверсия. Конверсия — это соотношение числа посетителей, которые выполнили целевое действие (купить, подписаться, зарегистрироваться и т. п.), к общему числу пользователей, просмотревших страницу. Так, если за неделю на ваш блог зашло 400 человек, а на электронную рассылку подписались 15, конверсия будет 3,75% (15/400). Чем больше людей покинут страницу из-за низкой скорости, тем ниже будет эффективность.
• Ухудшается позиция в выдаче. В числе многих факторов поисковики Яндекс и Google оценивают скорость загрузки сайта. Предпочтение отдаётся быстрым сайтам. Медленным же гораздо сложней попасть в топ-10 первых ссылок на странице поиска.

Как узнать скорость загрузки сайта

Определить скорость загрузки сайта можно по-разному:

1. Проанализировать данные вкладки Network (Сеть) в консоли разработчика. Подробнее об этом способе мы рассказывали в статье Почему мой сайт работает медленно и что делать.

2. Воспользоваться специальными сервисами Be1, PR-CY, Google PageSpeed.

Если вы начинающий веб-мастер и не готовы тратить время на то, чтобы разобраться, можно оценить скорость загрузки визуально.

Откройте сайт с нескольких разных устройств с автономным соединением. Если на одном страница загрузилась быстро, а на другом — медленно, вероятно, дело не в самом сайте, а в скорости интернета.

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

Как повысить скорость сайта

Если сайт открывается недостаточно быстро, мы рекомендуем провести аудит по следующим параметрам:

• структура сайта;
• HTTP-запросы;
• размер CSS и JS;
• изображения;
• версия php;
• кэширование;
• gzip-сжатие;
• хостинг.

Разберём, как именно они влияют и как можно их улучшить.

1. Структура сайта → оптимизировать

Как говорилось выше, сначала сервер отдаёт браузеру HTML-страницу (структуру) и только потом загружает внешние файлы (изображения, стили, скрипты). Если в начале HTML-кода подключены другие файлы, они блокируют его загрузку. Сервер, встретив их, не может вернуться к ним позже, после того, как прогрузит структуру. Он начинает обрабатывать другие запросы — и в результате скорость загрузки снижается.

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

Это можно сделать вручную или с помощью плагинов WordPress.

2. HTTP-запросы → сократить количество

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

Чтобы сократить количество файлов, их можно объединить. Для этого откройте любой текстовый редактор и последовательно вставьте код каждого файла в том порядке, в каком они влияют на контент. В идеале вместо большого количества отдельных .css- и .js-файлов, для каждой страницы должен быть один основной.

3. CSS и JS → минимизировать

Чем больше лишних незначительных элементов (пробелов, переносов строк) в коде, тем медленнее он загружается. Чтобы убрать их, можно воспользоваться онлайн-сервисами CSS Minifier, JavaScript Compression Tool и т. п. Просто загрузите файл, и инструменты автоматически очистят код от лишних знаков и таким образом оптимизируют их.

4. Изображения → оптимизировать

Оптимизация скорости загрузки сайта во многом зависит от того, сколько весят изображения, ведь это самый тяжёлый тип контента (в сравнении с текстовыми кодами и динамическими скриптами). Мы посвятили работе с изображениями отдельную инструкцию.

5. Версия php → обновить

Если версия php, установленная для вашего сайта, устарела, это тоже может замедлять скорость обработки скриптов. Сейчас повсеместно используются 7.1–7.4. Узнать и изменить версию php на хостинге можно с помощью инструкции.

6. Кэширование → включить

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

7. Gzip-сжатие → настроить

На хостинге REG.RU по умолчанию включено сжатие для статичных файлов. Подробнее о настройках gzip можно узнать в статье.

8. Хостинг → увеличить тариф

Иногда медленная загрузка сайта — сигнал того, что вы исчерпали возможности вашего тарифа. Если сайт популярен и его посещают тысячи пользователей, а вы используете тариф с низким CPU, сервер просто не справляется с обработкой запросов. Мы рекомендуем выбирать VIP-тарифы с максимальными параметрами CPU. Читайте о том, как изменить тариф, в инструкции.

Как ускорить загрузку сайта на WordPress

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

WordPress — оптимизация загрузки сайта

Мы выбрали 2 популярных плагина, которые комплексно решают проблему скорости: PageSpeed Ninja и Autoptimize.

Рассмотрим, как установить их в административной панели и что делать потом.

1. 1.

   Откройте административную панель WordPress по инструкции.

2. 2.

   Перейдите в раздел «Плагины» и нажмите Добавить новый:

3. 3.

   В поиске справа введите название плагина: PageSpeed Ninja или Autoptimize и следуйте инструкции в нужной вкладке.

PageSpeed Ninja

Autoptimize

1. 4.

   Нажмите Установить и Активировать:

2. 5.

   В разделе «Настройки» выберите PageSpeed Ninja:

3. 6.

   Во вкладке «Общие» отображается оценка оптимизации десктопной и мобильной версии сайта, а также интерфейса.

   Чтобы настроить плагин более тонко, перейдите во вкладку «Дополнительно». Мы рекомендуем использовать пресет «Safe», чтобы обезопасить себя от критических изменений в структуре сайта:

4. 7.

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

   • Gzip compression и Gzip compression in .htaccess
   • Caching in .htaccess
   • Caching, Experimental Caching и DNS Prefetch
   • Merge embedded styles → In head only
   • Minify CSS Method → RESS + CSSTidy
   • Minify style attributes, Cross-files optimization, Keep extra link tag attributes, Keep extra style tag attributes
   • Merge whitespaces, Remove default attributes, Remove IE conditionals
   • Cross-files optimization, Keep extra script tag attributes
   • Optimization (Images)

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

1. 4.

   Нажмите Установить и Активировать:

2. 5.

   В разделе «Настройки» выберите Autoptimize:

3. 6.

   Откройте вкладку JS. CSS & HTML и отметьте галочкой Оптимизировать код JavaScript и сохраните изменения:

4. 7.

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

Готово, вы оптимизируете JS-скрипты и изображения. Это положительно отразится на скорости загрузки.

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

Помогла ли вам статья?

Да

6 раз уже помогла

Как ускорить сайт на WordPress: 6 неочевидных способов

WordPress – самый популярный движок сайта в мире. На этой CMS работает более 75-ти миллионов сайтов: блоги, информационные ресурсы, интернет-магазины. И всем им нужна скорость. Причём, чем быстрее будет загружаться ваш сайт – тем лучше.

Наши клиенты часто обращаются в Promodo с просьбой проконсультировать, на каком «движке» лучше создавать сайт. Собрали небольшую базу знаний по этому вопросу и рассортировали самые популярные системы управления под потребности ритейлеров из разных весовых категорий.

Почему так важна скорость загрузки сайта

У вас медленно грузится сайт, но есть отличный блог и User Friendly Interface? Жаль, клиент об этом никогда не узнает. Он закроет его раньше, чем увидит контент. А поисковые роботы после этого ещё и понизят страницу в выдаче. По данным Akamai, низкая скорость загрузки сайта способна испортить мнение о компании у 35% пользователей, а 22% посетителей не вернутся на страницу, которая работает некорректно. Скорость загрузки влияет и на индексацию новых страниц. Медленный сайт дольше отдает контент, а значит поисковые роботы тратят больше времени на обработку всех страниц. Как результат, новые страницы будут позже появляться в выдаче Google.

Плюс, с мая 2021 Google при ранжировании сайтов будет опираться на Core Web Vitals. В этот набор факторов входит три параметра, которые показывают скорость появления самого объемного элемента страницы, её интерактивность и стабильность работы. То есть поисковая система будет отображать в числовом выражении, насколько удобно пользователю работать с сайтом.

Как измерить скорость загрузки сайта

Здесь помогут специальные инструменты:

• Google PageSpeed Insights и пункт в консоли Chrome Lighthouse
• Pingdom
• GTmetrix

Давайте посмотрим на реальном примере, как выдаёт рекомендации по ускорению сайта Google PageSpeed, и какие параметры входят в Core Web Vitals. Вводим нужный URL на странице PageSpeed, нажимаем «‎Анализировать»‎ и выбираем результат для компьютеров. Самые важные показатели выводятся первыми:

• First Contentful Paint
• Largest Contentful Paint
• First Input Delay
• Cumulative Layout Shift

First Contentful Paint – скорость первого отклика. FCP показывает, через сколько секунд после клика на ссылку у пользователя на экране появляются первые признаки того, что сайт загружается. Если «‎признаки жизни» появились менее чем через секунду – это отличный показатель. Если на странице ничего не происходит спустя три секунды – это плохой знак. Скорее всего, пользователь уже закрыл вкладку.

Largest Contentful Paint – скорость загрузки основного контента. LCP показывает, как быстро пользователь увидит ключевую информацию на странице и сможет оценить, отвечает ли контент его запросу. Идеальный показатель – загрузка менее чем за 2,5 секунды. Если время загрузки страницы превышает четыре секунды, вы можете потерять потенциального покупателя.

First Input Delay — время отклика на действие клиента. FID показывает, с какой скоростью элементы страницы отвечают, когда по ним кликает посетитель. Значение менее ста миллисекунд говорит, что для пользователя переход на другую страницу или открытие картинки выглядит моментальным. Когда элемент реагирует на клик спустя триста и более миллисекунд, создается ощущение, что сайт подвисает.

Cumulative Layout Shift – показатель стабильности страницы. CLS измеряется в баллах и показывает, как часто пользователь может видеть смещение контента или полей на странице при её загрузке.

Например, вы начали читать статью, а тут внезапно над ней всплывает баннер или сообщение, и строки текста сдвигаются вниз. Или вы готовы поставить курсор в строку поиска, а её сдвигает меню навигации, и вы неожиданно открываете один из разделов. Чем реже такое происходит, тем более стабильной считается страница. При значении 0,25 и выше – страница считается нестабильной.

Последние три параметра – LCP, FID и CLS – это и есть основа Core Web Vitals. Помимо них в отчёте поданы значения параметров, которые имитируют загрузку страницы:

• First Contentful Paint
• Speed Index
• Largest Contentful Paint
• Time to Interactive
• Total Blocking Time
• Cumulative Layout Shift.

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

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

Стандартные способы ускорения сайта на WordPress

Помимо рекомендаций PageSpeed Insights и других сервисов, существуют универсальные способы ускорить сайт на WordPress. Если вы столкнулись с низкой скоростью загрузки страниц, эти пункты стоит проверить в первую очередь.

Серверное и браузерное кэширование

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

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

Популярные WordPress-плагины для кэширования:

• WP Rocket
• W3 Total Cache
• WP Super Cache
  

Использование CDN

Content Delivery Network (CDN) – это кластер из серверов, которые находятся в разных точках мира и передают информацию о сайте с ближайшей к пользователю машины. За счёт этого территориальная близость между сервером и клиентом помогает ускорить загрузку сайта.

Это затратный способ повысить скорость сайта, если использовать собственное оборудование. Он оправдан для международных компаний с клиентами и дистрибуцией в удаленных друг от друга странах. Местным блогам и интернет-магазинам лучше рассмотреть другие способы оптимизации. Международным компаниям, у которых пока нет больших бюджетов, можно бесплатно настроить CDN для WP с помощью плагина W3 Total Cache и сервиса Cloudflare.

Оптимизация кода

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

• Autoptimize
• WP Super Minify
• WP Fastest Cache

Также сайт будет загружаться быстрее, если размещать CSS-файлы в начале страницы, а JS-файлы – в конце. Тогда браузер начнет обрабатывать скрипты после того, как загрузит содержимое страницы.

Плагины оптимизации

Оптимизировать можно не только код и загрузку страниц, но и контент. Для этого используют сторонние сервисы либо плагины для сжатия картинок:

• Image Optimizer
• WP Smush
• TinyPNG

Чтобы облегчить плагинам задачу и повлиять на финальный результат, используйте для фотографий формат JPEG, для иконок – SVG, иллюстраций ‎– PNG. Также приобретает популярность формат WebP, поскольку при аналогичном качестве он «‎легче», чем PNG и JPEG ‎— на 26% и 34% соответственно. Об этом говорят исследования, проведенные Google. 

Другие плагины, которые оптимизируют работу сайта, ‎– Clearfy, WP-Optimize, Easy&Fast Optimization. Они действуют по принципу CCleaner, удаляя дубли страниц и устаревшую информацию из баз данных.

Более мощное железо

Низкая производительность сайта не всегда связана с его оптимизацией. Интернет-магазин или блог могут работать медленнее, потому что хостинг не удовлетворяет их потребности в CPU или оперативной памяти. Если вы избавились от лишних плагинов и ненужных запросов в базе данных и не получили желаемый результат, есть смысл перейти на более высокий тарифный план или на другой вид хостинга. Компания HOSTiQ предлагает виртуальный, облачный, VPS и shared хостинг под различные цели.

Способы ускорения сайта, про которые обычно забывают

Если хостинг подходящий, испробовали все перечисленные способы, а скорость загрузки не выросла ‎– попробуйте методы ускорения сайта, о которых вспоминают не сразу.

Снизить количество версий постов

WordPress сохраняет все версии постов и черновиков, которые вы создаёте. Это полезная функция, но вряд ли вам понадобится история публикаций с начала времен.

Ограничьте количество версий 3-5 штуками ‎– в зависимости от частоты обновлений и возможных потребностей. Сделать это можно через файл wp-config.php. Пропишите в нём строку: define( ‘WP_POST_REVISIONS’, 7 ). Где 7 ‎– это количество версий постов.

Если хранить версии вам не нужно, отключите эту функцию с помощью параметра false: define( ‘WP_POST_REVISIONS’, false ).

Разбить комментарии на страницы

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

• слева в панели управления выберите меню «‎‎Настройки»;
• в настройках нажмите «‎‎Обсуждение» — «Другие настройки комментариев»;
• поставьте галочку в графе «‎Разбивать комментарии верхнего уровня на страницы» и впишите, сколько комментариев хотите видеть на одной странице.

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

Настроить защиту от хотлинкинга

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

Один из способов защититься от хотлинкинга – настроить правила в CDN. Второй способ ‎– использовать плагины для WP:

• All in One WP Security and Firewall
• Secure Copy Content Protection
• WP Content Copy Protection & No Right Click

Запретить индексацию для нежелательных ботов

Попасть в индекс поисковой системы ‎— заветная цель любого сайта. Но чем больше страниц нужно обработать поисковым роботам, тем большую нагрузку они создают на сервере. Чтобы не выпасть из выдачи нужной вам системы и при этом не перегружать сайт, запретите индексацию ненужным сайтам. Например, вы хотите, чтобы ваш сайт попал в выдачу Google, при этом вам ни к чему запросы от Yahoo. Тогда в файле robots.txt либо .htaccess нужно запретить индексацию для нежелательных ботов.

Если сайт находится в разработке или на редизайне, и вам вовсе не нужно, чтобы его индексировали, сделайте его «‎невидимым». Выберите в настройках пункт «‎Чтение» – «‎Видимость для поисковых систем» и поставьте галочку в графе «Попросить поисковые системы не индексировать сайт». Так вы закроете сайт от всех поисковых роботов.

Использовать свежую версию РНР

На производительности сайта больше сказывается сам код, чем версия языка, на котором он написан. Тем не менее, начиная с седьмой версии PHP и выше предусмотрена функция OPcache, которая дает прирост производительности сайта. Поэтому писать оптимизированный и структурированный код лучше на свежей версии PHP.

Перейти на HTTP/2

HTTP/2 протокол построен в бинарном, а не текстовом формате, и создает меньшую нагрузку на канал при передаче файлов. Благодаря этому сайт, работающий по протоколу HTTP/2, быстрее, чем сайт на HTTP/1.

Стоит учесть, что HTTP/2 подходит для сайтов с SSL/TLS и не годится для ресурсов, где идёт работа с большими файлами, видео- и аудиопотоками. Кроме того, использование HTTP/2 будет тормозить загрузку сайта через мобильный интернет.

Поделиться:

Как увеличить скорость WordPress без использования плагинов

Это только заставляет вас хотеть увеличить скорость вашего сайта WordPress. Это улучшает очень важные вещи, такие как пользовательский опыт и SEO.

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

Как увеличить скорость вашего сайта WordPress без плагинов:

1. Запустите аудит скорости, чтобы измерить предварительную оценку скорости вашего сайта.
2. Оптимизируйте все изображения в медиатеке и при необходимости обновите их в конструкторе сайтов
3. Оптимизируйте файлы HTML, CSS и JS с помощью минимизации и загружайте их только при необходимости
4. Добавьте необходимый код в ваш файл .htaccess для использования кэширования браузера
5. Деактивируйте или удалите ненужные плагины WordPress
6. Уменьшите количество ненужных сложных элементов на странице
7. Запустите еще один отдельный аудит скорости в новой вкладке, чтобы измерить улучшения!

1. Сначала запустите аудит скорости

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

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

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

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

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

Примечания о тестах и ​​проверках скорости

Примечание №1: Одна вещь, которую вы должны знать, прежде чем стремиться к высокой скорости, заключается в том, что эти инструменты предназначены только для того, чтобы помочь вам диагностировать потенциальные проблемы для повышения скорости. Да, чем выше скорость, тем лучше, но вы вряд ли найдете заметную разницу между оценкой 60% и 70%. Пока ваш сайт выше 75% — у вас все отлично. Чем выше, тем лучше. Не переживайте из-за того, что не получили 90%+ , так как это может быть нереально для большинства веб-сайтов WordPress в зависимости от вашей темы и количества необходимых плагинов.

Примечание №2: Результаты аудита скорости могут отличаться от теста к тесту. Это может быть связано с несколькими разными причинами, такими как скорость вашего хостинга, которая колеблется в разное время дня. Время использования вне пиковой нагрузки может дать вам лучшие результаты, чем время пикового использования.

Примечание №3: Это нормально, когда показатель скорости вашего мобильного устройства ниже, чем показатель скорости вашего настольного компьютера, особенно с помощью Google Page Speed ​​Insights. Это связано с тем, что с помощью инструмента Google мобильная оценка намеренно имитирует загрузку вашего веб-сайта при подключении к мобильному телефону, которое медленнее, чем настольные компьютеры.

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

Важность оптимизации изображений для оптимизации скорости: 8/10

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

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

Чтобы оптимизировать ваши изображения в WordPress без плагина, нам сначала нужно найти их отображаемый размер. Это очень важно, потому что зачем показывать изображение шириной 3000 пикселей, если оно может иметь ширину всего 1000 пикселей?

Как найти идеальный размер для каждого изображения

Мы должны начать с определения того, насколько большое изображение визуализируется, чтобы мы могли узнать, насколько большим нам нужно сделать фактическое изображение, чтобы не сделать его слишком большим, чтобы добавить ненужные пикселей (больше данных в размере файла). Чем меньше изображение, тем быстрее изображение!

Итак, когда дело доходит до оптимизации изображений, есть два важных типа размеров изображений; отображает размер и внутренний размер .

Визуализированный размер — это размер отображаемого изображения.

Внутренний размер — это размер фактического изображения, независимо от того, какой размер отображается.

Это важно, потому что если у вас есть изображение, которое обрабатывается размером 500×500 пикселей, но фактический внутренний размер изображения составляет 4000×4000, то существует большая возможность оптимизации изображения, чтобы сделать собственный размер изображения близким к Размер дисплея.

Допустим, вы оптимизировали это изображение, так что теперь его изображение 500×500 (внутреннее) отображается как 500×500 (рендеринг). Вы обнаружите, что, поскольку вы уменьшили размер изображения, оно будет размытым.

Но как? Если изображение 500×500, а отображается с разрешением 500×500, то разве оно не должно выглядеть без потерь и четким? Такой же размер!

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

Одна вещь, на которую вы также должны обратить внимание, это то, что то, что ваше изображение отображается в разрешении 400×400 на настольном компьютере, не означает, что оно не будет отображаться больше на мобильном устройстве. Большинство адаптивных столбцов станут на 100 % шире на мобильных устройствах, или макет из 3 столбцов может превратиться в макет из 1 столбца с 3 строками, что сделает контейнер больше, чем на десктопе.

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

Как оптимизировать изображения в WordPress

1. Начните с того, что щелкните правой кнопкой мыши изображение на своем веб-сайте, которое вы хотите ускорить, и нажмите Проверить (это то, что написано в Chrome, извините, пользователи Safari — я уверен, что это похожий).
2. Когда панель проверки (обычно внизу или справа) откроется, найдите элемент изображения или элемент и наведите указатель мыши на его URL-адрес. Может быть несколько URL-адресов, если это так, наведите указатель мыши на тот, который имеет основные атрибут источника .
3. При наведении курсора на изображение должно появиться окно предварительного просмотра/информации. Сначала он сообщит размер, с которым визуализируется изображение, а затем внутренний размер , который показывает, насколько большим является фактическое загружаемое изображение.
4. Затем мы должны оптимизировать изображение. Помните, что мы хотим, чтобы изображение отображалось с разрешением + 200-300 пикселей, чтобы оно по-прежнему выглядело качественно. Есть два быстрых способа оптимизировать размер изображения:
   1) Через редактор изображений WordPress
   2) Вы загружаете изображение, помещаете его в что-то вроде PhotoShop, экспортируете в уменьшенном размере, а затем повторно загружаете. Это дает вам возможность экспортировать с высоким сжатием, что дает вам еще меньший размер файла.
5. Заменить изображение с обновленным размером.

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

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

3. Оптимизация файлов HTML, CSS и JS без плагинов

Важность минимизации для оптимизации скорости: 4/10 Плагин Вордпресс. Существуют плагины, такие как Fast Velocity Minify, которые могут автоматически минимизировать ваш код без необходимости его повторной минимизации после внесения изменений. Плагины устанавливаются за секунды, активируются за секунды и практически не имеют недостатков по сравнению с их установкой. Знайте, что ручная минимизация становится почти бесполезной по мере того, как ваш сайт становится все больше и больше. Я настоятельно рекомендую использовать плагин. Однако, если вы категорически против использования плагинов, вы все равно можете сделать это вручную.

 ## ИСЧЕЗАЕТ КЭШИРОВАНИЕ ##

ExpiresActive On
ExpiresByType image/jpg "доступ 1 год"
ExpiresByType image/jpeg "доступ 1 год"
ExpiresByType image/gif "доступ 1 год"
ExpiresByType image/png "доступ 1 год"
ExpiresByType text/css "доступ 1 месяц"
ExpiresByType text/html "доступ 1 месяц"
ExpiresByType application/pdf "доступ 1 месяц"
ExpiresByType text/x-javascript "доступ 1 месяц"
ExpiresByType application/x-shockwave-flash "доступ 1 месяц"
ExpiresByType image/x-icon "доступ 1 год"
ExpiresDefault "доступ 1 месяц"

## ИСХОДИТ КЭШИРОВАНИЕ ##