Увеличение скорости загрузки сайта

Здравствуйте, друзья. Хочу поговорить о неожиданно проявившейся проблеме по скорости загрузки сайта. Получил неутешительное сообщение от Яндекс Вебмастера:

Начал искать решение. В первую очередь ожидаемые подробности можно обозначить с помощью Google PageSpeed Insights. Этот онлайн-сервис определяет фактическую производительность и позволяет выбрать эффективные пути оптимизации сайта. При этом анализируются факторы, не зависящие от интернет-соединения: Java Script, CSS, структура HTML, размер изображений и конфигурация сервера.

Кажется, все просто. Набираем «PageSpeed Insights» в адресной строке браузера. Затем вводим ссылку на испытуемый ресурс, определяем проверку «Для мобильных» или «Для компьютера» и нажимаем кнопку «Анализировать». Время обработки и выдачи результатов занимает около 1 минуты. Итак, что мы имеем:

Картина ясная — основная масса статей писалась когда требования к качеству отображения сайтов на мобильных устройствах были на начальном уровне. А что будем делать?

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

2. Обновление страниц. Метод долгий, изнурительный для оптимизации CSS, Java Script, структуры HTML, а конфигурация сервера — в компетенции хостера, т.е. потребуются специалисты-профессионалы. Да и работа с размерами и весом изображений через Adobe Photoshop тоже не радует, зато сколько навыков прибавится.

Кроме Photoshop можно использовать онлайн-сервисы TinyPng, Optimizilla, Web Resizer, Compressor.io. В принципе, ширина изображений в формате .jpeg, .gif или .png рекомендуется в 400-600 пикселей при весе 35-75 Кб.

Для решения срочной задачи использовал плагин a3 Lazy Load, который позволяет вести, так называемую, «ленивую» загрузку изображений. При его работе фото, скриншоты и др. запускаются не все сразу, а по мере приближения к ним курсора. Плагин хорош еще тем, что регулярно обновляется (последний раз — 2 недели назад).

Установка и настройка плагина. В аминпанели последовательно выбираем: Плагины — Установить новый. Вверху справа в строке поиска набираем «a3 Lazy Load» и ждем конца загрузки. Нажимаем «Установить», затем «Активировать». После активации в Меню панели выбираем наш плагин и проводим настройку. Окончательно она выглядит следующим образом:

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

Ощутимое увеличение скорости есть для мобильных устройств, для ПК — очень хорошо.

Вывод: необходимы работы по обновлению страниц.

А что говорит Яндекс Вебмастер?

Хорошо. И заключительно:

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

До свидания. Геннадий Лаптев