Skip to content

Instantly share code, notes, and snippets.

@aktaumag

aktaumag/Largest Contentful Paint (LCP)

Created September 29, 2023 00:06
Show Gist options
  • Save aktaumag/0d530e3c88a563e8e736b44541d7ab43 to your computer and use it in GitHub Desktop.
Save aktaumag/0d530e3c88a563e8e736b44541d7ab43 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Largest Contentful Paint (LCP)
Отрисовка самого крупного контента
@aktaumag
Copy link
Author

aktaumag commented Oct 1, 2023 •
edited
Loading

image

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, который заслуживает отдельного внимания в борьбе за производительность.

@wseopw
Copy link

wseopw commented May 10, 2024

https://gwfh.mranftl.com/fonts

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment