15 июля 2020 0 комментариев

Улучшение скорости загрузки сайта. Часть 2. Оптимизация CSS и JavaScript файлов

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 — это время, которое необходимо, чтобы отправить запрос от клиента (браузера) и получить первый байт данных от веб сервера.


Этот текст скопирован с сайта https://zorbasmedia.ru

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

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

CDN

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

Выводы

Попробуйте применить эти несложные советы для оптимизации скорости загрузки Вашего сайта, и я уверен время его загрузки существенно сократится.

 
 

Этот текст скопирован с сайта https://zorbasmedia.ru

Есть, что рассказать об арбитраже трафика? Стань автором ZorbasMedia!

 

Избранные статьи
Кейс: тысячи долларов профита с пуш-уведомлений на дейтинг Кейс спикера конференции ZM CONF - Алексея Домарёва (Демиург). О том, как лить с пушей на дейтинг -- читайте в материале.
Кто кроме партнерки может шейвить Разработчик мобильных приложений под арбитраж и веду Telegram канал “Про Mobile” — Lukos рассказывает о том, что шейвить трафик могут не только партнерки, но и разработчики приложений.
Как проходят модерацию в Google Play с приложениями под гемблинг Всем привет! С вами Lukos, я разрабатываю мобильные приложения под арбитраж и веду Telegram канал “Про Mobile”. Читая интервью с представителями разных арбитражных команд, я часто слышал, что у них просто крутые прилки или заливают они в какую-то особенную категорию, хорошие аккаунты, нашли необычный способ и так далее. Я понимаю их мотивы, выносить все это […]...
Комментарии
Нет комментариев
Оставьте комментарий
Ответ на комментарий: ....
На этом сайте используются файлы cookie. Закрыв это сообщение и продолжая просмотр сайта, вы разрешаете их использование.