Время загрузки веб-сайта в 2022 году: насколько быстро должен загружаться ваш сайт?

Веб-сайт с быстрой загрузкой теперь является приоритетом для бизнеса в 2021 году.

Низкая скорость сайта вредит SEO и интернет-маркетингу, так как влияет на ваш рейтинг в Google, пользовательский опыт и конверсии. С июня 2021 года Google обновил алгоритм своей поисковой системы и официально сделал Core Web Vitals большая часть рейтинга SEO.

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

Какое время загрузки сайта?

Время загрузки веб-сайта — это время, необходимое для того, чтобы содержимое веб-сайта было видно пользователю. В идеале загрузка сайт должна занимать 2-3 секунды.

Вероятность отказа увеличивается на 32% при увеличении времени загрузки страницы с 1 до 3 секунд. Веб-сайты с более быстрым временем загрузки, как правило, имеют более высокие показатели взаимодействия с пользователем и конверсии.

Время загрузки веб-сайта менее 3 секунд является идеальным

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

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

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

1. Изображения

Изображения и видео являются основной причиной низкой скорости загрузки сайта, поскольку они обычно являются самыми большими файлами. Одно изображение с высоким разрешением может легко превышать 3 МБ.

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

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

Итак, оптимизация изображений — это первое, с чего можно начать ускорять работу вашего сайта.

Уменьшить размер изображения

Уменьшите размер изображения, обрезав или изменив размер, чтобы они соответствовали странице, вместо того, чтобы браузер уменьшал их.

Поэтому, если размер отображения вашего изображения составляет всего 800 x 600 пикселей, вам не нужно загружать изображение размером 2000 x 3000 пикселей.

Быстрый способ узнать размер отображаемого изображения — это проверить его в браузере, проверить «отображаемый размер» .

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

Использование JPEG для большинства изображений

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

Хорошее практическое правило — иметь большинство изображений в формате JPEG вместо PNG.

  • JPEG использует сжатие с потерями, что означает, что некоторая информация теряется или удаляется из изображения. Таким образом, в результате получается меньший размер файла и меньший формат изображения.
  • PNG использует сжатие без потерь, которое не приводит к потере данных. Таким образом, качество сохраняется на высшем уровне. Это также означает больший размер файла. Обычно PNG используется для значков и сложных изображений, таких как логотипы, для которых требуется прозрачный фон.

Использование меньших форматов изображений JPEG поможет вашей странице загружаться быстрее.

Тестирование скорости: используйте каскадную диаграмму для анализа времени загрузки страницы каждого ресурса.

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

Форматы изображений нового поколения

Преобразование изображений в форматы изображений следующего поколения может еще больше уменьшить размер файлов. Использование изображения в WebP или JPEG 2000 может уменьшить размер файла изображения на 25–50%.

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

CSS-спрайты изображений

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

2. Контент с блокировкой рендеринга

Контент, блокирующий рендеринг, — это такие вещи, как Javascript и CSS, которые необходимо сначала загрузить, прежде чем можно будет загрузить остальную часть вашей страницы . Вот почему это называется блокировкой рендеринга.

Если вы работали над основные веб-жизненно важные показатели, вы могли встретить это предупреждение о скорости в Google PageSpeed ​​Insights.

Это основная причина медленной загрузки страницы, а также одна из наиболее сложных проблем, которые необходимо исправить. Вы можете узнать, какие ресурсы блокируют рендеринг, используя Google PageSpeed ​​InsightsGTmetrix, и большинство инструментов для тестирования скорости.

До

После

Я использовал ряд методов оптимизации для устранения ресурсов, блокирующих рендеринг, с 3,7 до 0,15 с, включая асинхронную загрузку, кеширование, минификацию и удаление плагинов.

3. Чрезмерное количество HTTP-запросов.

Когда браузер посещает URL-адрес, он начинает анализ HTML-документа и отправляет HTTP-запросы для доступа к содержимому веб-сайта.

Типичный HTML-документ включает около 70 HTTP-запросов для загрузки различных скриптов, изображений, файлов CSS и других ресурсов, необходимых для страницы.

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

