click fraud detection
click fraud detection
Blog Case

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

BLOG
CASE
213
0
0/ 5stars
0/5

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

Зачем увеличивать скорость

Представьте, что ищете какой-либо товар. Например, шуруповёрт. Пытаетесь зайти на сайт, но он не открывается 1, 2, 3, 4 секунды, вот уже 5-я пошла… Будете ждать? Вряд ли, ведь можно зайти к конкуренту в выдаче, у которого сайт загрузится за полторы секунды. Это самый простой пример, почему нужно оптимизировать ресурс.

Какой должна быть скорость загрузки

скорость загрузки

1–3 секунды. Отличный результат. При такой загрузке ресурс будет собирать новых пользователей из органической выдачи, а количество отказов станет минимальным.

4–7 секунд. Нормальный результат, но лучше добиться показателей, указанных выше.

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

Порядок загрузки сайта

В загрузке данных участвуют:

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

Очень часто проблема появляется на стороне сервера. Смотрите, как это работает. Пользователь нажимает на ссылку, и процесс начинается:

  • посетитель переходит по ссылке, запрашивая у сервера данные, который в ответ отправляет сформированный HTML-документ;
  • далее подгружаются стили. CSS отвечает за внешний вид сайта: расположение блоков, цветовое оформление, отображение контента, базовую анимацию и т. д.;
  • затем поступает запрос к JS-файлам. JavaScript частично отвечает за логику работы сайта и интерактивность (обрабатывает, корректно ли заполнены HTML-формы без отправки данных на сервер, взаимодействует с пользователем, добавляет анимацию и проч.);
  • подключение шрифтов. Преображается контент, текст приобретает оригинальное начертание. Если они не подгружаются, тогда браузер подключает шрифты по умолчанию (у каждого веб-обозревателя свой стандартный набор);
  • загрузка изображений. Если путь к картинкам прописан правильно, они загружаются без всяких проблем.

Трудности могут возникнуть при загрузке данных на любом этапе.

Итак, рассмотрим первичный список, где могут скрываться ошибки:

  1. Сервер. Что это такое? По сути, тот же компьютер, только более мощный. У сервера, как и у ПК, может не хватать оперативной памяти, ядер или мощности процессора для обработки входящих данных. Как решается? Если есть проблемы с сервером, нужно просто сменить поставщика услуг, то есть ваш хостинг.
  2. Тяжёлые файлы. Сюда входит всё: от JS и CSS до шрифтов и картинок. Всегда помните о размере файлов, размещаемых на сайте. Их небольшой размер — залог быстрой загрузки страниц.
  3. Медленная CMS. Этот фактор актуален только в том случае, если вы используете малоизвестный движок. Если у вас сайт на WP, Joomla, Drupal, MoDX и так далее, можете не беспокоиться об их качестве, причина медленной загрузки скрывается в других факторах.

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

Инструмент для проверки

page speed insights

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

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

Что можно сделать

работы по оптимизации скорости

Google PageSpeed даст полезную информацию, пользуясь которой можно самостоятельно устранить недостатки. Вы можете:

1. Сжать изображения

Главные характеристики:

  • размер. Для обычных целей достаточно картинок размером до 1600 px, исключение — лупа в интернет-магазинах, там нужно более высокое качество;
  • «вес» картинок. Любое изображение можно сжать без видимых потерь качества. Это делается с помощью «Фотошопа» или специальных онлайн-сервисов.

Оптимальные размеры для изображений:

  • в каталог — до 7 КБ;
  • для карточек товаров — до 18 КБ;
  • для просмотра в увеличенном виде — 920 КБ.

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

2. Включить gzip-сжатие

Скорость передачи файлов обычно медленнее, нежели распаковка, поэтому с помощью gzip-сжатия можно ускорить работу сайта. Данные архивируются на сервере и передаются затем браузеру, который распаковывает их и показывает пользователю веб-страницу. Однако есть небольшое «но». Этот процесс может перегружать сервер, поэтому рекомендуется проверить скорость загрузки ресурса до и после включения gzip. Проверить, включено ли сжатие, можно всё тем же PageSpeed. Если gzip активно, программа напишет: «Внедрены приёмы оптимизации».

Как подключить сжатие?

Нужно добавить в конец файла .htaccess строки кода:

AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

После этого ещё раз проверьте сжатие в PageSpeed.

3. Настроить кэширование

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


ExpiresActive On
ExpiresDefault "access plus 1 month"

ExpiresByType image/gif "access plus 2 months"
ExpiresByType image/jpeg "access plus 2 months"

Можно добавлять для кэширования любые расширения файлов.

4. Сжатие CSS и JS

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

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

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

0/5
Проголосовало людей: 0
СОДЕРЖАНИЕ
СТАТЬИ
Зачем увеличивать скорость
Какой должна быть скорость загрузки
Порядок загрузки сайта
Инструмент для проверки
Что можно сделать
Как гарантированно добиться положительных результатов
Успех в поисковом продвижении
SEO-продвижение ресурсов крупных брендов не всегда проходит легко и быстро. Связано это с известностью самой…
Анатолий Улитовский
Анатолий Улитовский
Сайт на шаблоне или уникальный дизайн
На этапе разработки сайта существует выбор: заказать уникальный дизайн или использовать готовый шаблон. Мы постараемся…
Алексей Варламов
Алексей Варламов
SEO-оптимизация новостного сайта
В этой статье я кратко расскажу, как оптимизировать сайты-новостники, чтобы они нравились и пользователям, и…
Юлия Телижняк
Юлия Телижняк
Что такое семантическое ядро
Семантическое ядро (СЯ) – это список всех запросов, ответы на которые пользователь может получить на…
Алексей Варламов
Алексей Варламов
Автор
213
0
Политай Владислав
Политай
Владислав
most
Popular
самое лучшее на айтыжблог
НЕ ПРОПУСТИТЕ ЭТИ 
СТАТЬИ
Про разработку данного сайта вы уже могли прочесть в одной из статей нашего блога. А здесь - кейс по его продвижению в поисковых системах.
Wezom
Wezom
Возможно
Разработка веб-портала уже давно заключается не только в дизайне и кодировании. Безусловно, грамотный код является…
Владислав Коломоец
Владислав Коломоец
Prestashop – движок, разработанный специально для создания интернет-магазинов. Рассчитан на администраторов с небольшим опытом взаимодействия…
Алексей Варламов
Алексей Варламов
Школа Мастерства агентства Wezom стремится дать своим курсантам качественные, наилучшие знания в сфере IT технологий.…
Анна Томенчук
Анна Томенчук
Оставить комментарий
к статье
ПОДПИСЫВАЙТЕСЬ НА РАССЫЛКУ АЙТЫЖБЛОГ
ХОТИТЕ ПОЛУЧАТЬ 
ИНТЕРЕСНЫЕ СТАТЬИ?
Уже подписались 229 человек
313
ПОПИСЧИКОВ
ЧИТАТЬ
4269
ПОПИСЧИКОВ
СЛЕДИТЬ
10139
ПОПИСЧИКОВ
СЛЕДИТЬ