Ainda é recomendável alinhar o CSS acima da dobra com a adoção do http / 2?


8

Há algum tempo, venho seguindo a recomendação do Google aqui ( https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery ) para alinhar o CSS crítico acima da dobra para obter tempos de carregamento mais rápidos. Fiquei me perguntando, isso ainda será necessário com a adoção do http2 cada vez mais alto? Meu raciocínio é a maneira como entendo que o http2 permite solicitações paralelas em uma conexão para que o CSS possa começar a baixar imediatamente? Alguém me corrija se meu entendimento de como o http2 funciona estiver errado está errado ...

Respostas:


2

Você está certo sobre a necessidade de não alinhar mais o CSS com a adoção do HTTP / 2. Por uma questão de fato, as melhores práticas de HTTP / 2 sugerem o oposto de inlining. A pergunta que permanece para você e para qualquer leitor deste post é: quando é o momento certo para fazer essa troca?

Uma mudança de inlining para não mais inlining (e o mesmo seria verdadeiro para sprites de imagem) deve realmente ser feita apenas após uma avaliação cuidadosa dos recursos do navegador / cliente dos usuários para aceitar HTTP / 2. O uso de análises para informar sua decisão elimina as suposições, se houver.

Com o tempo, eu não ficaria surpreso ao ver modificações no apache, mod_pagespeed, nginx, vanish e outros, para fazer automaticamente a linha automaticamente apenas para clientes / navegadores HTTP / 1. Portanto, fique atento às atualizações de versão dos principais servidores da Web para ajudar a automatizar essa alteração.

Para obter mais informações sobre HTTP / 2, recomendo o podcast changelog.com sobre HTTP / 2 com Ilya Grigorieva, o principal arquiteto por trás dos esforços http / 2 do Google: ouça a entrevista aqui


1

A idéia por trás da inclusão de linhas acima da dobra ainda é boa porque as solicitações de CSS ainda levam a mesma quantidade de tempo e as páginas ainda são bloqueadas enquanto o arquivo CSS está sendo baixado. O HTTP / 2 não acelera os downloads. Permite o download simultâneo. Dessa forma, as imagens e outros arquivos não estão vinculados aguardando seu lugar na fila, mas, novamente, leva tanto tempo para fazer o download e executar ou instalá-los quanto antes do HTTP / 2.


Digamos que você tenha uma página com um arquivo css e uma imagem. A imagem tem um tamanho de arquivo maior que o css. Se eles forem baixados simultaneamente, não importaria se o CSS foi embutido ou não, porque o tempo de download levará tanto tempo quanto o recurso mais longo, neste caso, a imagem?
precisa saber é o seguinte

@ jetyet47 Meu argumento era que o OP achava que o HTTP / 2 acelera o download. Isso não. Observe que o CSS bloqueia a primeira pintura até que seja baixado e o modelo de objeto CSS seja criado.
Rob
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.