Задача в увеличении скорости загрузки сайта не нова. В этой записи я представлю несколько способов, которые могут увеличить скорость загрузки вашего сайта.
Перейдём от слов к делу.
Сжимать файлы 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 будет тяжело.