Email: info@sapio.by
Тел.: +375 (29) 340-02-91

Как правильно оптимизировать и ускорить сайт

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

Загрузку сайта можно условно поделить на несколько этапов:

  1. Обработка запросов к DNS. Обрабатывается запрос к DNS-серверу.
  2. Обработка редиректов. На этом этапе происходит обработка HTTP-переадресации.
  3. Подключение к серверу. Определяется временем, которое нужно для браузера, чтобы подключиться к HTTP-серверу для получения содержимого страницы.
  4. Ответ сервера. Время, на протяжении которого происходит передача данных страницы к браузеру от HTTP-сервера.
  5. Обработка HTML. Определяется временем, необходимым браузеру для того, чтобы обработать содержимое страницы после того, как она была загружена с сервера. Окончанием этого этапа является начало отрисовки.
  6. Время до отрисовки. Период времени от момента перехода на страницу и до начала ее отрисовки в браузере.
  7. Время полной загрузки. Промежуток времени, в течение которого осуществляется полная загрузка страницы начиная с момента перехода на нее. Загрузиться должны все компоненты (скрипты, изображения, CSS и т. д.). Некоторые посетители называют этот этап «качеством» страницы.

Время осуществления каждого этапа измеряется в миллисекундах.

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

Чем быстрей скорость загрузки, тем лучше. Загрузка в течение одной секунды является великолепным результатом, 2 секуны – хорошим, 4-7 секунд – нормальным (требует вмешательства), 10 секунд – плохим, более 11 секунд – ужасно. В последнем случае нужно немедленно принимать меры, чтобы не терять деньги.

Некоторые хозяева сайтов задаются одним и тем же вопросом: «Зачем нам нужно поднимать скорость загрузки страниц сайта, если даже самые популярные интернет-магазины грузятся очень долго». Ответ очевиден. Больше половины посетителей покидают ресурс при его загрузке более чем трех секунд. Также на сайт конкурента уходит до 75% посетителей, если сайт в процессе просмотра начинает подтормаживать вследствие большого количества трафика.

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

По сравнению с сайтом, на загрузку которого уходит 1 секунда, ресурс, грузящийся более 3 секунд, теряет порядка 22% просмотров, имеет на 50% больше отказов и получает на 22% меньше конверсии. Для сайта с пятисекундной загрузкой эти показатели еще меньше: Просмотры падают на 35%, конверсия – на 38%, а отказов на 105% больше.

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

Существуют сервисы, с помощью которых можно проверить скорость загрузки ресурса (Google PageSpeed Insights, Pingdom). Но эти сервисы не помогут вам поправить положение вещей. Они только анализируют скорость. Опираясь на полученные данные, нужно совершить необходимые действия.

Существует несколько способов увеличения скорости загрузки страниц:

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

В первую очередь можно прибегнуть к методу сжатия данных в протоколе HTTP. Этот способ снижает объем текстовых ресурсов, которые включают в себя элементы JavaScript, CSS и HTML. С помощью этого метода можно добиться сжатия данных на 50%. Для этого используются технологии zip, gzip  и пр.

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

  • Уменьшить размер графики. Графика занимает примерно 80% всего содержимого страницы. Именно по этой причине нужно особое внимание уделить оптимизации размещаемых фотографий. Благодаря нижеописанным рекомендациям можно уменьшить размер изображений на 50%.

Наиболее приемлемый формат фотографий – JPEG. PNG лучше не использовать. Фотографии в формате JPEG можно сильно сжать. При этом их качество не пострадает.

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

К выбору качества картинок также нужно подойти с ответственностью. Уменьшение качества фона на 50% незначительно повредит общему виду страницы. Разница будет практически незаметной по сравнению с оригинальной картинкой, но сильно уменьшится ее размер.

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

  • Облегчение кода CSS и JavaScript. Для этого были разработаны специальные средства. Упрощение кода CSS дает еще более высокие показатели сжатия, чем использование технологии zip и gzip. Упрощение осуществляется за счет удаления из кода ненужных элементов и сокращения названия функций.
  • Уменьшение количества запросов браузера. Чем большее число запросов исходит от браузера пользователя, тем дольше грузится страница. Уменьшения времени загрузки можно добиться с помощью создания некоторых условий, которые позволят браузеру пользователя отправлять меньше запросов. Для этого нужно снизить количество фотографий, кодов сторонних сервисов, ресурсов и файлов JavaScript.

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

  • Сокращение расстояние между пользователем и сайтом. Разберем этот способ на примере. Допустим, сервер, на котором размещен ваш сайт, находится во Владивостоке, а посетитель заходится на него с Санкт-Петербурга. В этом случае пользователю придется долго ждать загрузки. Особенно эта проблема актуальна для «тяжелых» сайтов. Решение этой проблемы является использование сетей доставки контента (Akamai или Amazon CloudFront).

Далее мы дадим несколько рекомендаций, которые помогут ускорить загрузку страниц сайта.

  1. Уменьшение HTTP-запросов.
  2. Файлы CSS должны находиться в начале страницы. Помещение CSS файлов в хедер позволяет осуществлять постепенный рендеринг страницы. Другими словами, загрузка будет происходить постепенно. В первую очередь будет загружаться заголовок, следом лого, потом навигация и т. д. Это позволит произвести хорошее впечатление на пользователя. Подобный прием можно назвать индикатором загрузки.
  3. JavaScript должен быть внизу страницы. Вначале должен загружаться контент, а уже потом фалы JavaScript. Такие файлы много весят. Не нужно заставлять пользователей ждать вначале их загрузки, а уже потом основного контента.
  4. Минимизация JavaScript и CSS. Удаляйте из кода все несущественные символы, например, переносы строк, комментарии, символы табуляции, незначащие пробелы и др.
  5. Для параллельного скачивания целесообразно использовать поддомены. При большом количестве графики нужно вывести ее на поддомен или несколько поддоменов. Браузер будет видеть их как отдельный сервер.
  6. Использование кэша браузера. Для этого нужно правильно выставить заголовок Expires. В таком случае при первом посещении страницы все загруженные элементы CSS, JavaScript, фотографии и флеш останутся в кэше браузера. В следующий раз их загрузка не понадобится.
  7. Использование CDN. Для подключения фреймворка jQuery нужно использовать CDN, который представляет собой большое количество серверов, размещенные в разных местах земного шара. С помощью CNS можно добиться высокой скорости отдачи контента посетителю.
  8. Изображение лучше не масштабировать.

Максимальный эффект от социальных сетей

От 450 руб. / мес.

Внутренная и внешняя оптимизация сайта

От 300 руб. / мес.