Каждый владелец сайта ожидает высокой конверсии, хороших продаж, положительных результатов. В то же самое время – пользователь этого же ресурса ищет ответы на свои вопросы, решения своих личных проблем и удовлетворения своих потребностей. Чтобы обе стороны были в полной мере удовлетворены, необходимо обеспечить максимально возможный уровень качества и скорости ресурса.
Сегодня мы поговорим именно об этом. Как и чем проверить скорость сайта?
В компании Amazon провели исследования и сделали вывод, что промедление загрузки в 100 мс приводит к уменьшению продаж на 1%. При чистой прибыли 2,5 млрд\год – большая проблема, как оказалось).
Хорошую скорость загрузки нужно обеспечить не только стационарным desktop пользователям со стабильным быстрым интернетом, но и аудитории mobile версии с различными возможностями сети 3G, 4G и т.д.
Что же происходит в момент загрузки?
Ниже приведен список процессов, из которых первые четыре осуществляются сервером, а остальные – уже клиентом. Процессы могут происходить одновременно или же в другом порядке, но суть не меняется:
- Связь с сервером.
- Установка безопасного соединения.
- Запрос по адресу HTML-страницы и ожидание сервера.
- Загрузка HTML.
- Анализ HTML-документа браузером
- Разбор CSS, выполнение JS-кодов.
- Рендеринг отображения страницы и активация Js.
- Подгрузка шрифтов.
- Отображение картинок и элементов страниц.
- Отображения полной страницы, выполнение отсроченных скриптов и кодов.
Первое, что мы измеряем – это:
- Временной отрезок от начала загрузочного процесса и до получения первых данных.
- Процесс прорисовки страницы.
- Загрузка основных элементов.
- Окончательная загрузка.
Самый доступный способ проверки скорости – с помощью браузера Chrome. Во вкладке Network просчитан тайминг по всем показателям. В таблице вы можете четко отследить время загрузки каждого элемента, кликнув на него.
Чтобы оценить скорость клиентской части, используйте такие ресурсы:
Хорошими показателями считаются те, где рендеринг занимает около 1 секунды, а полная загрузка – до 5 секунд.
Далее мы опишем основные моменты по оптимизации сайта:
- Оптимизация баз данных ( DBMS).
Частой причиной медленной работы веб-приложения является обращения к базам данных и ожидания ответов от них. Управление схемами БД достаточно непросто, но для получения необходимой скорости нужно выявить те запросы, которые требуют большего времени и переработать их.
- Выбор движка и корректная работа с ним (Иногда промедления происходят по причине установки новых плагинов, которые не свойственны вашему движку).
- Серверное кэширование. В случае, когда на выполнение результата необходимо затратить немалые ресурсы, то результат логично закешировать, что сохранит вам дополнительные доли секунд. В клиентскую оптимизацию входит еще кэширование хедера, где браузер запоминает шрифты, код, скрипты с обращением к серверу только единожды.
- Оптимизация сети. Правильно настроенный и обновляемый TCP, TLS обеспечит не только безопасное соединение , но и сведет к минимуму потраченное на это время. С этой целью также выпущена новая версия HTTP\2. По данным за февраль 2019 года на ней сидят уже около трети самых посещаемых ресурсов.
- Оптимизация изображений. Весомая часть сайта заполняется изображениями, которые должны быть в правильном формате и максимально сжаты. Основные форматы изображений – PNG, JPEG, SVG, WebP. Соответственно и инструменты для их сжатия – OptiPNG, JPG package (Mozilla)
- Сжатие текстовых данных. Настроить максимальную степень сжатия текстовых данных, используя статический метод компрессии (предварительно рекомендуется провести минификацию данных).
- СВТ (сетевая доставка контента) – ускоряет работу ресурсов за счет разгрузки трафика, распределяя его по другим серверам.
P.S После того, как вы успешно оптимизировали ваш сайт и добились высокой скорости загрузки, важно не забывать, что все очень часто и быстро меняется. Мы что-то добавляем, удаляем, обновляем – каждый из этих процессов может повлиять на скорость! Поэтому мы рекомендуем периодически проверять скорость загрузки и, при необходимости, подчищать за собой “висяки” 😉
23 Окт 2024
219