Performance
- Ускорение работы сайта. Боремся с Google PageSpeed
- Ускоряем работу сайта на этапе разработки и обгоняем конкурентов в поиске — Разработка на vc.ru
- Ускоряем работу сайта на этапе разработки и обгоняем конкурентов в поиске - Часть 2 — Разработка на vc.ru
- Разгоняем Google PageSpeed до 100 и больше / Хабр
- Скрипты для отложенной загрузки кода внешних сервисов
- Оптимизация метрик Web Vitals с помощью Lighthouse
- CSS and Network Performance – CSS Wizardry
- Frontend Performance Optimization
- Improving website performance by eliminating render-blocking CSS and JavaScript
- How to animate box-shadow with silky smooth performance
- addyosmani/critical — Extract & Inline Critical-path CSS in HTML pages
- https://github.com/addyosmani/critical-path-css-demo — пример сайта до и после выделения critical css.
Пример подключения non-critical стилей внизу страницы https://addyosmani.com/critical-path-css-demo/output/critical/:
<!-- Async load cross-site CSS, mostly interesting for production -->
<script>
function loadCSS(e,t,n){"use strict";var i=window.document.createElement("link");var o=t||window.document.getElementsByTagName("script")[0];i.rel="stylesheet";i.href=e;i.media="only x";o.parentNode.insertBefore(i,o);setTimeout(function(){i.media=n||"all"})}
loadCSS('styles/site.css');
</script>
- SassNinja/postcss-extract-media-query — PostCSS plugin to extract all media query from CSS and emit as separate files.
- GoogleChromeLabs/quicklink: ⚡️Faster subsequent page-loads by prefetching in-viewport links during idle time
- quicklink/demos/news A demo showing how to use Quicklink on a simple multi-page website.