Оптимизация сайта «Ящик Пандоры»

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

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

Оптимизация сайта «Ящик Пандоры» была произведена в два этапа.

Этап 1 — выжимаем из текущей темы сайта всё, что можно

Под «темой сайта» подразумевается оформление включающее модули отображения контента, скрипты и стили.

В целях оптимизации, на сайте были произведены следующие действия:

• Добавлена ленивая загрузка картинок, теперь картинки загружаются непосредственно перед просмотром пользователя.
• Различные размеры картинок для разных экранов. Для больших экранов загружаются большие картинки в статьях, для маленьких — маленькие.
• Минимизация размера картинок за счёт использования стандарта .webp, там, где это поддерживается браузером.
• Компиляция CSS и js. Все ява-скрипты минифицируются и собираются в один файл. Со стилями тоже самое.
• Настройка сервера на выдачу CSS и js в формате .gzip.
• Созданы статические места для рекламных блоков, чтобы совокупный сдвиг макета при загрузке страницы, был минимальным.

После оптимизации, сайт стал загружаться быстрее и в системе аналитики https://developers.google.com/speed/pagespeed/insights/ выдавать следующие параметры загрузки:

Как видно из графиков сервера разработки http://pandora.4aoc.ru/, версия для компьютеров уже показывает неплохие результаты, но версия для мобильных никуда не годится. Это значит, что поверхностной оптимизацией не обойтись и необходима глубокая переработка дизайна сайта и всех его модулей.

Этап 2 — написание новой темы сайта, с учётом требований производительности

Этапы разработки новой темы сайта:

1. Создаём чистую тему и отключаем все модули замедляющие загрузку. Были отключены медленные модули, такие как: слайдер на главной, последние комментарии, и другие.
2. Написание лёгких, оптимизированных версий модулей взамен отключенных. Слайдер был взят из системы bootstrap3, модуль последних комментариев был переписан и вшит в новую тему.
3. Удаление лишних рhp модулей отвечающих за отображение материалов, оптимизация их структуры, кеширование.
4. Написание css и js с учётом принципа «mobile first». Сначала загружается всё, что необходимо и достаточно для мобильного экрана; потом, в зависимости от размера экрана, добавляются стили и функционал.

В новой теме были введены следующие улучшения:

• Все иконки переделаны в шрифт https://fontello.com/
• На больших экранах, видео из Ютуба отображаются в виде картинки. При нажатии на картинку загружается iframe с видео потоком.
• Загружаются только те скрипты и стили, которые используются. Другие скрипты и стили могут подгружаться, по мере использования соответствующих модулей.
• На главной отображается только несколько новостей, остальные подгружаются, по мере прокрутки страницы вниз.
• Загрузка html блоков сайдбара, по мере прокрутки страницы.
• Рекламные блоки убраны из видимого поля страницы и подгружаются по мере прокрутки.

В итоге удалось добиться следующих результатов:

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

Добавление внешних счётчиков метрики

После добавления скриптов Яндекс метрики и Гугл аналитики, сайт стал выдавать следующие результаты:

В зависимости от скорости загрузки скриптов метрики, общее время загрузки сайта может изменяться, но показатели всё равно близки к максимальным.

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