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

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

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

Оценкой индекса скорости сайта послужат сервис Яндекс.Вебмастер и PageSpeed Insights. Забегая вперед отмечу, что в сервисе проверки от гугл, скорость замерял у разных страниц блога, за исключением главной, так как на ней лишь превью статей и показатели значительно выше, чем у страниц с контентом.

Результаты эксперимента

До оптимизации

Покажу результаты своего блога second-life.ru (CMS WordPress), которые были до проведения работ по оптимизации скорости загрузки блога.

На странице «Показатели качества» в Яндекс.Вебмастере, блок «Скорость сайта» показывал оценку 1 из 5.

Индекс PageSpeed Insights выдавал скорость: для мобильных – 29, для компьютеров – 75.

PageSpeed Insights скорость для мобильных – 29

PageSpeed Insights скорость для компьютеров – 75

А вот так выглядел код страницы. Просмотреть его можно на любом сайте нажав клавиши CTRL+U.

Код сайта

После оптимизации

Две недели спустя произошел ежемесячный апдейт ИКС, скорость сайта в Яндекс.Вебмастере выросла на 1 балл, то есть 2 из 5.

Индекс скорости сайта - Яндекс Вебмастер

Что касается сервиса PageSpeed Insights, скорость загрузки для мобильных выросла до значения – 86, для компьютеров – 98, что весьма неплохо. Тут ждать не нужно, ускорил сайт – сразу же проверил.

PageSpeed Insights скорость для мобильных – 86

PageSpeed Insights скорость для компьютеров – 98

А вот как стал выглядеть код страницы. Пропали многие комментарии кода и абзацы (переносы).

Код сайта

Как я увеличил скорость сайта

Оптимизация картинок

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

Кэширование

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

А теперь пробежимся по настройке LiteSpeed Cache.

Вкладка №1 – «Cache Control Settings».

Настройки плагина LiteSpeed Cache

Включаем функцию Enable Cache, затем просматриваем ниже и убеждаемся, что запущен кэш для Logged-in Users, Commenters, REST API, Login Page, favicon.ico, PHP Resources, для сохранения нажмите кнопку Save. Отмечу, что после тестов, кэширование «Commenters» отключил, так как порой не сразу можно было увидеть новые комментарии от пользователей на страницах под статьей, хотя они были одобрены в административной панели. То есть подгрузка старой версии страницы не позволяла отображать новый комментарий.

Вкладка №7 – «Browser Cache Settings».

Настройки плагина LiteSpeed Cache

Browser Cache – включаем. В строку TTL вводим время сохранения кэша в браузере пользователя, исчисляется в секундах. Например, 15552000 сек = 6 месяцев.

Загрузка стороннего скрипта к себе на сайт

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

Код в блоке «Поделиться» от Яндекса

Как видно из скриншота, код имеет две ссылки со скриптами на сторонний ресурс. Скопируйте первую ссылку, вставьте в адресную строку браузера и нажмите Enter.

Код в блоке «Поделиться» от Яндекса

У вас откроется страница со скриптом, скопируйте все и вставьте в редактор Notepad++, сохраните файл с расширением .js (JavaScript), дав ему то же название, что у оригинала. Проделайте тоже самое со второй ссылкой и сохраните еще один файл с кодом JavaScript.

С помощью FTP подключитесь к серверу сайта, создайте в корне вашего домена каталог с каким-нибудь названием, например, «js-service», если необходимо, подкаталог – например, «yashare», разместите туда созданные вами два новых файла. Если потребуется редактировать, то можете в FileZilla также через Notepad++. Скопируйте по очереди ссылки расположения этих файлов и замените ими ссылки в исходном коде кнопок «Поделиться», который размещен у вас на сайте.

FTP подключения к серверу сайта

После этих манипуляций, вы сможете проверить скорость через PageSpeed Insights. У меня выдало следующие результаты: для мобильных – 38, для компьютеров – 98.

PageSpeed Insights скорость для мобильных – 38

PageSpeed Insights скорость для компьютеров – 98

Именно после этого шага информация о скорости сайта в Яндекс.Вебмастере выросла до 2 из 5 после апдтейта ИКС Яндекса.

Удаление рекламных блоков

В большинстве сайтов размещены рекламные блоки РСЯ и Google AdSense, Яндекс Метрика. Код этих продуктов больше всего тормозит загрузку страницы сайта. Понятное дело, что отключение данных блоков в большинстве случаев не целесообразно, ведь рекламные блоки – это заработок вебмастера, а Метрика – это полная информация о количестве посетителей, их действии на сайте и многое другое. Для чистоты эксперимента я временно удалил коды этих сервисов, после чего анализ показал скорость для мобильных – 86, для компьютеров – 98, то есть это те цифры, что я отметил в начале статьи.

Если вам сложно проделать подобные работы, то вы можете обратиться к специалистам сферы IT-обслуживания, например, в ivit.pro. Хотя я уверяю, что описанный в статье способ сможет сделать даже начинающий владелец сайта, так как вам не нужно даже понимать кодирование, плагин сам все исправит, достаточно сделать пару кликов в настройках.

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

Лучшее "Спасибо" - ваш репост

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *