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

8 способов увеличить скорость загрузки сайта
20.07.2017
20 мин
17160
наш канал в ЯНДЕКС.ДЗЕН.

Низкая скорость загрузки раздражает людей. Особенно тех, кто заходит в интернет со смартфонов и планшетов. Вот немного статистики:

  • 53% посетителей мобильных сайтов уходят, если загрузка идёт дольше 3 секунд (согласно исследованию DoubleClick);
  • увеличение времени загрузки с 1 до 7 секунд повышает вероятность отказа посетителей на 113% (согласно исследованию think with Google);
  • рост числа элементов страницы (текст, картинки, заголовки) с 400 до 6000 увеличивает показатель отказов на 95%.

А вот что показало свежее исследование Google:

  • 46% пользователей смартфонов утверждают, что их раздражает медленная загрузка сайтов;
  • 50% пользователей полагают, что нормальное время загрузки сайта – до 2 секунд;
  • конверсия может снизиться до 20% за каждую лишнюю секунду загрузки.

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

Скорость 3G/4G-интернета часто нестабильна, а если «тормозит» ещё и сайт, больше половины людей сразу его закрывают. Пользователи компьютеров и ноутбуков тоже не рады долгой загрузке.

На что и как влияет скорость загрузки?

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

К тому же Яндекс и Google постепенно снижают позиции медленных сайтов в общей и мобильной выдаче.

Технические этапы загрузки страницы

Скорость загрузки важна не только для поисковиков. Facebook учитывает её при показе рекламы – чем шустрее мобильный сайт, тем активнее откручиваются объявления.

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

Как измерить скорость загрузки?

Это можно сделать в специальных сервисах. Для примера возьмём наш сайт http://www.altera-media.com.

  • Test My Site от Google. Этот сервис проверяет скорость загрузки мобильной версии сайта.

    Test My Site показывает время полной загрузки и предполагает, какой процент посетителей мы теряем из-за задержки

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

    Мы быстрее, чем 77% сайтов – ура!

  • Pr-cy. Здесь можно проверить скорость отдельно для компьютера и телефона. После проверки сервис посоветует, как и что лучше оптимизировать.
  • GTmetrix. Показывает время полной загрузки, общий вес страницы и небольшой отчёт о производительности.
  • Google PageSpeed. Сервис проверяет скорость загрузки обычной и мобильной версии. Он выставляет сайту оценку по 100-балльной шкале и предлагает идеи по оптимизации. Получается своеобразный чек-лист.

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

  • WebPageTest. Сервис для тех, кто любит разбираться в настройках. Тут можно выбрать устройство или браузер для теста и привязать их к местоположению. Посмотрите, как быстро грузится сайт в браузере Chrome в Индии или на Samsung Galaxy S7 в Далласе.

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

