Улучшение скорости загрузки сайта, часть 2

15 июля 2020

152

На чтение: 3 мин

CSS

Вторым шагом после изображений подумайте об оптимизации ваших CSS и JavaScript файлов. Не забывайте всегда минимизировать эти файлы. По умолчанию CSS являются ресурсом, который блокирует отрисовку страницы в браузере. Это значит, что браузер остановит создание HTML элементов пока не загрузит и не прочтет весь ваш CSS. Поэтому всегда минимизируйте CSS, а также удаляйте неиспользуемые стили. Это особенно важно, если Вы используете какой-нибудь CSS фреймворк (на вряд ли вы используете все стили фреймворка). PurgeCSS может помочь Вам автоматизировать процесс удаления неиспользуемых стилей. Если это возможно для Вас, постарайтесь при загрузке страницы загружать только критический CSS, а загрузку остального CSS отложить, пока страница полностью не загрузится. Критический CSS — это CSS необходимый для стилизации только той части страницы, которая находится в области видимости экрана при загрузке страницы.

JavaScript

Постарайтесь сократить размер JavaScript файлов настолько, насколько это возможно, и помните, что JavaScript файл — не изображение, браузеру кроме загрузки JS файлов нужно их еще и обрабатывать, что занимает определенное время и ресурсы. Именно от размера JavaScript и от скорости его выполнения зависит такой очень важный показатель как скорость загрузки до взаимодействия. То есть может быть такое, что страница полностью загружена, а пользователь все еще не может с ней взаимодействовать или отклик страницы на действия происходит с большой задержкой. Это значит, что браузер еще не обработал весь JavaScript код.

Ленивая загрузка JavaScript’а

Также старайтесь откладывать загрузку большого JS кода (файла) не используемого на всех страницах. Например, у Вас может быть компонент весом в 100-200 килобайт, который используется только на одной странице, но автоматически загружается на всех. Постарайтесь разделить ваш JavaScript на несколько кусочков (файлов) и загружать каждый из них только там, где он необходим. Этого легко можно добиться с помощью сборщиков, например, Webpack.

Влияние JS на отрисовку страницы

И помните, создание HTML страницы идет сверху вниз, и если браузер по пути отрисовки страницы встретит JS, он «поставит на паузу» отрисовку страницы пока не скачает (если необходимо) и не выполнит его. Поэтому старайтесь, чтобы ваш основной JS файл подключался ниже всего основного HTML, желательно перед закрывающимся тегом body, чтобы не задерживать отрисовку необходимого HTML. Если вы подключаете JS файл не внизу страницы, то используйте атрибут defer при подключении скрипта — это укажет браузеру на то, что этот скрипт нужно обрабатывать только после того, как вся страница будет полностью отрисована.

Сокращение времени ответа сервера

Есть еще один из самых важных пунктов для улучшение скорости загрузки страницы — сокращение времени ответа от сервера или времени до получение первого байта TTFB (Time to first byte). TTFB — это время, которое необходимо, чтобы отправить запрос от клиента (браузера) и получить первый байт данных от веб сервера.

Как работают алгоритмы магазинов прил, почему одни продукты оказывают в топе, а другие никак до него не доберутся? Виноваты ли в этом плохие отзывы или агрессивный дизайн, маленький бюджет на продвижение или плохо собранная семантика? Разбираемся в «дьявольских» деталях ASO-продвижения с ребятами из команды iRent!

Этот пункт является, пожалуй, самым сложным для оптимизации, потому что затрагивает довольно много аспектов, многие из которых специфичны для используемых инструментов, подходов к реализации, фреймворков или CMS. И поэтому нет какого-то универсального решения. Но зато есть несколько советов, на что нужно обратить внимание:

Используйте сервер с хорошей производительностью
Чем быстрее ваш сервер читает или записывает данные и быстрее обрабатывает различные процессы, тем быстрее ваш сайт вернет ответ пользователю.
Используйте последние версии
Старайтесь использовать самые последние версии языков программирования, фреймворков, библиотек, CMS, веб сервера или чего-либо еще, что работает на вашем сервере, чтобы пользоваться всеми преимуществами обновлений по производительности, которые могли быть выпущены. Так, PHP 7.0 дает прирост производительности в 180% по сравнению с предыдущей версией 5.6
Оптимизируйте запросы к Базе Данных
Посмотрите, может быть вы столкнулись с проблемой n+1, не добавили индексы там, где необходимо или запрашиваете много неиспользуемых данных.
Используйте кэширование
Каждый раз, когда пользователь делает запрос, на сервере делается запрос в базу данных (БД), генерируется HTML из данных и возвращается клиенту. Представьте, если у Вас сайт, на котором вы обновляете контент раз в неделю. Но все равно каждый раз при открытии сайта, будет происходить запрос в базу данных, даже если информация не обновлялась. Поэтому, когда первый раз пользователь делает запрос на определенные данные, вы можете получить их из БД, показать их пользователю и кэшировать (сохранить локально) эти данные, например, на неделю. После этого, в течение недели, все, кто будут открывать эту страницу уже не будут делать запрос в базу данных каждый раз — им будет показываться сохраненная копия этих данных. Это уменьшит время загрузки страницы и нагрузку на сервер. В некоторых случаях вы можете кэшировать не только данные из БД, но и страницы целиком.
Оптимизируйте скорость установления защищенного соединения SSL
Если вы используете SSL, установление защищенного соединения требует больше времени, чем незащищенного. Вы можете сделать это самостоятельно или использовать вспомогательные инструменты, например Cloudflare. Cloudflare будет выступать как посредник между пользователями и Вашим сайтом, все запросы будут проходить через него. Cloudflare также может справиться с DDoS атаками, которыми может быть подвержен Ваш сайт. Если не обращать на это внимания Ваш сайт может загружаться медленнее после установки SSL.
Кэшируйте статические ресурсы
К ним относятся JS, CSS, файлы, шрифты и изображения. Когда пользователь заходит на Ваш сайт, Вы можете дать браузеру выбрать откуда ему брать ресурсы, и это может оказать существенное влияние на время загрузки сайта. Вы можете сохранять статические ресурсы в браузере, когда пользователь первый раз заходит на Ваш сайт. Это и есть кэширование. Вы можете безопасно кэшировать статические ресурсы на долгое время: на 6 месяцев или даже на год. Cloudflare также может кэшировать все статические ресурсы на Вашем сайте. Но, что делать если за это время Вы изменили контент этих файлов, но не изменили название, например добавили пару строчек в свой JS файл? Изменить название файла! Но вы не можете постоянно менять название, но можете добавить какой-нибудь хэш как строку запроса, когда запрашиваете файл. Например, “/js/app.js?v=123456”. Вы будете запрашивать один и тот же файл, но технически для браузера это уже будет другой файл, который еще не был кэширован. Вы можете делать это вручную или, опять же, автоматизировать этот процесс с помощью сборщиков. Это называется контроль версий (versioning) или очистка кэша (cache busting).

CDN

Используйте сеть доставки контента (CDN) для статических ресурсов. Когда пользователь запрашивает изображение с Вашего сайта, он должен отправить запрос к Вашему серверу, независимо от того, где находится пользователь и Ваш сервер. CDN может помочь минимизировать расстояние от клиента до ресурса. CDN – это группа серверов, разбросанных по всему миру, работающих вместе, чтобы предоставить контент пользователю с находящегося максимально близко к нему сервера. CDN с одним из самых большим количеством серверов по всему миру — это Cloudflare. Как вы видите, есть несколько преимуществ начать использовать Cloudflare. Для большинства сайтов бесплатный тариф будет более чем достаточным. (Они не платят мне)