Оптимизация быстродействия сайта
- The Fastest Google Fonts – CSS Wizardry
- FOUT - побочный эффект при использовании @font-face и борьба с ним
- typekit/webfontloader: Web Font Loader gives you added control when using linked fonts via @font-face.
- postcss-extract-media-query - npm
- SassNinja/postcss-extract-media-query: PostCSS plugin to extract all media query from CSS and emit as separate files.
Самое короткое решение: How to load CSS asynchronously
<link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'; this.onload=null;">
Короткое объяснение:
By declaring a media type that doesn’t match the current environment, we can achieve an interesting and useful effect: the browser will load the stylesheet without delaying page rendering, asynchronously!
Полное объяснение: Modern Asynchronous CSS Loading
В первой же статье объясняется, почему не рекомендуется использовать preload — он может повышать приоритет загружаемых файлов в ущерб критическим.
Оптимальная схема — подключение JS в <head> с добавлением атрибута defer:
<script defer src="script.js"></script>
Разъяснение: Efficiently load JavaScript with defer and async
10 Ways to improve your (Hugo) website performance
- https://getbase.org/ (PageSpeed Insights: 99/98)
- Pure
- Silver, the smallest CSS grid ever — a simple flexbox grid system (like 15 lines of code)
javascript:(function(){window.location='https://developers.google.com/speed/pagespeed/insights/?url='+encodeURIComponent(window.location.href);})();