Результаты проверки в разных сервисах могут различаться. Это нормально. «Прогоните» сайт через все, сравните итоговые значения и выведите среднее.

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

    1. Уменьшить размер страниц

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

      Размер данных можно уменьшить на 64% и более – это ускорит загрузку

    2. Уменьшить вес изображений

      Проще всего сделать это в сервисах TinyJPG или Compressor. Если пользуетесь «Фотошопом», выберите опцию «Сохранить для Web» (Ctrl+Shift+Alt+S) и установите качество 50-80%. Вес картинок в высоком разрешении часто уменьшается в несколько раз. В отдельных случаях – в 10 раз и более.

      TinyJPG уменьшает вес изображений на 40-70% и даже больше. В бесплатной версии можно загружать только картинки до 5 Мб

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

    3. Убрать всё лишнее

      На сайте неизбежно накапливается мусор, который надо время от времени чистить:

      • куски кода от сторонних ресурсов, сервисов, дополнений;
      • дублированные скрипты;
      • ненужные плагины, виджеты и формы внутри CMS.

      Кстати, оценить ценность уже установленных на Wordpress плагинов можно с помощью ещё одного плагина – Plugin Performance Profiler. Найдите бесполезные и удалите.

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

    4. Отказаться от JavaScript

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

      Если нельзя удалить, сократите для JavaScript и CSS размер кода. Будут полезны эти сервисы:

      Они убирают из кода лишние символы и ускоряют его загрузку.

    5. Использовать кэширование данных

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

      Подключить кэширование можно в своей CMS, у хостинг-провайдера или на стороне сервера.

    6. Использовать CDN – сервисы доставки контента

      Если ваш сайт расположен на московском хостинге, а многие посетители приходят из регионов, то скорость отклика сервера немного проседает. CDN решает эту проблему – кэширует ваш контент на многочисленных edge-серверах. В результате изображения, CSS и JavaScripts загружаются с того сервера, который физически расположен ближе к посетителю.

      Содержимое сайта кэшируется внутри сети CDN – конечная скорость загрузки растёт

      Вот несколько известных CDN:

    7. Перейти на выделенный сервер

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

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

      А есть компромисс – VDS (выделенный виртуальный сервер). Суть VDS та же: вы размещаете на нём свой сайт без «соседей». На одном физическом сервере располагается несколько виртуальных. Они работают немного медленнее физического, но обойдутся дешевле.

      Проблема в том, что виртуальные выделенные серверы (как и физические) нужно настраивать и администрировать. Это сложно, надо привлекать специалиста.

      VDS часто предоставляют хостинг-провайдеры. Мы используем выделенные серверы компании Firstvds.

    8. Использовать AMP – ускоренные мобильные страницы

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

      У таких страниц очень высокая скорость загрузки – обычно не больше 2-3 секунд. Но есть и минусы: урезанная функциональность, блеклый внешний вид. AMP плохо подходит для e-commerce. В основном эту технологию используют блоги, новостные порталы и информационные сайты.

      Ускоренные страницы часто попадают в «карусель» выдачи Google. Вы получаете больше трафика

      На страницы AMP приходит много посетителей из Google. В Яндексе они ранжируются хуже.

Дополнительные рекомендации

      • Перенесите скрипты из верхних секций страницы в нижние – так они не будут «отъедать» часть времени загрузки. А вот CSS-файлы могут быть в хэдере.
      • Отправьте тяжёлые файлы на сторонние сервисы. Лучше залить видео на YouTube и вставить на страницу код, чем загружать ролик на сайт.
      • Уберите 301-редиректы и сократительные ссылки. Распознать все редиректы поможет сервис Screaming Frog.

Если сайт тяжёлый и убрать с него всю «красоту» никак нельзя, используйте прогресс-бар. Он убирает фактор неопределённости, поэтому люди могут ждать загрузки в несколько раз дольше. Это компромиссный способ – проблему не решит, но поможет сократить число отказов.

Пример симпатичного прогресс-бара. Ещё чуть-чуть и страница загрузится

Что в итоге?

      1. Чем выше скорость загрузки сайта, тем лучше для поведенческих факторов и продвижения в поиске. Идеально, если сайт загружается за 1-2 секунды.
      2. Чтобы ускорить сайт, нужно убрать всё лишнее и сфокусироваться на простоте. Используйте меньше тяжёлых графических элементов. Оптимизируйте всё, что можно (вес изображений и страницы, код CSS).
      3. Скорость нужно измерять регулярно. Если она начнёт падать, вы это вовремя заметите и сможете найти причину.

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

Рецензент статьи: Голомолзин Денис
Рецензент статьи:
Голомолзин Денис
Управляющий партнер компании "Альтера". В прошлом - оптимизатор, ведущий специалист SEO-команды, руководитель отдела продвижения, консультант-евангелист компании.

Вы дочитали статью! Отличная работа!

Рекомендуем ознакомиться со значениями терминов:

МуртапузацияJavaScript / JSBM25ЧПУЯндекс.ВебмастерКоды ответа сервераПодсветка в выдачеМикроразметкаВидимость в ПСБиржа ссылокАдаптивная версткаschema.orgGET-параметрШинглЦелевой запросRobots.txtNoindexПоведенческие факторыkeywordsFTPГлавное зеркало сайтаАГССкриптПоисковый спамЮзабилити сайтаАлгоритм «Королев»СайдбарМинус-словаCanonicalGoogle Search Console