Romych: /* Быстрые CSS Frameworks */

2020-10-12T08:31:14Z

Быстрые CSS Frameworks

Нова сторінка

== CSS ==

* [https://csswizardry.com/2018/11/css-and-network-performance/ CSS and Network Performance] – CSS Wizardry
* [https://blog.logrocket.com/5-tricks-to-eliminate-render-blocking-resources/ 5 tricks to eliminate render blocking resources]

=== Минификация ===

* [https://github.com/css/csso CSSO: CSS minifier with structural optimizations]

=== Шрифты ===

* [https://csswizardry.com/2020/05/the-fastest-google-fonts/ The Fastest Google Fonts] – CSS Wizardry
** [https://www.filamentgroup.com/lab/load-css-simpler/ The Simplest Way to Load CSS Asynchronously]
* [https://webknowledge.ru/fout-pobochnyi-effect-pri-ispolzovanii-font-face-i-borba-s-nim/ FOUT - побочный эффект при использовании @font-face и борьба с ним]
* [https://github.com/typekit/webfontloader typekit/webfontloader: Web Font Loader gives you added control when using linked fonts via @font-face.]
** [https://barryvanveen.nl/blog/21-loading-a-google-webfont-asynchronously Loading a (Google) webfont asynchronously - A blog about Laravel Framework, web development and related stuff | Barry van Veen]
** [https://gist.github.com/zeshanshani/0fc66812d4379d38c81fc0195a770c51 Config for loading Google fonts Asynchronously using Web Font Loader: https://github.com/typekit/webfontloader]
** [https://blog.logrocket.com/5-tricks-to-eliminate-render-blocking-resources/ Why you shouldn’t load custom fonts asynchronously]

=== Use the media attribute for conditional CSS ===

* [https://www.npmjs.com/package/postcss-extract-media-query postcss-extract-media-query - npm]
* [https://github.com/SassNinja/postcss-extract-media-query SassNinja/postcss-extract-media-query: PostCSS plugin to extract all media query from CSS and emit as separate files.]

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

Самое короткое решение: [https://gomakethings.com/how-to-load-css-asynchronously/ How to load CSS asynchronously]

<source lang="html5">
<link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'; this.onload=null;">
</source>

Короткое объяснение:

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!

Полное объяснение: [https://www.filamentgroup.com/lab/async-css.html Modern Asynchronous CSS Loading]

В первой же статье объясняется, почему не рекомендуется использовать <code>preload</code> — он может повышать приоритет загружаемых файлов в ущерб критическим.

== JavaScript ==

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

<source lang="html5">
<script defer src="script.js"></script>
</source>

Разъяснение: [https://flaviocopes.com/javascript-async-defer/ Efficiently load JavaScript with defer and async]

== Изображения ==

* [https://github.com/ccforward/progressive-image ccforward/progressive-image: A progressive-image module for Vanilla JavaScript and Vue 1.0+ & 2.0+]

== [[Hugo]] ==

[https://martijnvanvreeden.nl/10-ways-to-improve-your-hugo-website-performance/#chapter5 10 Ways to improve your (Hugo) website performance]

== Быстрые CSS Frameworks ==

* https://getbase.org/ ([https://developers.google.com/speed/pagespeed/insights/?hl=ru&url=https%3A%2F%2Fgetbase.org%2F&tab=mobile PageSpeed Insights]: 99/98)
** Примеры:
*** https://getbase.org/templates/business-template/ ([https://developers.google.com/speed/pagespeed/insights/?hl=ru&url=https%3A%2F%2Fgetbase.org%2Ftemplates%2Fbusiness-template%2F&tab=mobile PageSpeed Insights]: 99/100)
*** https://getbase.org/templates/restaurant-template/ ([https://developers.google.com/speed/pagespeed/insights/?hl=ru&url=https%3A%2F%2Fgetbase.org%2Ftemplates%2Frestaurant-template%2F&tab=mobile PageSpeed Insights]: 87/94)
* [https://purecss.io/ Pure]
* [https://mtm.dev/grid/ Silver, the smallest CSS grid ever] — a simple flexbox grid system (like 15 lines of code)

== Google PageSpeed Insights Bookmarklet ==

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

Оптимизация быстродействия сайта - Історія редагувань

Romych: /* Быстрые CSS Frameworks */