Сокращение файлов CSS и Javascript — один из способов уменьшить количество запросов. В этом помогает, например, объединение нескольких файлов CSS в один файл. Браузеру нужно запросить только один файл, а не несколько файлов.

4. JavaScript

JavaScript — наиболее часто используемый язык сценариев для веб-сайтов и веб-приложений. Он часто используется для любых взаимодействий на странице, таких как анимация или интерактивные элементы.

JavaScript также может замедлить работу страницы. Файлы JavaScript с блокировкой рендеринга не позволяют браузеру загружать страницу до тех пор, пока он не обработает скрипт.

Асинхронная загрузка

Чтобы исправить это, используйте асинхронную загрузку для любого JavaScript, который не важен для основного содержимого страницы. Добавление атрибута «async» к сценарию позволяет браузеру загружать остальную часть страницы перед синтаксическим анализом сценария.

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

Уменьшение Javascript

Сокращение JavaScript включает удаление всех пробелов и комментариев, чтобы уменьшить размер файла. Конкатенация включает объединение нескольких скриптов в один файл для уменьшения количества HTTP-запросов.

Если вы используете WordPress, вы можете использовать плагины оптимизации, такие как WP Rocket, Autoptimize и Perfmatters. Эти плагины помогают минимизировать и сжать JavaScript и CSS для более быстрой загрузки.

5. Время ответа сервера

Медленный сервер — основная причина низкой скорости сайта. Когда кто-то посещает ваш сайт, браузер делает запрос и ждет ответа от сервера.

Браузеру обычно требуется от 69 до 75 запросов к серверу для загрузки страницы. Задержка всего в несколько миллисекунд для каждого запроса может значительно увеличить общее время загрузки.

Какое время отклика у сервера хорошее?

Время ответа сервера 350 мс или меньше считается быстрым, а время ответа 800 мс — медленным. Ниже показано время первого байта для Siteground.

Время до первого байта

Время между первым запросом и первым ответом называется временем до первого байта (TTFB).

Медленное время отклика сервера (SRT) может быть связано с качеством вашего веб-хостинга. Плохие службы веб-хостинга не имеют достаточных ресурсов для обработки трафика веб-сайтов.

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

Лучшее решение — перейти на более надежный веб-хостинг.

Если у вас есть надежная служба веб-хостинга, но по-прежнему наблюдается медленное время отклика сервера, возможно, вам придется попробовать использовать другой веб-сервер. Apache был самым популярным типом веб-серверов на протяжении десятилетий, но недавно его превзошел Nginx.

Около 34% веб-сайтов обслуживаются с помощью веб-серверов Nginx. Еще 33,4% используют Apache. Однако различные сравнительные тесты показали, что веб-сервер Litespeed, как правило, обеспечивает более высокую производительность для сайтов WordPress.

Смотрите еще

Результативная оптимизация и продвижение сайта от компании «Site Ok»: 2 фактора для выгодного сотрудничества

Эффективное использование потенциала современных информационных технологий и сети интернет позволяет достигнуть максимально высоких результатов при ведении маркетинговой деятельности абсолютно всех представителей бизнеса. Невозможно поспорить с тем фактом, что своевременно и грамотно представленная информация открывает неограниченные возможности по привлечению внимания потребителей выпускаемой продукции, покупателей реализуемых товаров, и пользователей оказываемых услуг. Именно поэтому собственный сайт, созданный в […]

10 лучших бесплатных генераторов диаграмм HTML5 и SVG

Диаграммы и графики — это самый простой способ визуального представления данных. Люди часто используют диаграммы и графики в информационных панелях , таблицах, отчетах и ​​виджетах — все эти компоненты интерфейса содержат диаграммы. Итак, давайте взглянем на десять лучших бесплатных генераторов диаграмм HTML5 и SVG, которые можно встроить в ваш сайт. RAWGraphs Создавайте веб-визуализации из файлов CSV, Excel или JSON. RAWGraphs позволяет экспортировать визуализации в виде […]