Оптимизация быстродействия сайта

CSS

• CSS and Network Performance – CSS Wizardry
• 5 tricks to eliminate render blocking resources

Минификация

• CSSO: CSS minifier with structural optimizations

Шрифты

• The Fastest Google Fonts – CSS Wizardry
  • The Simplest Way to Load CSS Asynchronously
• FOUT - побочный эффект при использовании @font-face и борьба с ним
• typekit/webfontloader: Web Font Loader gives you added control when using linked fonts via @font-face.
  • Loading a (Google) webfont asynchronously - A blog about Laravel Framework, web development and related stuff | Barry van Veen
  • Config for loading Google fonts Asynchronously using Web Font Loader: https://github.com/typekit/webfontloader
  • Why you shouldn’t load custom fonts asynchronously

Use the media attribute for conditional CSS

• postcss-extract-media-query - npm
• SassNinja/postcss-extract-media-query: PostCSS plugin to extract all media query from CSS and emit as separate files.

Асинхронная загрузка CSS

Самое короткое решение: 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 — он может повышать приоритет загружаемых файлов в ущерб критическим.

JavaScript

Оптимальная схема — подключение JS в <head> с добавлением атрибута defer:

<script defer src="script.js"></script>

Разъяснение: Efficiently load JavaScript with defer and async

Изображения

• ccforward/progressive-image: A progressive-image module for Vanilla JavaScript and Vue 1.0+ & 2.0+

Hugo

10 Ways to improve your (Hugo) website performance

Быстрые CSS Frameworks

• https://getbase.org/ (PageSpeed Insights: 99/98)
  • Примеры:
    • https://getbase.org/templates/business-template/ (PageSpeed Insights: 99/100)
    • https://getbase.org/templates/restaurant-template/ (PageSpeed Insights: 87/94)
• Pure
• Silver, the smallest CSS grid ever — a simple flexbox grid system (like 15 lines of code)

Google PageSpeed Insights Bookmarklet

javascript:(function(){window.location='https://developers.google.com/speed/pagespeed/insights/?url='+encodeURIComponent(window.location.href);})();