Как сделать быстрый сайт?
1 октября 2020
Автор: Турченко Иван
В предыдущей нашей статье мы рассказывали о том, какие существуют сервисы для проверки скорости вашего сайта. В этой статьей мы хотели бы поделиться секретами, как нам удалось достичь высоких показателей Google PageSpeed в нашем готовом решении RAPID: очень быстрый магазин.
Клиентская оптимизация
Основное время загрузки страницы – это загрузка стилей, скриптов, изображений, шрифтов, рендеринг (отрисовка элементов браузером) и выполнение js-кода. При вёрстке шаблона мы тщательно прорабатывали каждый показатель.
1. Использование современных форматов изображений.
SVG для иконок на сайте. WebP для изображений. На страницах сайта картинки подгружаются только в нужном размере.
2. Отдельная версия для компьютера и для мобильных устройств.
В отличие от адаптивных сайтов, где грузятся скрипты, картинки и стили сразу для всех версий экранов, такое разделение позволяет сэкономить на объёме загружаемых пользователем данных.
3. Использование javascript-фреймворка Vue.js
Позволяет писать качественный, понятный, а самое главное быстрый код. С библиотеками типа jQuery говорить о скорости не приходится.
4. Использование отдельных js и css файлов для разных страниц сайта.
Нет избыточного кода и ,соответственно, меньше объём данных и выше скорость работы.
5. Использование critical css
Позволяет отрисовать первую видимую часть страницы. Загружается inline-ом, поэтому выполняется очень быстро.
6. Lazy Load
Картинки на странице подгружаются только тогда, когда это необходимо пользователю.
7. Отказ от системных файлов 1С-Битрикс.
Стандартно в платформе заложены механизмы сжатия, объединения стилей/скриптов, которые по-своему удобны, но с которыми сложно работать, если говорить об оптимизации. В решении мы полностью убираем все лишние js, css и шрифты, которые не используются, но при этом платформа их всё равно подключает.
8. Настройка «Скрипты с отложенной загрузкой»
Зачастую на сайте размещают много разных виджетов, онлайн-консультантов и прочие скрипты, которые могут отрицательно влиять на скорость загрузки страницы. Не всегда эти скрипты требуют мгновенной загрузки. Например, не факт, что покупатель, зайдя на сайт, тут же будет писать в онлайн-чат. Поэтому подобные скрипты вы можете разместить в настройке модуля "Скрипты с отложенной загрузкой (5 секунд)" , и тогда они будут выполнены только через 5 секунд после загрузки страницы у пользователя.
Серверная оптимизация
По требованиям PageSpeed скорость ответа сервера должна быть в районе 200-500 мс. Поэтому крайне важно, чтобы код проекта был оптимизированным и работал быстро.
1. Правильная настройка кеширования компонентов.
Зачастую компоненты генерируют ненужный кеш, зависящий от параметров, которые на проекте не используются (например, отдельный кеш для разных групп пользователей).
Также время кеширования может быть не оптимальным. Или же кеш у компонентов может сбрасываться постоянно при любых изменениях, тем самым снижая свою эффективность.
В своём решении мы выставили оптимальные настройки кеширования, которые позволяют достичь быстрой скорости генерации страниц. Также мы реализовали свои собственные компоненты, которые выбирают только необходимые данные, тем самым снижая количество запросов к базе данных.
2. Генерация кеша собственных компонентов в фоновом режиме.
Для вывода различных списков товаров на главной странице, странице бренда и в блоках с сопутствующими товарами, мы использовали свои компоненты. Данные компоненты сбрасывают кеш только по времени (1 раз в час) и не меняют его сразу же при любом изменении в каталоге. Но в случае, если произошло какое-то изменение в настройках показа данных блоков, то кеш для этих блоков будет создан в фоновом режиме (cron). Таким образом, при заходе на страницу товара кеш у этих блоков уже будет и соответственно скорость загрузки страницы будет выше.
3. Ресайз и конвертация картинок в фоновом режиме
Ещё одна частая проблема – это большое время генерации страницы, если меняются картинки товаров. Время ресайза картинок очень сильно зависит от формата и веса картинки, а также от мощности сервера. И зачастую пользователь может попасть на страницу с таким товаром, ожидая загрузки страницы по 10-20 секунд.
В решении мы ввели контроль за всеми изменяемыми файлами на страницах каталога, новостей и прочих разделов. При изменении файлов в фоновом режиме будет происходить генерация всех необходимых для сайта размеров, а также их конвертация в формат WebP. Таким образом, мы исключаем проблемы с долгой загрузкой страниц сайт по причине отсутствия изображений нужного формата.
Также в документации к решению мы указали рекомендации по настройкам и действия, которые могут помочь ускорить работу вашего сайта.
Отдельно хотим отметить, что решение не работает с композитным режимом, т.к. в этом нет необходимости. По опыту клиентов, которые приобрели и используют решение на реальных проектах, скорость сайта стала гораздо выше, чем на предыдущей версии сайта со всеми включенными механизмами оптимизации и композитным режимом вместе взятыми.
Благодаря грамотной разработке с использованием современных инструментов мы добились высокого быстродействия по данным PageSpeed Insight:
Клиентская оптимизация
Основное время загрузки страницы – это загрузка стилей, скриптов, изображений, шрифтов, рендеринг (отрисовка элементов браузером) и выполнение js-кода. При вёрстке шаблона мы тщательно прорабатывали каждый показатель.
1. Использование современных форматов изображений.
SVG для иконок на сайте. WebP для изображений. На страницах сайта картинки подгружаются только в нужном размере.
2. Отдельная версия для компьютера и для мобильных устройств.
В отличие от адаптивных сайтов, где грузятся скрипты, картинки и стили сразу для всех версий экранов, такое разделение позволяет сэкономить на объёме загружаемых пользователем данных.
3. Использование javascript-фреймворка Vue.js
Позволяет писать качественный, понятный, а самое главное быстрый код. С библиотеками типа jQuery говорить о скорости не приходится.
4. Использование отдельных js и css файлов для разных страниц сайта.
Нет избыточного кода и ,соответственно, меньше объём данных и выше скорость работы.
5. Использование critical css
Позволяет отрисовать первую видимую часть страницы. Загружается inline-ом, поэтому выполняется очень быстро.
6. Lazy Load
Картинки на странице подгружаются только тогда, когда это необходимо пользователю.
7. Отказ от системных файлов 1С-Битрикс.
Стандартно в платформе заложены механизмы сжатия, объединения стилей/скриптов, которые по-своему удобны, но с которыми сложно работать, если говорить об оптимизации. В решении мы полностью убираем все лишние js, css и шрифты, которые не используются, но при этом платформа их всё равно подключает.
8. Настройка «Скрипты с отложенной загрузкой»
Зачастую на сайте размещают много разных виджетов, онлайн-консультантов и прочие скрипты, которые могут отрицательно влиять на скорость загрузки страницы. Не всегда эти скрипты требуют мгновенной загрузки. Например, не факт, что покупатель, зайдя на сайт, тут же будет писать в онлайн-чат. Поэтому подобные скрипты вы можете разместить в настройке модуля "Скрипты с отложенной загрузкой (5 секунд)" , и тогда они будут выполнены только через 5 секунд после загрузки страницы у пользователя.
Серверная оптимизация
По требованиям PageSpeed скорость ответа сервера должна быть в районе 200-500 мс. Поэтому крайне важно, чтобы код проекта был оптимизированным и работал быстро.
1. Правильная настройка кеширования компонентов.
Зачастую компоненты генерируют ненужный кеш, зависящий от параметров, которые на проекте не используются (например, отдельный кеш для разных групп пользователей).
Также время кеширования может быть не оптимальным. Или же кеш у компонентов может сбрасываться постоянно при любых изменениях, тем самым снижая свою эффективность.
В своём решении мы выставили оптимальные настройки кеширования, которые позволяют достичь быстрой скорости генерации страниц. Также мы реализовали свои собственные компоненты, которые выбирают только необходимые данные, тем самым снижая количество запросов к базе данных.
2. Генерация кеша собственных компонентов в фоновом режиме.
Для вывода различных списков товаров на главной странице, странице бренда и в блоках с сопутствующими товарами, мы использовали свои компоненты. Данные компоненты сбрасывают кеш только по времени (1 раз в час) и не меняют его сразу же при любом изменении в каталоге. Но в случае, если произошло какое-то изменение в настройках показа данных блоков, то кеш для этих блоков будет создан в фоновом режиме (cron). Таким образом, при заходе на страницу товара кеш у этих блоков уже будет и соответственно скорость загрузки страницы будет выше.
3. Ресайз и конвертация картинок в фоновом режиме
Ещё одна частая проблема – это большое время генерации страницы, если меняются картинки товаров. Время ресайза картинок очень сильно зависит от формата и веса картинки, а также от мощности сервера. И зачастую пользователь может попасть на страницу с таким товаром, ожидая загрузки страницы по 10-20 секунд.
В решении мы ввели контроль за всеми изменяемыми файлами на страницах каталога, новостей и прочих разделов. При изменении файлов в фоновом режиме будет происходить генерация всех необходимых для сайта размеров, а также их конвертация в формат WebP. Таким образом, мы исключаем проблемы с долгой загрузкой страниц сайт по причине отсутствия изображений нужного формата.
Также в документации к решению мы указали рекомендации по настройкам и действия, которые могут помочь ускорить работу вашего сайта.
Отдельно хотим отметить, что решение не работает с композитным режимом, т.к. в этом нет необходимости. По опыту клиентов, которые приобрели и используют решение на реальных проектах, скорость сайта стала гораздо выше, чем на предыдущей версии сайта со всеми включенными механизмами оптимизации и композитным режимом вместе взятыми.
Благодаря грамотной разработке с использованием современных инструментов мы добились высокого быстродействия по данным PageSpeed Insight:
Статья полезна для
Предлагаем еще прочесть
