Top Tips to Improve Web Performance (конспект на русском языке)

Мой конспект по плейлисту от Google по поводу быстрой загрузки страниц сайта или Top Tips to Improve Web Performance.

1. Оптимизировать время загрузки страницы: шрифт значка или SVG? Иконочные шрифты (как например в Бутстрапе 3)
2. Загружайте страницу быстрее: высокопроизводительные карусели изображений Слайдеры типа Owl или Slick должны использоваться в режиме loadLazy. Пример: https://qna.habr.com/q/395591
3. Оптимизируйте свой код: загружайте код в нужное время Внешние файлы Script необходимо вынести из Head в Body. Это только начало. Всего 3 уровня:
   1. Шаг. Вынести все не важные скрипты например Онлайн чат и Трекер перед закрывающимся </body>. В Head оставить только скрипт обработчик скролла, для действий с Шапкой (если такой есть), и Файл подключение jQuery
   2. Шаг. Использовать Async и Defer
   3. Шаг. Загружать скрипты на страницу динамично. В видео показан пример кода на jQuery и ванильном JS
      В итоге должно получится 3 группы Скриптов:
      1. Загружаются в Head.
      2. Загружаются внизу перед </body>
      3. Загружаются динамично после загрузки страницы 
4. Уменьшить размер изображения: используйте правильный формат - PNG или JPEG Использовать для фото Webp для Логотипов и иконок SVG. К слову есть мысль как сделать background webp с фалбэком: нужно проверить JS ом, есть ли поддержка webp, если поддержки нет устанавливаем класс на body webp_unsupport - по умолчанию отдавать webp, но если не поддерживается - переопределять на фалбэк Png.
5. Уменьшить размер изображения: оптимизировать сжатие изображения Управление степеньюю сжатия, или качеством, или компрессией. Предлогают пример: взять 1 фото и сжать его в 3ех вариантах:
   1. 100% - без потерь (экономия несколько 10 кб)
   2. 80% - c малыми потерями (экономия 100+ кб)
   3. 60% - среднии потери (экономия максимальна)
      Далее, устанавливаем на сайт все 3 варианта - если разница не ощутима - оставляем самый оптимизированный и легковесный
6. Уменьшить размер изображения: использовать медиа-запросы для фоновых изображений Backroun-image - заданные через Css нельзя отдавать с помощью src-set как <img/>, но его также можно задать при помощи media-query. Предлагается правило: Изображение не должно весить больше 100 кб, и Изображение должно весить максимум (200 кб * ту часть экрана которое оно занимает) - например, если это Hero изображение - оно может весить 200 кб, так как занимает 1 целую часть экрана. В видео используют 2 брек поинта:
   1. max-with: 800 - если мобильный с экраном меньше или равно 800 - используется картинка hero_small.jpg
   2. max-with: 1600 - если декстоп или планшет не привышает 1600 px - используется hero_medium.jpg
   3. Остаётся пустое, срабатывает при условии что экран более 1600 px - тогда используется оригинальная картинка hero.jpg (её ширина 2240 px)
      Примечание: картинки сжимают с потерями: качество: 90%
7. Уменьшить размер изображения: используйте srcset для автоматического выбора правильного изображения Браузер умеет выбирать нужное изображение из src set в зависимости от рендер изображения, как например происходит с изображениями в блоке блога. На десктопе картинки маленькие, пока, они 3 штуки в ряд. На мобильном каждая картинка больше так как 1 картинка на весь ряд - здесь подойдёт src-set. Для примера приводят таки срц сеты:
   1. 100w - название с суффиксом _small.jpg
   2. 400w - название с _medium
   3. Обычная для фолбэка и для того что б показать при условии что картинка будет отображаться в ширину более чем 400px. Название без суффиксов
8. Быстрое обнаружение самых серьезных проблем с веб-сайтом с помощью Chrome DevTools Как пользоваться вкладкой Network в DevTools