Оптимизация скорости загрузки сайта, который разработан с использованием CMC WordPress

— Ситуация —

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

— Проблема —

К примеру, есть определенный сайт example.com, который занимается продажей автозапчастей в России. За долгий период работы сайта, в нем было произведено множество доработок и изменений функционала, были добавлены разные блоки и разделы, а так же установлено множество плагинов, что негативно сказалось на скорости загрузки страниц и работы сайта в целом. В результате встала задача оптимизации скорости загрузки сайта и определения путей решения этой проблемы.

— Решение —

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

****Загрузка изображений с расширением больше, чем это необходимо

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

****Неправильный формат изображений

Как известно, самыми популярными форматами изображений являются jpeg и png. Разница между ними в том, что png изображение может иметь прозрачный фон, в то время, когда в jpeg каждый пиксель закрашен и должен иметь какой-то цвет, без всякой прозрачности. Эта особенность делает изображения png более тяжелыми, по сравнению с jpeg. На сайте example.com два фоновых рисунка были сохранены в формате png, хотя никаких прозрачных участков не содержали, в результате чего дополнительно нагружали страницу, без всякой необходимости. Переформатирование их в формат jpeg неплохо уменьшили их вес и вес страницы в целом.

*****Использование множества иконок на сайте

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

*****Загрузка множества скриптов и стилей плагинов

Каждый плагин в своей работе использует свои скрипты и стили для своей работы. Если скрипты используются для работы функционала плагина, то стили нужны далеко не всегда, так как в большинстве случаем они переписываются разработчиками для того, чтобы результат работы плагина на странице выглядел в общей стилистике сайта. Для того, что бы ускорить загрузку страницы, было принято решение отключить стили плагинов, которые не используются, а все скрипты и стили плагинов, которые используются, объединить в один файл стилей css и один файл скриптов js соответственно, предварительно преобразовав css и js код в одну строку, для уменьшения веса самого кода. В результате мы немного уменьшили размер загружаемой страницы и значительно уменьшили количество HTTP-запросов на сервер.

*****Оптимизация изображений

Все изображения, используемые на сайте были обработаны оптимизатором изображений, который уменьшат вес jpeg, png и gif картинок, без потери качества. В результате общий вес всех изображений был уменьшен на 15-20%, что позитивно повлияло на скорость загрузки страниц.

*****Перенос скриптов в конец страницы

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

— Оценка —

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