“Quando eu era mais jovem, muito mais jovem do que hoje” e chateado e cheio de vinagre sobre o estado do mundo, eu dizia coisas como “CSS é o pior” ( não mesmo ). Agora, meio ano depois, mais velho, mais sábio e mais receptivo, eu concordaria em suavizar para “CSS é bloqueio de renderização”.
CSS de bloqueio de renderização
O que isso significa é que o navegador não pode renderizar nada até que tenha o CSS que ele acha que precisa, tudo baixado e analisado. A renderização bloqueada é uma experiência ruim do usuário e também afeta negativamente as métricas FCP e LCP que o pessoal do Google considera importantes.
Carregar CSS o mais cedo possível é sempre tão importante. Normalmente, o CSS é descoberto quando o HTML é (mesmo que parcialmente) baixado e analisado. Mas podemos fazer melhor, graças às “dicas” que podemos enviar com os cabeçalhos HTTP2 da resposta HTML. Dessa forma, informamos ao navegador para iniciar o carregamento de CSS o mais rápido possível, sem nem mesmo esperar pela análise e descoberta de HTML.
Apavorante? Não. Consegui fazer isso com 2 linhas de código (ou 3 se você for um overachiever) na minha hospedagem compartilhada Dreamhost barata da velha escola com o servidor Apache executando esta instalação do WordPress. Veja como:
1. Certifique-se de que seu host suporte HTTP2,
2. Edite seu .htaccess,
3. …e adicione duas linhas semelhantes a estas:
H2PushResource /wp-content/themes/phpied2/style.css H2PushResource /wp-includes/css/dist/block-library/style.min.css?ver=5.4.1
Alguns detalhes…
Certifique-se de que seu host seja compatível com HTTP2
Eu uso Firefox e Brave, a maioria das pessoas usa Chrome ou Safari. Entre os 4 existem 3 versões de ferramentas de desenvolvimento e cascatas. Então vamos falar a língua franca e usar WebPageTest.org
Faça um teste em seu site e veja a visualização em cascata. Você pode identificar a versão do protocolo HTTP ao clicar no arquivo HTML.
Fiz um teste neste site e aqui está a minha opinião:
Editar .htaccess
.htaccessé apenas um arquivo de texto simples na raiz do seu site que pode ajustar algumas configurações do Apache. Já que estou falando do Dreamhost, aqui está o guia htaccess .
As duas linhas
OK, então o que você coloca no .htaccess? Voltando ao teste que fiz, posso ver como 2 arquivos CSS estão impedindo a renderização.
Observe como a barra azul (download HTML) tem uma seção azul escura. Esta é a análise de HTML. E imediatamente depois disso, os 2 downloads de CSS começam. O que queremos fazer é mover os downloads de CSS para a esquerda, para que toda a renderização comece (e termine!) mais cedo.
Então, tudo o que você faz é pegar os URLs desses dois arquivos e adicioná-los .htaccessna H2PushResourcefrente. Para mim, isso significa a URL para o CSS do meu tema personalizado /wp-content/themes/phpied2/style.css, bem como algumas coisas CSS do WordPress.
Enquanto eu estava lá, também adicionei um arquivo JavaScript que é carregado mais tarde. Por que agora começar cedo? Então o resultado final é:
H2PushResource /wp-content/themes/phpied2/style.css H2PushResource /wp-includes/css/dist/block-library/style.min.css?ver=5.4.1 H2PushResource /wp-includes/js/wp-emoji-release.min.js?ver=5.4.1
Novamente, o JS é opcional e não é relevante para o desbloqueio do bloqueio de renderização.
Como você pode ver, no caso “depois” o download do CSS não espera mais pela análise do HTML. Como resultado, tudo é mais rápido – DOMContentLoaded, start render, onload, FCP, LCP. Todas as linhas verticais acontecem 100ms mais cedo. Nada mal para alguns minutos de esforço.
O que acontece como resultado dessas 3 linhas de .htaccessconfiguração é que os cabeçalhos HTTP do HTML agora contêm 3 links de pré-carregamento. É assim que o navegador sabe ir buscar CSS mesmo antes de baixar e analisar HTML.
Palavra de cautela
O que descrevo aqui é uma coisa única para demonstração. Como você provavelmente pode adivinhar pelo “5.4.1”, ao atualizar o WordPress ou alterar temas, pode ser necessário alterar as URLs do CSS pré-carregado no arquivo .htaccess. Não seria bom se houvesse um plugin que fizesse isso automaticamente para que você não precisasse se preocupar com cada atualização? LMK se houver um, eu adoraria definir e esquecer.
Nós podemos fazer melhor
Podemos. Não posso porque a hospedagem compartilhada do Dreamhost não me permite editar a configuração do Apache além do .htaccess. Mas se você tiver acesso ao servidor ou configuração do host virtual.
Basicamente, tudo o que você precisa fazer além do que fizemos .htaccessé adicionar:
H2Dicas antecipadas em
E é isso. Isso enviará uma 103 Early Hintsresposta HTTP com os arquivos CSS antes mesmo da 200 OKresposta. Apenas em navegadores suportados, que é basicamente o Chrome v103 por enquanto (Entendi? v103 suporta 103 respostas), isso significa que se o WP ainda estiver trabalhando na resposta HTML (por exemplo, buscando dados), o CSS já pode começar a baixar. Esta é uma grande melhoria. Para saber mais, confira este tópico do Twitter e este post .
Uma foto diz…
Aqui está uma tentativa de representar esses 3 casos “graficamente”:
// #1 status quo
connect ---> 200 OK header (sem dicas CSS) ---> HTML
---> CSS
// #2 com dicas de acordo com este blog
connect ---> 200 OK header (com dicas CSS) ---> HTML
---> CSS
// #3 com dicas em uma resposta 103
conectar ---> 103 (com dicas CSS) ---> 200 OK ---> HTML
---> CSS
Obviamente o número 1 é o pior, é assim que sempre foi.
#2 descrito acima com dicas de CSS é melhor.
O nº 3 com a resposta 103 pode ser aproximadamente o mesmo que o nº 2 se o CSS for pequeno e o HTML for rápido (por exemplo, estático). Mas se o CSS for grande ou o HTML for lento, o número 3 pode ser uma vitória dramática. Enquanto o servidor ainda está verificando os bancos de dados e trabalhando na resposta 200 OK, o navegador teve a chance de baixar e analisar o CSS e tê-lo pronto.
Tome cuidado agora
Adeus então. Torne a Web mais rápida!
Atualização: o mesmo, mas em PHP
Algumas pessoas se perguntaram no Twitter como fazer o mesmo com o NGINX. Eu acho que alternativamente o mesmo pode ser feito em PHP em vez de .htaccess. Isso deve funcionar em todos os servidores.
No functions.phpseu tema WordPress, adicione:
dicas de função() {
header("link: </wp-content/themes/phpied2/style.css>; rel=preload, </wp-includes/css/dist/block-library/style.min.css?ver=5.4.1> ; rel=pré-carregamento");
}
add_action('send_headers', 'dicas');
Isso envia os mesmos cabeçalhos, mas usando PHP. Agora, se alguém experiente com plugins do WordPress quiser transformar isso em um plugin, para que não precisemos codificar caminhos CSS, eu adoraria!