Работа по ускорению загрузки страниц сайта очень важная, ведь поисковые системы при индексации сайта уделяют этому особое внимание. У сайтов с быстрой загрузкой страницы есть преимущество перед его конкурентами. Оптимизация скорости сайта – процесс бесконечный. Всегда можно найти способ ещё лучше ускорить свой сайт.
Советы по быстрой загрузке сайта
Важно, чтобы страница загружалась быстро, поскольку это не приятно, когда посетитель видит пустую страницу или контент, который медленно загружается. Многие устают ждать и сразу закрывают страницу и ищут другую. Кроме того, важны первые 7 секунд, это среднее время, за которое человек решает прочитать вашу страницу или закрыть ее. Вот несколько советов по оптимизации скорости загрузки сайта:
1 Оптимизация времени загрузки каждого модуля сайта
Полезно проанализировать, какие компоненты являются лишними, ненужными и которые можно оптимизировать. Нужно определить те, которые весят больше, и постараться сжать их, чтобы ускорить загрузку.
А именно:
- Оптимизировать изображения,
- Минифицировать JavaScript,
- Сжать CSS и HTML код
2 Использовать сжатые изображения определённых форматов.
Если на странице много изображений, важно их оптимизировать и использовать оптимальный формат. Рекомендуемые форматы: WebP, JPG, PNG и SVG. Не стоит использовать форматы TIFF или BMP. JPG и WebP - использовать для фотографий, PNG и SVG для рисунков, значков, логотипов и т. д. Для картинок с прозрачным фоном используйте PNG.
WebP — формат, созданный Google, который сжимает ваше изображение без потерь. Его использование позволяет добиться уменьшения размера картинки без потери качества на 30%, а иногда и в 2 раза.
Сравнение форматов jpg и webp
Мы уже подробно писали о формате WebP, поэтому не будем здесь останавливаться.
3 Оптимизация файлов CSS и JavaScript.
Оптимизировать эти файлы можно путём удаления ненужного кода, символов, комментариев. Стоит проверить такие файлы на наличие лишних пробелов или больших отступов. Чтобы не делать это вручную, стоит воспользоваться специальными инструментами оптимизации кода.
Минифицированный файл CSS
4 Для уменьшения количества HTTP- запросов – объединить CSS-файлы.
Для каждого компонента на сайте на сервер приходит отдельный HTTP-запрос. Если на сайте имеются 5 CSS-файлов, то понадобится 5 HTTP-запросов. Если объединить их в меньшее количество файлов, уменьшится количество запросов и страница будет загружаться быстрее. Также можно объединить код CSS и JavaScript в один файл.
5 Использование CSS-спрайтов.
Спрайт – это несколько изображений, объединённых в одно. В такие спрайты обычно помещают маленькие значки, углы, логотипы, стрелки, фоны, используемые на странице. Сам спрайт используют как фон элемента и задают правильную позицию таким файлам с помощью CSS-свойства background-position. Спрайты позволят снизить количество запросов к серверу и тем самым ускорить загрузку страницы.
Пример CSS спрайта
6 Сжатие на стороне сервера
Данная функция должна быть включена. Этот процесс схож с созданием ZIP-файлов. Для выделенных серверов понадобиться VPS.
7 Код JavaScript и CSS не должен находиться внутри HTML-файлов
Ошибкой является помещать в HTML-файлы сторонний код. Различные скрипты и таблицы стилей нужно хранить отдельным файлом. Браузеры обычно переносят их в кэш, что позволяет ускорить загрузку.
8 Перенос некоторого контента на сторонние ресурсы
Перенос некоторых файлов с сайта на сторонние веб-службы значительно снижает нагрузку на веб-сервер. Например, видеофайлы могут быть загружены на YouTube, а картинки на хостинг изображений. Однако стоит понимать, большая загрузка таких хостингов, отразится на скорости исходного сайта.
9 В дизайне сайта не должно быть много изображений.
Следует подбирать такое оформление, которое не будет перегружать изображениями сайт. Иногда многие картинки можно заменить пару строчками кода CSS.
10 Производительность сервера
Невозможно полностью отследить все детали каждой страницы сайта. Поэтому будет полезно время от времени проверять, не перегружает ли какой-либо файл процессор сервера. Все ли запросы доходят до адресата.
Поработайте над своим сайтом, чтобы ускорить загрузку страниц. Проверить результат ваших трудов можно в сервисе Google PageSpeed Insights
