20 советов, как сделать ваш сайт быстрым

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

Размеры файлов

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

1. Уменьшить! Уменьшить! Уменьшить!

Один из самых простых способов ускорить загрузку вашего веб-сайта — минимизировать файлы HTML, CSS и JavaScript. Инструменты минимизации, такие как этот, будут сортировать ваш код и удалять ненужные части вашего кода, которые увеличивают размер файла.

2. Сохраняйте размер файлов небольшим

Большие файлы изображений и видеофайлы могут сильно замедлить работу веб-сайта. Убедитесь, что вы используете сжатые форматы файлов, такие как JPEG, MP3 и MP4, а не несжатые типы файлов, такие как TIFF, WAV или MOV.

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

3. Не используйте изображения для градиентов, узоров или даже логотипов

CSS3 намного мощнее, чем думают многие разработчики. Использование изображения только для того, чтобы иметь градиентный фон, — это большое нет-нет. И часто с помощью CSS можно разработать множество шаблонов или даже логотипов.

4. Ленивая загрузка

Если вы когда-нибудь замечали изображение на Medium, которое на секунду расплывалось, это ленивая загрузка на работе. Отложенная загрузка сообщает веб-браузеру пользователя, что загрузка изображения не является приоритетом (поэтому пользователю сначала предоставляется основная часть веб-сайта). Вы можете лениво загружать изображения и видео. Вы можете рассмотреть возможность использования библиотеки, такой как ленивые размеры.

5. Сжатие изображений

Вы должны (почти) всегда сжимать свои изображения, будь то JPEG, PNG или SVG. Также загляните в АВИФ!

JavaScript

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

6. Избегайте JavaScript, если он вам действительно не нужен

JavaScript часто является виновником замедления скорости веб-сайта. С сегодняшними стандартами HTML5 и CCS3 вы можете довольно часто обходиться без использования JavaScript для более простых задач. Старайтесь использовать JavaScript только тогда, когда он вам действительно нужен.

7. Удалите неиспользуемый JavaScript

Вероятно, ваш веб-сайт загружает JavaScript, который на самом деле не используется. Так… просто удалите его.

8. Избегайте JS-библиотек

Какими бы полезными ни были библиотеки, такие как библиотеки jQuery или NPM, они могут сильно замедлить работу вашего сайта. Иногда ваниль просто лучше.

Бонус: минимизируйте свой JS

CSS

Удивительно, но CSS может быть фактором, влияющим на быстродействие вашего веб-сайта (да, это важно… по крайней мере, сейчас).

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

Это пустая трата кода и пустая трата места. О, и это, как вы его удаляете.

10. Не помещайте CSS в тег Body

Мы все это сделали. Это действительно заманчиво, но вы действительно не должны.

11. Используйте переменные CSS, чтобы свести к минимуму объем кода

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

12. Объедините внешние файлы CSS

Объединение внешних файлов CSS позволяет вам загружать только один файл вместо двух отдельных запросов.

Бонус: уменьшите свой CSS!!!

Если вы не минимизируете свой CSS, вы просто тратите время пользователей. Это очень просто, и нет смысла этого не делать. См. Совет один о том, как это сделать.

Сервер

Не думайте, что ваш сервер здесь не в порядке.

13. Минимум файлов cookie

Файлы cookie браузера иногда могут замедлять работу.

14. Настройте CDN… или не делайте этого

Настройка CDN может стоить денег, но также может быть оправдана. С другой стороны, не всегда это того стоит.

15. Используйте правильные заголовки безопасности

Этому посвящен целый сайт под названием securityheaders.com.

16. Оставайтесь современными

Убедитесь, что вы используете https, IPv6 и обслуживаете активы через HTTP/2. Все это поможет ускорить загрузку вашего сайта.

Шрифты

Даже шрифты могут замедлить время загрузки. На данный момент это даже стоит сделать веб-сайт?

17. Сверхбыстрые шрифты

Использование Google Fonts не всегда лучший вариант. "Либо это?"

18. Уменьшите размер веб-шрифта

Уменьшение размера веб-шрифта тоже может кое-что ускорить.

Инструменты

Почему бы не заставить компьютер работать?

19. Инструмент Google PageSpeed

Инструменты Google PageSpeed ​​— это мой сайт для перехода, когда я хочу проверить скорость сайта. Он дает оценку от 0 до 100 за то, насколько хорошо ваш сайт загружается, а также за то, что виновато в его замедлении.

20. Маяк

Lighthouse — это платформа Google для тестирования скорости веб-сайтов (на ней построен PageSpeed). Если у вас есть более крупный проект, вы можете интегрировать его как CI или даже использовать бота для установки бюджета производительности.

В конце дня…

…самый простой способ сделать ваш сайт быстрым – сделать его простым. Добавление причудливых фонов и сложных библиотек JavaScript замедляет работу веб-сайтов. Думайте о скорости вашего сайта как о бюджете. У вас есть только так много, чтобы потратить, так что тратьте это разумно.

Надеюсь, эти советы были полезны. Если у вас есть какие-то свои хитрости, чтобы сделать сайт быстрее, пишите в комментариях!