10 способов ускорить страницу

10 способов ускорить страницу

От автора: скорость страницы в наши дни довольно важна. Так как Google изменил алгоритм Googlebot, чтобы отдавать предпочтение быстрым, мобильным веб-сайтам, скорость страниц теперь имеет огромное значение. Чем медленнее работает ваш сайт, тем меньше пользователи проведут на нем времени, и тем меньше будут конверсии. Раскроем 10 способов, как ускорить страницы.

Что такое скорость страницы

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

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

10 способов улучшений скорости страницы

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

Примечание: они перечислены в порядке сложности. В какой-то момент, вам потребуется разработчик для оптимизации сайта.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

# 1 — Используйте CDN

CDN расшифровывается как Сеть доставки контента. Эффективное использование CDN дает вам доступ к сотням малых серверов по всему миру, на которых размещается копия вашего сайта, что значительно сокращает время, необходимое для его извлечения. Если вы не используете CDN, каждый запрос к вашему веб-сайту (включая изображения, CSS и JavaScript) медленно направляется по всему миру на ваш сервер.

Например, из 468 миллионам запросов в HTTPArchive 48% не были обслужены через CDN. Это более 224 миллионов запросов, которые могли бы быть более чем на 50% быстрее, если бы люди потратили несколько минут на добавление CDN на сайт.

Убедитесь, что вы правильно настроили CDN — пропуски кеша в CDN означают, что CDN должен запросить ресурс с исходного сервера, что нивелирует цель использования CDN!

#2 — Включите сжатие GZIP

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

#3 — Используйте меньшие изображения

Это означает как уменьшение разрешения (например, с 4000×3000 пикселей, которые дает камера, до 1000×750 для Интернета), так и уменьшение размера путем сжатия файлов.

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

#4 — Уменьшите количество запросов, которые выполняет страница

Цель состоит в том, чтобы уменьшить количество запросов, необходимых для загрузки верхней части страницы (известной как «выше первого сгибом»). Здесь есть два способа, вы можете:

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

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

#5 — Избегайте перенаправлений, где это возможно

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

Некоторые перенаправления неизбежны, такие как www -> корневой домен или корневой домен -> www, но большая часть вашего трафика не должна перенаправляться для просмотра сайта.

#6 — Сократите время до первого байта

Время до первого байта — это время, которое браузер тратит на ожидание после запроса ресурса, чтобы получить первый байт данных с сервера. Есть две части:

Время, потраченное на сервере

Время, потраченное на отправку данных

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

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

Вы можете значительно сократить время, затрачиваемое на отправку данных, используя CDN.

#7 — Уменьшить и устраните блокировку JavaScript

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

Вы также можете отложить загрузку маркетинговых скриптов до тех пор, пока пользователи не начнут прокрутку:

#8 — Сократите CSS и JS

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

Чтобы минимизировать JavaScript, используйте UglifyJS. Чтобы минимизировать CSS, используйте cssnano.

#9 — Удалите неиспользуемый CSS

Начиная с Chrome 59 (выпущенного в апреле 2017 года), в Chrome DevTools можно было видеть неиспользуемые JS и CSS. Чтобы увидеть его, откройте DevTools, покажите блок консоли (раздражающая вещь, которая появляется, когда вы нажимаете клавишу Esc), кликните на три точки в левой нижней части и откройте «Покрытие».

Нажав на кнопку со значком перезагрузки, вы обновите страницу и проведете аудит CSS и JS на предмет использования. Вот как это выглядит, когда вы проверяете начальную страницу в Google Chrome:

10 способов ускорить страницу

#10 — Регулярно отслеживайте скорость своего сайта

Гораздо проще решить проблемы со скоростью сайта в моменты замедления. Вдобавок ко всему, если вы сделаете проверку скорости сайта привычкой, вам будет проще решать проблемы.

Существуют бесплатные инструменты для отслеживания скорости сайта, двумя из самых популярных являются WebPageTest и Google Lighthouse. Недостатком этих инструментов является то, что вы должны не забывать запускать их до и после внесения изменений.

PerfBeacon — это сервис (созданный автором данной статьи), который регулярно запускает Google Lighthouse и позволяет отслеживать скорость сайта с течением времени.

Автор: Max Rozen

Источник: https://dev.to

Редакция: Команда webformyself.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Django. Быстрый старт

Создайте первое веб-приложение на Python + Django

Смотреть видео

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook: