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

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

• 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 размер кода. Будут полезны эти сервисы:

   • CSS Drive;
   • CSS Compressor;
   • Online Compressor;
   • JSCompress.

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

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

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

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

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

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

   

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

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

   • Amazon CloudFront;
   • SpaceCDN;
   • CDNvideo.

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

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

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

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

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

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

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

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

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

   • в WordPress создавать AMP можно в несколько кликов через специальный плагин;
   • в Joomla – через плагин wbAMP.
   

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

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

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

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

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

Что в итоге?

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

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