First Meaningful Paint (FMP)

Published on Updated on

Translated to: English, Español, 한국어

Caution

A métrica first-meaningful-paint (FMP) foi descontinuada no Lighthouse 6.0. Na prática, a FMP tem sido excessivamente sensível a pequenas diferenças no carregamento da página, levando a resultados inconsistentes (bimodais). Além disso, a definição da métrica depende de detalhes de implementação específicos do navegador, o que significa que não pode ser padronizada nem implementada em todos os navegadores da web. Seguindo em frente, considere usar a Largest Contentful Paint.

First Meaningful Paint (FMP) é uma das seis métricas monitoradas na seção Desempenho do relatório Lighthouse. Cada métrica captura algum aspecto da velocidade de carregamento da página.

O Lighthouse exibe FMP em segundos:

Uma captura de tela da auditoria da First Meaningful Paint

O que mede a FMP

O FMP mede quando o conteúdo principal de uma página está visível para o usuário. A pontuação bruta para FMP é o tempo em segundos entre o usuário iniciar o carregamento da página e a página que renderiza o conteúdo primário acima da dobra. A FMP mostra essencialmente o tempo da pintura após o qual a maior mudança de layout acima da dobra acontece. Saiba mais sobre os detalhes técnicos da FMP em Time to First Meaningful Paint do Google: uma abordagem baseada em layout.

First Contentful Paint (FCP) e FMP são geralmente as mesmas quando o primeiro bit de conteúdo renderizado na página inclui o conteúdo acima da dobra. No entanto, essas métricas podem ser diferentes quando, por exemplo, há conteúdo acima da dobra em um iframe. A FMP registra quando o conteúdo do iframe é visível para o usuário, enquanto a FCP não inclui o conteúdo do iframe.

Como o Lighthouse determina sua pontuação FMP

Assim como a FCP, a FMP é baseada em dados reais de desempenho de sites do HTTP Archive.

Quando FMP e FCP são iguais, suas pontuações são idênticas. Se a FMP ocorrer após a FCP - por exemplo, quando uma página contém conteúdo iframe - a pontuação da FMP será menor do que a pontuação da FCP.

Por exemplo, digamos que sua FCP é de 1,5 segundos e sua FMP é de 3 segundos. A pontuação FCP seria 99, mas a pontuação FMP seria 75.

Esta tabela mostra como interpretar sua pontuação FMP:

Métrica FMP
(em segundos)
Codificação de coresPontuação FMP
(Percentil FCP HTTP Archive)
0–2Verde (rápido)75-100
2-4Laranja (moderado)50-74
Acima de 4Vermelho (lento)0-49

See the Lighthouse performance scoring post to learn how your page's overall performance score is calculated.

Como melhorar sua pontuação FMP

Veja Como melhorar a Largest Contentful Paint em seu site. As estratégias para melhorar a FMP são basicamente as mesmas que as estratégias para melhorar a Largest Contentful Paint.

Rastreando FMP em dispositivos de usuários reais

Para saber como medir quando a FMP realmente ocorre nos dispositivos dos usuários, consulte a página Métricas de desempenho centradas no usuário do Google. A seção Acompanhamento de FMP usando elementos hero descreve como acessar programaticamente os dados da FCP e enviá-los ao Google Analytics.

Consulte Avaliação do desempenho de carregamento do Google na vida real com navegação e tempo de recursos para obter mais informações sobre como coletar métricas de usuários reais. A auditoria Marcas e medidas de tempo do usuário do Lighthouse permite que você veja os dados de tempo do usuário em seu relatório.

How to improve your overall Performance score

Unless you have a specific reason for focusing on a particular metric, it's usually better to focus on improving your overall Performance score.

Use the Opportunities section of your Lighthouse report to determine which improvements will have the most value for your page. The more significant the opportunity, the greater the effect it will have on your Performance score. For example, the Lighthouse screenshot below shows that eliminating render-blocking resources will yield the biggest improvement:

Lighthouse: Opportunities section

See the Performance audits landing page to learn how to address the opportunities identified in your Lighthouse report.

Recursos

Updated on Improve article

This site uses cookies to deliver and enhance the quality of its services and to analyze traffic. If you agree, cookies are also used to serve advertising and to personalize the content and advertisements that you see. Learn more about our use of cookies.