9 проверенных способов улучшить скорость загрузки сайта

Мы живём в эпоху высоких скоростей. И это справедливо как по отношению к потреблению информации, так и ко всему остальному. Скорость загрузки сайта в google page speed имеет важнейшее значение.

При медленной выгрузке не избежать проблем с пользовательским опытом, конверсиями. А это оказывает негативное влияние на позиции сайта в поиске. Человек, оказавшийся на странице выдачи, с большей вероятностью обратится к другому ресурсу, чем дождётся завершения выгрузки.

Если вы занимаетесь продвижением своего сайта с помощью seo или контекстной рекламы, позаботьтесь о том, чтобы сайт загружался быстро.

Как проверить скорость загрузки сайта?

Проверка скорости загрузки сайта выполняется такими сервисами – SpeedTest.me, WebPageTest, ToolsPingdom.com. Они посчитают, какое количество времени потребовалось на выгрузку сайта, а также количество запросов, их размер, уровень производительности, распределение ресурсов по запросам и весу.

Google PageSpeed Insights

Google PageSpeed Insights измеряет скорость, производя это со среднестатистического устройства и скорости интернета по всему миру. Показатели проверки всегда приближены к средним. Это значит, что, если на сайт заходят с медленных устройств и интернета, то на выгрузку действительно может тратиться до 30 секунд!

GT metrix.com

GT metrix.com делает замер для версии персонального компьютера по умолчанию. Гугл скорость загрузки сайта демонстрирует замер для мобильной версии. А значит, если открыть замер от Гугл, то вы увидите, что на выгрузку потребовалось 4 секунды.

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

Яндекс Метрика и Google Analytics

Такие системы аналитики содержат отчёты по скорости выгрузки. Они собирают информацию для них от пользователей определённого ресурса. Их можно применять для того, чтобы поделить данные на сегменты, выполнив анализ скорости загрузки сайта для пользователей из разных регионов с разными устройствами, браузерами, операционными системами.

Какие значения показателей производительности считаются нормальными?

Total Blocking Time (TBT) или общее время блокировки. В это время на сайте нельзя ничего сделать. Он загружается, пользователь ожидает. Вы можете попробовать ввод с клавиатуры, кликнуть или тапнуть, а получите эффект притормаживания, зависания. Ориентиры следующие:

·        0-300 мс (зелёное, быстро).

·        300-600 мс (оранжевое, нормально).

·        Более 600 мс (красное, медленно).

Largest Contenstful Paint (LCP) – отрисовка крупного контента. Это момент, когда самая большая часть сайта появляется на экране. Тогда пользователь понимает, что ресурс визуально ведёт взаимодействие. В Гугле работали над таким показателем вместе с группой Web Perfomance Working Group W3C. В её составе Mozilla Foundation, Facebook, Intel Corporation, Airbnb Inc. Ориентиры следующие:

·        0-2 секунды (зелёный, быстро).

·        2-4 секунды (оранжевый, нормально).

·        Более 4 секунд (красный, медленно).

Cumulative Layout Shift (CLS) – совокупный сдвиг макета. Здесь всё несколько сложнее. В данном замере идёт сложение баллов от любого сдвига на странице в процессе выгрузки. Это тот момент, когда вход выполнен, вы начинаете читать контент и он резко куда-то исчезает. Реклама сверху прогрузилась и сдвинула важную информацию вниз или закрыла её наполовину. Если такой сдвиг большой, то показатель посещаемости будет низким. Ориентиры такие:

·        0-0,5 (зелёный, хорошо).

·        0,6-1 (красный, плохо).

TBT

Total Blocking Time (TBT) – метрика, измеряющая количество времени между FCP и TTI. В этот период времени основной поток блокируется и не реагирует на действия пользователя.

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

При длительной задаче (больше 50 мс) вероятно, что пользователь увидит задержку и воспримет страницу как зависающую, глючную.

Время блокировки – продолжительность более 50 мс. И общее время блокировки представляет собой сумму интервалов для каждой задачи, которая возникает между TTI и FCP.

LCP

LCP (Largest Contentful Paint) – время рендеринга большого элемента, заметного в области просмотра пользователем. Это изображение, текстовый блок или иной контент. При этом, принимаются во внимание размеры элементов, заметные для пользователя. При частичном скрытии элемента невидимые части не принимаются в расчёт.

Лучший метод определить время отображения главного содержимого страницы – использование LCP. Происходит это следующим образом: в процессе выгрузки контент может меняться, поэтому при появлении нового большого элемента браузер отправляет Perfomance Entry типа largest-contentful-paint. При взаимодействии пользователя со страницей отправка метрики останавливается. А нужное значение – время последнего отправленного события.

Отрисовка наибольшего элемента может происходить и до полной загрузки сайта. Например, когда вы заходите в Инстаграм, самый большой элемент загружается почти сразу, а остальной контент появляется позже.

CLS

CLS представляет собой совокупное смещение макета за всё время посещения страницы. Значение показателя может равняться нулю или другому положительному числу. Этот показатель играет важную роль, так как смещение элементов страницы при выгрузке может снизить удобство для пользователей. Проверить этот показатель можно путём проведения разных действий на странице и обращением внимание на значения CLS.

Советы по ускорению сайта

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

·        Использование кэширования для улучшения скорости загрузки страниц.

·        Уменьшение количества HTTP-запросов.

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

·        Размещение CSS файлов в начале страницы.

·        Настройка отложенной загрузки изображений.

·        Минимизация файлов JS/CSS.

·        Откладка загрузки скриптов.

·        Использование Gzip-сжатия.

·        Выбор подходящего тарифа на хостинге.

Используйте кэширование

Кэширование – идеальное решение для кардинального ускорения работы сайта и быстрой загрузки страницы. Чтобы реализовать этот метод, информация на сервере должна совпадать с данными кэша. Так как большая часть компонентов статичная, используется декларативный срок актуальности данных.

Уменьшайте количество HTTP-запросов

При объединении компонентов для загрузки в один файл специалисты уменьшают их количество. Таким образом, количество HTTP-запросов становится ниже. Для минимизации показателя нужно собрать таблицы стилей в один файл, библиотеки – в другой. Также возможно применение специальных инструментов. Приложение Minify минимизирует статистику и HTML. Для устранения неудобств участки кода нужно модифицировать.

Хорошим решением станет объединение картинок SVG-формата. Это особый формат в том, что его можно править в стандартных редакторах. Это значит, что его можно будет открыть через любой редактор кода.

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

Оптимизируйте размер и формат изображений

Размер изображений играет важнейшее значение. Если вес фото меньше, то загрузится оно быстрее. Облегчить картинки можно установив формат WebP. Но следует такие проверить скорость загрузки. Изображение должно быть большим, чётким, лёгким.

Вот несколько ценных советов по оптимизации скорости загрузки:

·        Название фото name.jpg/name.jpeg/name.png. Язык лучше выбирать именно английский, поскольку он подходит для всех браузеров, сайтов, систем. Имя на кириллице уже не актуально, особенно, если вы хотите занимать высокие позиции в Petal Search, Google, Yahoo.

·        Русское название имеет место быть, но не все устройства его поддержат. Поэтому иногда актуально использование символов-значков, как в Тильде.

·        Все буквы прописные, заглавных нет. Важно, чтобы каждое фото имело своё оригинальное название. Нельзя иметь две разные фотографии с одним и тем же именем. Расширение – jpg, jpeg, png.

Разместите CSS файлы в начале страницы

Выполнить это можно одним из следующих способов:

·        Написать стилевое описание в самом элементе. Такой метод пригодится, если элемент – один единственный в HTML-документе и требует стилевого описания.

·        Написать стилевое описание для похожих HTML элементов документа. Этот способ себя оправдывает, если стиль страницы имеет принципиальное отличие от общего дизайна.

·        Вынести стилевое описание HTML элементов в CSS файл. Это даст возможность управлять дизайном сайта, каждой страницей. Данный метод эффективен с применением таблицы каскадных стилей.

Настройте отложенную загрузку изображений

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

Начнём с атрибута Loading. С его помощью можно задать условия для загрузки. Его устанавливают для изображений с тегами img и медиа с тегом iframe. Он поддерживает такие значения для повышения скорости загрузки:

·        LAZY. Загрузка асинхронного типа при необходимости в изображении.

·        EAGER. Немедленная загрузка.

·        AUTO. Загрузка по усмотрению браузера.

Для iframe код будет таким же.

Иногда на сайте используются скрытые фреймы, например, для аналитики. Для них отложенная загрузка не распространяется. Хром определяет, является ли фрейм скрытым по таким критериям:

·        Ширина и высота – 4рх и менее.

·        Применяемые свойства – hidden, none, visibility.

·        Расположение за пределами экрана при помощи X и Y.

При соблюдении одного из условий Chrome считает фрейм скрытым и асинхронно не загружает его.

Минимизируйте файлы JS и CSS

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

·        Используйте краткие значения цветов.

·        Объединяйте свойства, которые повторяются между собой.

·        Пользуйтесь сокращённым синтаксисом.

·        Объединяйте похожие значения.

·        Опускайте лишние нули.

·        Опустите единицы измерения для нулевых значений.

·        Опустите последнюю точку с запятой.

·        Удалите комментарии из рабочих файлов.

·        Удалите ненужные пробелы.

Отложите загрузку скриптов

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

Ещё один эффективный метод, как ускорить загрузку сайта – отложенная загрузка стороннего контента. Он подойдёт для рекламных объявлений. Альтернативой может стать загрузка стороннего контента лишь тогда, когда пользователи прокручивают страницу до соответствующего раздела.

Используйте Gzip-сжатие

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

Таким вид сжатия продуктивен, так как задействует средства сервера и оказывает на него дополнительную нагрузку. А включить такую компрессию возможно файлом .htaccess, который отвечает за конфигурацию сервера. Он и отвечает на вопрос, как правильно увеличить скорость загрузки.

Выберите подходящий тариф на хостинге

Хостинг бывает двух видов – платный и бесплатный. Какой лучше выбрать пользователь решает сам. Если проект серьёзный, потребуется более серьёзный виртуальный хостинг, а коммерчески успешный требует уже больших затрат для повышения скорости загрузки сайта.

В среднем на 2022 год расценки следующие:

·        Виртуальный хостинг (300-350 рублей/месяц).

·        VPS/VDS (650-850 рублей/месяц).

·        Облачная инфраструктура (5000-9000 рублей/месяц).

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

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