Оптимизация скорости загрузки, ускорение сайтов

Здесь приведены примеры ускорения сайтов под Google PageSpeed Insights со сравнением синтетических тестов ДО/ПОСЛЕ. Оптимизация скорости загрузки — важный фактор ранжирования для SEO продвижения.

Алексей Седов
Алексей Седов

интернет-маркетолог
с командой

Оптимизация скорости загрузки

Кейс: ускорение сайта — darsy-wed.ru после переноса на MODx

Как мы это сделали?
  • Ускорение сайта было одной из целей миграции на движок MODx

После переноса с костыльного и криво собранного движка на Модэкс мы смогли добиться существенного ускорения.

Кейс: ускорение сайта — 3277921.ru

Как мы это сделали?
  • установили актуальную библиотеку js-lazyload;
  • провел рефакторинг некоторых существующих скриптов во избежание конфликта с jQuery библиотекой;
  • перенес некоторые скрипты локально на хостинг вместо использования внешних CDN-серверов;
  • реализовал механику отложенной загрузки для большинства статичных медиафайлов;
  • вручную сжал некоторые медиафайлы без потери качества и обновил формат некоторых файлов;
  • доработал порядок рендеринга статичных элементов внутри шаблона;
  • реализовал отложенную загрузку JivoSite виджета;
  • реализовал отложенную загрузку Google карт на странице «Контакты»;
  • отключил виджет связи с facebook’ом во избежание таймаута при загрузке сайта.

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

Кейс: ускорение сайта — spawnclan.ru

Как мы это сделали?
  • установили актуальную библиотеку js-lazyload для реализации механики отложенной загрузки;
  • перенесли шрифты и скрипты локально на хостинг вместо использования внешних CDN-серверов;
  • вручную сжали некоторые медиафайлы без потери качества;
  • реализовали отложенную загрузку для изображений товаров в списке товаров;
  • реализовали отложенную загрузку для изображений товаров в слайдере с товарами;
  • добавили анимацию загрузки для отложенных элементов;
  • реализовали отложенную загрузку Яндекс.Карты на странице «Контакты».

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

Кейс: ускорение сайта на WordPress — hram-veshnjaki.ru

Как мы это сделали?
  • вручную сжали некоторые медиафайлы без потери качества;
  • обновили формат некоторых медиафайлов;
  • реализовали вывод YouTube видео во всплывающем окне вместо рендеринга плеера в исходном коде;
  • доработали основные плагины внутри движка;
  • реализовали отложенную загрузку для Яндекс.Карты;
  • обновили версию PHP до 7.4 на виртуальном сервере.

Заметно ускорили проект благодаря доработке движка и переверстке некоторых статичных элементов.

Кейс: ускорение сайта на DIAFAN CMS — vagon-prom.ru

Как мы это сделали?
  • установили актуальную библиотеку js-lazyload для реализации механики отложенной загрузки;
  • доработали механику js-lazyload внутри шаблона;
  • перенесли шрифты и скрипты локально на хостинг вместо использования внешних CDN-серверов;
  • вручную сжали некоторые статичные медиафайлы;
  • доработали скрипты для инициализации слайдеров;
  • добавили анимацию загрузки для отложенных элементов;
  • реализовали отложенную загрузку Яндекс.Карты вместе со всей библиотекой;
  • обновили формат некоторых медиафайлов внутри верстки;
  • доработали механику вывода YouTube видео на посадочной странице товара;
  • вырезали лишний css и js код из проекта по итогам Google DevTools Coverage проверки.

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

Кейс: ускорение сайта на WordPress — duoleo.ru

Как мы это сделали?
  • вручную сжали некоторые медиафайлы без потери качества;
  • принудительно обновили формат некоторых медиафайлов;
  • реализовали вызов Яндекс.Карты через отложенную функцию;
  • отключили некоторые плагины внутри движка;
  • отключили автообновление движка и плагинов для устойчивой работы проекта.

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

Кейс: ускорение сайта — novo-block.ru

Как мы это сделали?
  • установили актуальную библиотеку js-lazyload;
  • перенесли некоторые скрипты локально на хостинг вместо использования внешних CDN-серверов;
  • перенесли некоторые медиафайлы (например, изображения товаров) с домена silikatkirpich.ru на основной домен;
  • реализовали механику отложенной загрузки для большинства медиафайлов;
  • вручную сжали некоторые медиафайлы;
  • добавили анимацию загрузки для некоторых изображений;
  • доработали скрипт для вызова некоторых слайдеров;
  • переделали механику вывода YouTube видео;
  • реализовали вызов внешних виджетов через отложенную функцию.

После оптимизации фронтенда и обработки медиафайлов сайт стал работать заметно шустрее.

Кейс: ускорение сайта — silikatkirpich.ru

Как мы это сделали?
  • добавили актуальную библиотеку js-lazyload;
  • перенесли некоторые скрипты локально на хостинг вместо использования внешних CDN-серверов;
  • реализовали механику отложенной загрузки для большинства медиафайлов;
  • вручную сжали некоторые медиафайлы без потери качества;
  • добавили анимацию загрузки некоторых изображений;
  • доработали скрипты для инициализации слайдеров;
  • переделали принцип вывода YouTube плеера через всплывающее окно;
  • реализовали подключение внешних виджетов через отложенную функцию.

В результате сайт стал загружаться значительно быстрее.

Кейс: ускорение сайта на WordPress — magicosmo.ru

Как мы это сделали?
  • обновили библиотеку js-lazyload;
  • перенесли все шрифты локально на хостинг вместо подключения через Google Fonts API;
  • перенесли все js-библиотеки локально на хостинг вместо подключения через внешние CDN-сервера;
  • убрали повторяющиеся подключения в структуре HTML документа;
  • реализовали механику отложенной загрузки для некоторых медиафайлов;
  • доработали слайдеры на главной странице;
  • реализовали вывод Яндекс.Карты на странице «Контакты» через отложенную функцию;
  • добавили задержку для загрузки некоторых виджетов;
  • поправили вывод OpenGraph микроразметки для шэринга в социальных сетях;
  • отключили автообновление движка и плагинов для устойчивой работы системы.

Провели техническую оптимизацию верстки и доработали движок — проект стал работать ощутимо быстрее.

Кейс: ускорение сайта — kartel-masterov.ru

Как мы это сделали?
  • обновили библиотеку js-lazyload;
  • реализовали отложенную загрузку большинства статичных файлов, которые были добавлены после релиза проекта;
  • доработали способ инициализации некоторых новых слайдеров, внедрив механику отложенной загрузки;
  • вручную сжали некоторые медиафайлы, обновили формат некоторых изображений;
  • реализовали вызов виджета «Bitrix 24» через отложенную функцию;
  • реализовали вызов бейджиков в подвале через отложенную функцию;
  • прошлись по всем страницам портфолио и поправили шаблон вывода YouTube видео;
  • обработали некоторые изображения в папке /portfolio/ для оптимизации скорости загрузки;
  • перенесли js-библиотеки от новой верстки локально на хостинг вместо использования внешних CDN-серверов;
  • распределили подключение js-библиотек в компонент head.php и избавились от повторных обращений при запросе страницы;
  • обновили настройки виртуального сервера для улучшения времени отклика при запросе к сайту (пинг сервера).

Провели масштабную работу по оптимизации сложного фронтенда — результат превзошел все ожидания.

Кейс: ускорение сайта — oknaprofi.ru

Как мы это сделали?
  • обновили библиотеку для реализации js-lazyload механики;
  • перенесли большинство шрифтов и js-библиотек локально на хостинг вместо подключения через внешние CDN-сервисы;
  • реализовали механику отложенной загрузки для большинства статичных медиафайлов;
  • вручную сжали некоторые медиафайлы;
  • оптимизировали работу некоторых слайдеров;
  • реализовали отложенную загрузку Яндекс.Карты снизу в соответствующем блоке;
  • вычистили лишние элементы из шаблона для обеспечения быстрого отклика сервера.

