Способы оптимизировать скорость загрузки сайта

optimize_site_speed_ways.txt

Необходимые максимальные показатели (wi-fi, 200 mb/s, октябрь 2020):

Desktop:
1. FCP - 0.6s
2. Time To Interactive - 1.9s
3. Speed Index - 1.2s
4. LCP - 0.8s
5. CLS - 0.001s
6. Total Blocking Time - 0.1s
7. DomContentLoaded - 1.5s
8. onLoad - 2s

Mobile:
1. FCP - 2.0s
2. Time To Interactive - 3s
3. Speed Index - 3s
4. LCP - 0.8s
5. CLS - 0.003s
6. Total Blocking Time - 0.1s
7. DomContentLoaded - 2.5s
8. onLoad - 3s

Выше — примерная оценка для сайта qweep.ru. 
Самый лучший способ узнать точные максимальные показатели для вашего сайта — посмотрите сайт ваших конкурентов и сделайте лучше.

Как потестить?
1. Developer Tools: Generate Report в Lighthouse
2. Developer Tools: во вкладке Network изменить Online на Fast 3G или Slow 3G и проверить работу сайта на таком соединении
3. Developer Tools: во вкладке Performance включить запись и пройти самому юзерский путь
4. Developer Tools: во вкладке Javascript Profiler включить запись и посмотреть, где браузер тратит больше всего времени

Способы оптимизации:
1. Удалить ненужный js (нужно открыть Coverage в консоли, чтобы увидеть неиспользуемый js)
2. Оптимизировать оставшийся js (см. ниже способы оптимизации js)
3. Удалить неиспользуемый css
4. Оптимизировать оставшийся css (см. ниже способы оптимизации css)
5. Использовать по возможности async и defer для скриптов
6. Уменьшить количество http-запросов
7. Посмотреть нет ли задержки со стороны сервера
8. Использовать lazy-loading (https://bit.ly/3iX1702, https://bit.ly/316TQoe)
9. Прогрессивная загрузка шрифтов
10. Сделать анимации, требующие отклика, максимум длительностью 50ms (https://web.dev/rail/#50-ms-or-100-ms)
11. Убрать ненужные анимации
12. Избегайте изменения размеров элементов на странице (https://bit.ly/3jT0Egu)
13. Использовать WEBP или JPEG вместо PNG, если не нужна прозрачность.
14. Использовать разные изображения для разных девайсов (тег picture к примеру)
15. Заменить все гифки на видео
16. Убрать метадату из изображений
17. Воспользоваться спрайтами там, где это возможно
18. Сделать так, чтобы изображения загружались при прокрутке (https://web.dev/lazy-loading-images/)
19. Отправлять сжатые данные с сервера (gzip к примеру)
20. Некоторые проблемы с рендерингом, например, листенеры скролла или тача: https://bit.ly/318uBC2
21. Прочее. Смотрите в аналитике лайтхауса: https://bit.ly/3jWiK1i

Способы оптимизации js:
1. Optimize javascript execution: https://bit.ly/3dqKclq
2. Debounce your input handlers: https://bit.ly/3iXkfLk

Способы оптимизации css:
1. Использовать will-change
2. Reduce the scope and complexity of style calculations: https://bit.ly/2FpHL5N
3. Avoid large complex layouts and layout thrashing: https://bit.ly/3nGMl0O
4. Simplify Paint Complexity and Reduce Paint Areas: https://bit.ly/34RS4Z6
5. Stick to Compositor-Only Properties and Manage Layer Count: https://bit.ly/3iQbKBC

Способы оптимизации vue/nuxt:
1. https://vueschool.io/articles/vuejs-tutorials/nuxt-ssr-optimizing-tips/

Здесь источники данных о максимальных показателях: 
1. https://httparchive.org/reports/loading-speed#fcp
2. https://web.dev/lighthouse-performance/
3. https://web.dev/your-first-performance-budget/
4. https://codeburst.io/performance-metrics-whats-this-all-about-1128461ad6b

Здесь — о способах:
1. https://web.dev/lighthouse-performance/
2. https://webmasters.googleblog.com/search/label/speed 
3. https://developers.google.com/web/tools/chrome-devtools/evaluate-performance
4. https://propelrr.com/blog/page-speed-optimization
5. https://developers.google.com/web/fundamentals/performance/get-started
6. https://web.dev/fast/
7. https://3perf.com/talks/web-perf-101
8. Content loading js events, i.e DOMContentLoaded