Created
September 29, 2023 00:06
-
-
Save aktaumag/0d530e3c88a563e8e736b44541d7ab43 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Отрисовка самого крупного контента |
https://www.youtube.com/watch?v=MHyAOZ45vnU
https://csswizardry.com/ct/ — букмарклет
Для экспериментов с порядком расположения блоков в теге HEAD нужно замерять время загрузки блока HEAD отдельно.
Это не сложно:
<head>
<meta charset="UTF-8">
<meta name="viewport" id="viewport" content="width=device-width,height=device-height, initial-scale=1.0">
<title>Заголовок, кодировка и viewport должны идти первыми</title>
<script>performance.mark('wsHEADstart');</script>
...
<!-- стили, скрипты, прелоады и прочие теги -->
...
<script>performance.mark('wsHEADend'); performance.measure('wsHEADtime', 'wsHEADstart', 'wsHEADend');</script>
</head>
<body>
...
<!-- код сайта -->
...
<script>performance.mark('wsBODYend'); performance.measure('wsBODYtime', 'wsHEADend', 'wsBODYend');</script>
<script>
// Отлавливаем ошибки, выдаваемые некоторыми браузерами при использовании новой опции `type`.
// https://bugs.webkit.org/show_bug.cgi?id=209216
try {
// Создаем объект performance observer.
const po = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
// Заносим запись и все связанные с ней детали в журнал.
console.log(entry.toJSON());
}
});
po.observe({type: 'measure', buffered: true}); // Начинаем отслеживать посылаемые записи `measure`.
po.observe({type: 'longtask', buffered: true});
} catch (e) {
// Если браузер не поддерживает этот API, ничего не делаем.
}
</script>
</body>
Есть примеры для замеров LCP, FID, longtask и других показателей времени, событий, действий:
https://web.dev/custom-metrics/
Там ещё есть Server Timing API, который заслуживает отдельного внимания в борьбе за производительность.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
https://csswizardry.com/2022/03/optimising-largest-contentful-paint/
https://csswizardry.com/2023/09/the-ultimate-lqip-lcp-technique/
lo-res.jpg — картинка такого же размера, но пережатая до определённого минимального веса.
Минимальный вес = (width × height × 0.05) / 8000
Если картинка-заполнитель будет меньше по весу, то она уже перестанет считаться за LCP
Для картинки 1024×768px:
(1024 × 768 × 0.05) / 8000 = 4.9152KB
Сжатие с выбором нужного размера или уровня сжатия:
https://ezgif.com/optiwebp