Частично переверстав фронтенд и оптимизировав медиафайлы, мы добились заметного ускорения работы сайта.

Кейс: ускорение сайта на Webasyst — aston-pech.ru

Как мы это сделали?
  • добавили актуальную библиотеку js-lazyload;
  • реализовали отложенную загрузку для изображений товаров;
  • реализовали отложенную загрузку для большинства статичных медиафайлов;
  • вручную сжали некоторые медиафайлы;
  • доработали модуль всплывающего окна с информацией о товаре;
  • доработали слайдер на главной странице;
  • реализовали отложенную загрузку превьюшек видео с YouTube’а;
  • добавили анимацию загрузки для большинства элементов, к которым применяется механика отложенной загрузки, включая модуль динамической карты;
  • увеличили кулдаун на запуск динамической карты (с 3 до 5 секунд) и отложили инициализацию Yandex Maps API скрипта.

В результате сайт стал работать значительно быстрее.

Кейс: ускорение сайта на Webasyst — uni-tra.ru

Как мы это сделали?
  • добавили актуальную библиотеку js-lazyload;
  • реализовали механику отложенной загрузки для большинства статичных медиафайлов;
  • доработали функцию для инициализации слайдера в блоке «Наши клиенты»;
  • реализовали отложенную загрузку Яндекс.Карты на главной странице и на странице «Контакты»;
  • реализовали отложенную загрузку JivoSite виджета;
  • вырезали неиспользуемый HTML и JavaScript код.

Путем оптимизации фронтенда мы смогли добиться моментальной загрузки сайта.

Кейс: ускорение сайта на Webasyst — autovyhlop.ru

Как мы это сделали?
  • добавили актуальную библиотеку js-lazyload;
  • реализовали отложенную загрузку для большинства статичных медиафайлов;
  • вручную сжали некоторые медиафайлы;
  • реализовали отложенную загрузку превьюшек в шаблоне видео с YouTube’а;
  • реализовали отложенную загрузку логотипов брендов на главной странице;
  • добавили анимацию загрузки изображений в шаблоне «Примеры работ»;
  • реализовали отложенную загрузку Яндекс.Карт на главной странице и на странице «Контакты»;
  • реализовали отложенную загрузку JivoSite виджета;
  • добавили проверку на инициализацию Google reCAPTCHA v2 для снятия нагрузки с устройства пользователя;
  • обновили PHP до версии 7.4

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

Кейс: ускорение сайта на WordPress — мостехгаз.рф

Как мы это сделали?
  • добавили библиотеку js-lazyload;
  • перенесли шрифты «Roboto» и «Exo 2» локально на хостинг вместо подключения через Google Fonts API сервис;
  • реализовали механику отложенной загрузки для большинства статичных медиафайлов;
  • реализовали отложенную загрузку в списке товаров и вывел анимацию загрузки;
  • реализовали отложенную загрузку Яндекс.Карты на главной странице и на странице «Контакты»;
  • вырезали неиспользуемый HTML и JavaScript код;
  • обновили PHP до версии 7.4

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

Кейс: ускорение сайта на Joomla — 77professional.ru

Как мы это сделали?
  • добавили библиотеку js-lazyload;
  • перенесли шрифт «Open Sans» локально на хостинг вместо подключения через Google Fonts API сервис;
  • реализовали механику отложенной загрузки для большинства статичных медиафайлов;
  • вручную сжали некоторые медиафайлы;
  • оптимизировали работу некоторых слайдеров в модулях;
  • реализовали отложенную загрузку Яндекс.Карты на главной странице;
  • реализовали вызов некоторых виджетов через отложенную функцию;
  • перенесли некоторые скрипты и библиотеки локально на хостинг вместо подключения через внешний CDN;
  • перенесли некоторые стили и шрифты локально на хостинг вместо подключения через внешний CDN;
  • переделали механику просмотра видео с YouTube (для отложенной загрузки YouTube Player скриптов);
  • оптимизировали работу некоторых плагинов.

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

