Как увеличить скорость загрузки сайта,

В статье вы найдете подробную инструкцию по оптимизации скорости загрузки сайта.  Если вы хотите оптимизировать скорость загрузки сайта, важно не только настроить сервер, но и выбрать CMS. В этой статье вы узнаете, как ускорить загрузку страниц на WordPress, Joomla, Drupal, Битрикс и NetCat. Для начала давайте разберемся, что именно вызывает у поисковых систем снижение скорости загрузки сайта.

Далее подробно рассмотрено:

  • Как определить время загрузки сайта
  • Какие показатели скорости страницы влияют на ее видимость в Яндексе и Гугле
  • Пример из практики: как время загрузки влияет на поведенческие факторы
  • Как понять, что оптимизировать с помощью webpagetest.org

Время загрузки


Не все понимают, что такое время загрузки и что включает в себя это понятие. Давайте разберемся, что это такое.

Общее время загрузки страницы — это  время, затраченное на загрузку всех элементов страницы из запроса на сервер: время соединения DNS, соединение TCP, редиректы, загрузка всех скриптов, изображений и так далее.

С другой стороны, время передачи можно разделить на следующие составляющие:

А) Время отклика сервера — насколько быстро сеть и сервер вернули первый байт запрошенного вами HTML-файла. Сюда входят DNS, время соединения TCP и время первого TTFB (время первого байта). Чем дольше это время, тем дольше пользователь будет видеть белый экран.

Б) TTFB (Время первого байта) — самый важный показатель, т.е. время, необходимое серверу для обработки запроса и отправки ответа браузеру. Например, при запросе php-страницы она обрабатывается специальным интерпретатором, привязанным к базе данных — и только после этого будет отправлен ответ.
На это время в первую очередь влияют настройки сервера, оптимизация кода сайта, CMS и база данных.
Это также влияет на расстояние клиента от сервера и количество путей, по которым проходит пакет данных. Чем дальше клиент находится от сервера, тем дольше пакет должен дойти до него.
Например, если клиент находится в Москве, а сервер с сайтом на островах Кука, ответ будет идти дольше, чем если бы сайт находился в Москве.

Далее сразу скажу, что TTFB — фактор ранжирования.

C) Обработка HTML и загрузка контента — время, которое браузер тратит на обработку HTML, загрузку скриптов, изображений и CSS. Здесь время зависит в основном от чистоты HTML-кода и размера самих файлов — чем они больше, тем дольше будет идти загрузка.

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

Этот показатель зависит от скорости отклика сервера, правильной настройки, оптимизации CSS и JS. Именно это значение пользователь видит как скорость загрузки страницы.

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

условное время загрузки можно представить в виде следующей блок-схемы:

 

Какие показатели влияют на позиции сайта в Яндексе и Гугле

В 2010 году Google официально заявил, что скорость страницы является фактором ранжирования, но не уточнил, что именно влияет на ранжирование.

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

Помимо намеков о влиянии времени загрузки на сами поисковые системы, рядом экспертов были проведены исследования по определению зависимости позиций и времени загрузки. Одно из самых известных исследований провели специалисты MOZ. Вот их выводы:

A) Существует четкая корреляция между TTFB и позицией страницы: чем меньше время получения первого байта, тем лучше позиция:

простые рекомендации по ускорению загрузки сайта
 

Б) Не обнаружено связи между общим временем загрузки страницы и ее позицией в Google:

Не обнаружено связи между общим временем загрузки страницы и ее позицией в Google:

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

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

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

По словам представителя Яндекса Алексея Шафранова, 38% пользователей уходят с сайта, когда время загрузки увеличивается на 10 секунд, 74% пользователей уходят с мобильных устройств, если сайт загружается более 5 секунд.

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

Как понять, что оптимизировать с помощью webpagetest.org

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

Медленная загрузка увеличивает вероятность потери пользователей.

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

1. Оптимизируйте HTML-код и файлы CSS, JS.

Оптимизация загрузки невозможна без обеспечения «чистоты» кода, передаваемого в браузер пользователя при входе на сайт. Большое количество символов в исходном коде сильно влияет на скорость загрузки, поэтому его краткость — важный фактор успеха.

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

Сгруппируйте файлы CSS и аналогичные файлы JS вместе. Бесплатные PHP-приложения, такие как JCH Optimize, Cloudflare или Minify, помогут вам объединить элементы, которые копируются в отдельный каталог и проходятся по всем файлам на сайте.

 JCH Optimize, Cloudflare или Minify, помогут вам объединить элементы, которые копируются в отдельный каталог

 

2. Удалите ненужные HTTP-запросы

Выгрузка элементов страницы (JavaScript, изображения, файлы CSS и Flash) потребляет львиную долю системных ресурсов при загрузке сайта. HTTP-запросы к таким элементам заметно замедляют работу сайта.

Чтобы избежать «лишних» запросов, следует уменьшить количество компонентов страницы. Это вызовет пропорциональное уменьшение обращений к серверу и ускорит загрузку сайта.

