Romych: /* Статьи */

2022-01-24T15:13:11Z

Статьи

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

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

== Статьи ==
* [https://tichiy.ru/wiki/uskorenie-raboty-sajta-boremsya-s-google-pagespeed/ Ускорение работы сайта. Боремся с Google PageSpeed]
* [https://vc.ru/dev/155436-uskoryaem-rabotu-sayta-na-etape-razrabotki-i-obgonyaem-konkurentov-v-poiske Ускоряем работу сайта на этапе разработки и обгоняем конкурентов в поиске — Разработка на vc.ru]
* [https://vc.ru/dev/158627-uskoryaem-rabotu-sayta-na-etape-razrabotki-i-obgonyaem-konkurentov-v-poiske-chast-2 Ускоряем работу сайта на этапе разработки и обгоняем конкурентов в поиске - Часть 2 — Разработка на vc.ru]
* [https://habr.com/ru/post/467503/ Разгоняем Google PageSpeed до 100 и больше / Хабр]
* [https://sit-info.ru/skripty-dlja-otlozhennoj-zagruzki-koda-vneshnih-servisov/ Скрипты для отложенной загрузки кода внешних сервисов]
----
* [https://web-standards.ru/articles/web-vitals-lighthouse/ Оптимизация метрик Web Vitals с помощью Lighthouse]
* [https://csswizardry.com/2018/11/css-and-network-performance/ CSS and Network Performance] – CSS Wizardry
* [https://dev.to/thenationshakya/frontend-performance-optimization-2n8p Frontend Performance Optimization]
* [https://dev.to/prototyp/improving-website-performance-by-eliminating-render-blocking-css-and-javascript-28ei Improving website performance by eliminating render-blocking CSS and JavaScript]
* [https://tobiasahlin.com/blog/how-to-animate-box-shadow/ How to animate box-shadow with silky smooth performance]

== Critical CSS ==

* [https://github.com/addyosmani/critical 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/:

<source lang="html">

<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>
</source>

== Extract Media Query ==

* [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.

== quicklink ==

* [https://github.com/GoogleChromeLabs/quicklink GoogleChromeLabs/quicklink: ⚡️Faster subsequent page-loads by prefetching in-viewport links during idle time]
* [https://github.com/GoogleChromeLabs/quicklink/tree/master/demos/news quicklink/demos/news] A demo showing how to use Quicklink on a simple multi-page website.

Performance - Історія редагувань

Romych: /* Статьи */