Кейс: ускорение сайта на DIAFAN CMS — trmet.ru

Как мы это сделали?
  • перенесли некоторые шрифты, стили и скрипты локально на хостинг вместо подключения через внешний CDN;
  • реализовали отложенную инициализацию скрипта Google Tag Manager и всех сопутствующих скриптов и библиотек;
  • добавили js-lazyload механику к некоторым медиафайлам;
  • вручную сжали некоторые медиафайлы.

Мы исправили некоторые ошибки и перенесли элементы фронтенда локально на виртуальный сервер.

Кейс: ускорение сайта на WordPress — emg-g.ru

Как мы это сделали?
  • добавили библиотеку js-lazyload;
  • перенесли некоторые шрифты и скрипты локально на хостинг вместо подключения через внешний CDN;
  • реализовали механику отложенной загрузки для изображений в баннере на главной и для других медиафайлов;
  • отложили вызов некоторых виджетов через функцию-таймаут;
  • оптимизировали работу некоторых плагинов.

Заметно ускорили проект благодаря механике отложенной загрузки.

Кейс: ускорение сайта — sedovcompany.ru

Как мы это сделали?
  • установили библиотеку для реализации отложенной загрузки js-lazyload;
  • добавили анимацию загрузки для некоторых элементов;
  • вручную сжали некоторые (новые) медиафайлы;
  • добавили интервальную функцию перезапуска js-lazyload скрипта для гарантии отображения отложенных медиафайлов;
  • по новому отцентровали svg-анимацию прелоадеров;
  • прошлись по всем страницам и добавили механику отложенной загрузки к большинству медиафайлов;
  • прошлись по всем блокам и добавили механику отложенной загрузки к большинству медиафайлов;
  • обновили шаблон списка статей, добавив отложенную загрузку вместе с анимацией (на странице «Статьи»);
  • добавили отложенную загрузку для изображений в слайдере «SEO-кейсы» на странице «Примеры SEO продвижения»;
  • добавили анимацию загрузки для Яндекс.Карт на странице «Контакты»;
  • добавили в конфиг слайдеров механику отложенной загрузки (для медиафайлов).

Наш сайт всегда работал очень быстро :)

Кейс: ускорение сайта — moskvakadastr.ru

Как мы это сделали?
  • перенесли шрифты («Montserrat» и «PT Serif») локально на хостинг с сайтом вместо подключения через внешний CDN-сервер;
  • реализовали механику отложенной загрузки (js-lazyload) для некоторых статичных медиафайлов;
  • доработали баннер на главной странице;
  • доработали слайдер с сертификатами в подвале;
  • реализовали отложенную загрузку у изображений в шаблоне кейсов (портфолио);
  • оптимизировали верстку у некоторых компонентов;
  • реализовали отложенную загрузку Яндекс.Карты на странице «Контакты»;
  • отложили вызов некоторых виджетов через функцию-таймаут;
  • минорно доработали функции для инициализации slick-slider’а.

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

Кейс: ускорение сайта на WordPress — oknozakaz.ru

Как мы это сделали?
  • реализовали механику отложенной загрузки (js-lazyload) для некоторых медиафайлов;
  • перенесли некоторые скрипты локально (вместо внешнего CDN);
  • реализовали отложенную загрузку Яндекс.Карты в подвале сайта;
  • сделали запуск некоторых виджетов через отложенную ассинхронную функцию;
  • обработали все медиафайлы в подключаемых компонентах;
  • вырезали строки запроса из внешних ресурсов для оптимизиции пинга (скорость ответа сервера);
  • оптимизировали порядок запуска некоторых php-скриптов.

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

Кейс: ускорение сайта на WordPress — okna78.com

Как мы это сделали?
  • перенесли некоторые скрипты и стили локально (вместо внешнего CDN);
  • реализовали механику отложенной загрузки (js-lazyload) для большинства статичных медиафайлов;
  • обработали все медиафайлы в подключаемых компонентах;
  • сжали некоторые медиафайлы вручную;
  • сделали запуск некоторых виджетов через ассинхронную функцию;
  • реализовали отложенную загрузку Яндекс.Карты в подвале;
  • поправили ссылки на некоторые медиафайлы во избежание 404 ошибки;
  • реализовали отложенную загрузку для баннера на главной странице;
  • вырезали строки запроса из внешних ресурсов для оптимизиции пинга (скорость ответа сервера);
  • оптимизировали порядок запуска некоторых php-скриптов.

Внесли ряд технических доработок в шаблон.

Кейс: ускорение сайта на Joomla — formula03.ru

Как мы это сделали?
  • добавили библиотеку js-lazyload;
  • перенесли шрифты «Montserrat», «PT Sans» и «Playfair» в локальную директорию для распределения загрузки;
  • реализовали отложенную загрузку для большинства статичных медиафайлов;
  • вручную сжали некоторые медиафайлы;
  • реализовали отложенную загрузку фото в слайдере на главной странице;
  • реализовали отложенную загрузку Яндекс.Карты на странице «Контакты»;
  • реализовали отложенную загрузку JivoSite виджета.

Перенесли большинство необходимых файлов локально и серьезно доработали шаблон сайта.

Кейс: ускорение сайта на WordPress — profplotter.ru

Как мы это сделали?
  • добавили актуальную библиотеку js-lazyload;
  • перенесли все шрифты локально на хостинг вместо подключения через внешний CDN;
  • реализовали отложенную загрузку изображений на главной странице;
  • реализовали отложенную загрузку изображений в каталоге;
  • сжали некоторые медиафайлы без потери качества (под размеры внутри верстки);
  • оптимизировали работу динамического слайдера (карусель);
  • реализовали вызов виджета Bitrix24 через отложенную функцию.

Оптимизировали товарный шаблон и методы вывода динамических элементов.

Кейс: ускорение сайта на Webasyst — lotoscompany.ru

Как мы это сделали?
  • добавили библиотеку js-lazyload;
  • перенесли некоторые шрифты, стили и скрипты локально на хостинг вместо подключения через внешний CDN;
  • реализовали отложенную загрузку для большинства статичных медиафайлов;
  • вручную сжали большинство медиафайлов без потери качества;
  • реализовали отложенную загрузку Яндекс.Карты в подвале сайта;
  • реализовали вызов некоторых виджетов через отложенную функцию.

Таким образом, мы значительно облегчили сайт и оптимизировали скорость загрузки страниц.

Кейс: ускорение сайта — 3дклимат.рф

Как мы это сделали?
  • добавили библиотеку js-lazyload;
  • перенесли большинство шрифтов, стилей и скриптов локально на хостинг вместо подключения через внешний CDN;
  • реализовали отложенную загрузку для большинства статичных медиафайлов;
  • вручную сжали большинство медиафайлов без потери качества;
  • реализовали отложенную загрузку Яндекс.Карты в подвале сайта.

Доработали большинство элементов внутри верстки.

Кейс: ускорение сайта на Joomla — bizperevod.com

Как мы это сделали?
  • добавили библиотеку js-lazyload;
  • перенесли некоторые шрифты, стили и скрипты локально на хостинг вместо подключения через внешний CDN;
  • реализовали отложенную загрузку для большинства статичных медиафайлов;
  • вручную сжали большинство медиафайлов;
  • реализовали вызов некоторых виджетов через отложенную функцию.

Исправили технические ошибки в шаблоне и реализовали механику отложенной загрузки.

Кейс: ускорение сайта на Joomla — рус-контейнер.рф

Как мы это сделали?
  • добавили библиотеку js-lazyload;
  • перенесли некоторые шрифты, стили и скрипты локально на хостинг вместо подключения через внешний CDN;
  • реализовали отложенную загрузку для большинства статичных медиафайлов;
  • доработали шаблон карточки контейнера;
  • реализовали отложенную загрузку Яндекс.Карты в подвале сайта;
  • реализовали вызов некоторых виджетов через отложенную функцию;
  • донастроили структуру движка для улучшения отклика сервера;
  • обновили PHP до версии 7.4

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

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