Вы можете сделать это несколькими способами:

  • Объединение нескольких изображений в один графический файл (CSS-спрайт);
  • Используйте встроенные изображения в таблице стилей страницы;
  • Объедините несколько файлов CSS или скриптов на странице в один файл;
    Минимизируйте количество скриптов и плагинов.

3. Расположите JavaScript и CSS в правильном порядке

Рекомендуется размещать файлы CSS вверху кода страницы, а JavaScript внизу. После такой оптимизации сначала будет загружаться статический контент, потом только динамическая графика.

Flash-элементы или анимации, требующие больше ресурсов для загрузки, не будут «прыгать» и портить впечатление от сайта с первых секунд. Это обеспечит плавную загрузку контента и повысит эстетическую привлекательность ресурса.

4. Уменьшите количество внешних скриптов

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

Конечно, упор на локальные скрипты создаст некоторые ограничения во внешнем виде и функциональности сайта. Но полученное преимущество в скорости загрузки стоит этих «жертв».

5. Используйте функцию flush

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

Лучше всего размещать функцию сброса в начале исходного кода страницы, сразу после заголовка. Из шапки HTML-контент будет открываться быстрее, а также можно включить параллельную загрузку элементов CSS и JavaScript.

6. Кэшируйте страницы

Кэширование сохраняет часть информации о странице сайта (flash, графика, JavaScript и CSS) в браузере пользователя. При следующем посещении эти файлы мгновенно загружаются из браузера, что обеспечивает дополнительную скорость работы сайта.

Вы можете включить кэширование, добавив заголовок expires в HTML-код. Сайты  WordPress, Joomla, Drupal, Битрикс и NetCat легко кэшируются путем установки плагинов с бесплатными или частично бесплатными функциями, такими как W3 Total Cache, Cache Enabler или Zen Cach.

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

7. Используйте CDN

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

Сеть доставки и распространения контента делает информацию более доступной для людей во всем мире.

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

Популярные сети доставки контента (CDN)

8. Оптимизируйте графику и видео


Выбор правильного формата графики и видео необходим, поскольку формат файла напрямую влияет на то, насколько быстро информация будет представлена ​​посетителям.

Рекомендуемые форматы для различного веб-контента

  • SVG — для векторных логотипов и простых элементов интерфейса;
  • PNG - для не векторных диаграмм и логотипов;
  • JPG — для фото и изображений;
  • MPEG4 — для видео и анимации.

Кроме того, для видео и анимации доступен относительно новый формат WEBM. В большинстве случаев он обеспечивает меньший размер видео с тем же качеством. Однако этот формат имеет ограниченную поддержку браузерами (например, не поддерживается в macOS/iOS Safari). Поэтому в качестве приоритетного видеоисточника рекомендуется использовать файл WEBM, а в качестве альтернативы установить MPEG4. Вы также можете использовать только MPEG4, если совместное использование неприемлемо или нецелесообразно.

Кроме того, отметим, что векторный формат (SVG) позволяет производить масштабирование без потери качества графики.

Этапы оптимизации изображения


Шаг 1 - Уменьшите размер изображения.

Многие популярные CMS, такие как WordPress или Joomla, имеют встроенные плагины для оптимизации исходных изображений. Но этот способ создает дополнительную нагрузку и может замедлить работу сайта. Каждый раз, когда страница загружается, браузер сначала обращается к источнику, а затем на лету изменяет размер изображения.

Встроенные в операционную систему графические редакторы, такие как Preview (Mac) или Microsoft Paint (Windows), а также онлайн-сервисы с аналогичным функционалом помогут избежать падения скорости при загрузке изображений. Для работы с ними вам потребуются минимальные навыки работы с графикой.

Шаг 2 - Сожмите файл перед загрузкой.

Даже после оптимизации размеров изображения его «вес» обычно все еще далек от оптимального. Удобные и бесплатные сервисы, такие как ImageResize или TinyPNG, помогают уменьшить размер без потери качества изображения. Большинство процессов здесь автоматизированы. Пользователю остается только загрузить файлы и скачать уже сжатые до оптимального размера изображения.

9. Примените сжатие файла Gzip

Gzip-сжатие файлов делается для уменьшения количества запросов к серверу из браузера. Проще говоря, эта технология уменьшает первоначальный размер файла до 70% для более быстрой загрузки.

Способы реализации сжатия Gzip
Добавьте следующий фрагмент кода в файл конфигурации веб-сервера «.htaccess».
Добавьте следующий фрагмент кода вверху страницы HTML или PHP. Он проверяет, поддерживает ли браузер сжатие файлов gzip. Если поддерживается, используйте его.
Установите плагин Gzip на сайт. Например, W3 Total Cache для сайтов WordPress.

10. Сменить хостинг

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

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

Вывод

Нельзя игнорировать такой показатель, как скорость загрузки сайта. Именно он создает комфортную среду для посетителей. Чем быстрее пользователь получит искомый контент, тем больше вероятность, что будет сформирован позитивный  образ ресурса и построена лояльность к нему. Короче, если вы проверите свой сайт на https://pr-cy.ru/  и увидите такую картинку, считайте себя везунчиком!

если вы проверите свой сайт на https://pr-cy.ru/  и увидите такую картинку, считайте себя везунчиком!

 

LiveInternet