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

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

Перейдём от слов к делу.

Сжимать файлы CSS и JavaScript

Сначала разберемся, что значит «сжатие» файлов. В данном случае это означает удаление всех символов переноса строк, пробелов и всех других символов которые не нужны для описания правил CSS и/или работы скриптов. Так мы выигрываем несколько килобайт памяти. Мало? Может быть. А вот скорость загрузки вырастет на несколько миллисекунд и лояльность поисковиков вырастет.

Возникает вопрос — а как работать с такими файлами? Ведь тогда содержимое какого-нибудь main.css превращается в одну длинную строку. Для решения такой проблемы существуют специальные инструменты и языки. Например, для работы с CSS есть языки SASS, SCSS или LESS. Вы пишете на этих языках те-же стили с понятным человеку форматированием, а препроцессор на вашем компе переводит их в сжатый CSS.

Я, например, работаю в GULP.  Это прекрасный инструмент создающий рабочее пространство, благодаря которому я:

  • Легко подключаю все необходимые библиотеки CSS и JS
  • Все файлы CSS (в т.ч. и библиотек) сжимаю в один единый файл без ущерба удобству
  • Тоже самое делаю со всеми файлами JS
  • Автоматизирую многие однотипные действия. Например, обновление страницы в браузере после сохранения любого файла вёрстки

Словом — сжатие файлов давно не проблема, и это нужно использовать.

Использовать WEBP-изображения

Это формат изображений разработанный Google. Особенность его в том, что без значительных потерь в качестве, такое изображение может занимать памяти в разы меньше, чем формат PNG или JPEG. Сами понимаете, что это может значительно увеличить скорость загрузки сайта. Проблема только в том, что не все браузеры до сих пор его поддерживают. Можно выводить одно и тоже изображение, например, в WEBP для браузеров, которые его поддерживают, и JPEG — для всех остальных.

Делается это просто, с помощью вот такой конструкции HTML:

<picture>
    <source srcset="img/code-is-poetry.webp" type="image/webp">
    <source srcset="img/code-is-poetry.jpg" type="image/jpeg"> 
    <img src="img/code-is-poetry.jpg" alt="Код — это поэзия!">
</picture>

Как видите, ничего сложного, а прирост значительный.

Использовать SVG

А именно, для логотипов, иконок и всех других элементов, которые нельзя или сложно описать при помощи HTML, CSS или JavaScript.

Раньше было допустимо использовать формат png в таких случаях, но на сегодняшний день это непозволительная роскошь по следующим причинам:

  • SVG занимают в разы меньше памяти чем любой другой формат изображений, т.к. это векторный формат (прирост в скорости)
  • Т.к. SVG — векторный формат изображений, то и выглядят они одинаково качественно на любом экране, и почти всегда выигрывают у любого растрового изображения

Использовать кеширование в CMS

В большинстве случаев моей практики, всем нужна CMS. Поэтому я рекомендую использовать кеширование страниц. Кеширование страниц — это сохранение результата полученной страницы пользователем. Т.е. в первый раз когда мы заходим на страницу, то сервер обращается к БД, выполняет скрипты и выдает страницу юзеру. Но второй раз он эту страницу уже берет из кеша не обращаясь (или обращаясь по-минимуму) к БД и расходуя меньше ресурсов на обработку скриптов. В итоге, при большой посещаемости сайта мы экономим ресурс сервера и делаем скорость загрузки сайта быстрее.

Технология кеширования есть у многих CMS. Например, для WordPress есть множество плагинов, которые успешно справляются с этой задачей.

Не использовать CMS без нужды

Оставил на закуску 🙂

Тут всё просто. Если у вас лендинг и тексты в нем вы меняете раз в пол года, то CMS вам не нужна, потому что поменять текст в вёрстке немного сложнее чем в файле word, а CMS требует от сервера время на сделать запрос в БД и обработать все скрипты. Пока такой сайт будет посещать 10 человек в сутки — разницы вы не увидите между сайтом на CMS и сайтом без неё. Но когда количество людей вырастет, то разница станет значительной.

Исключением для лендингов может быть ситуация, когда вы тестируете нишу и вам нужно сделать 20 копий одного лендинга с разными текстами, изображениями и, возможно, расположением экранов лендинга. В таком случае CMS становится очень желательна, потому что администрировать такой объем страниц без CMS будет тяжело.

Посмотрите видео: