Seguindo técnicas de otimização de desempenho da Web para produzir css estático e dynamic

Eu sempre senti que a forma como os estilos são tratados no WordPress não é otimizada em relação às técnicas de otimização de desempenho da Web (WPO) que estão relacionadas ao css.

Do ponto de vista do desenvolvedor de um tema, não se pode confiar nos usuários que instalam e configuram um plugin que combina e minifique o css, portanto, manter um olho no desempenho é sempre desejável.

Vamos esquecer minificação e outras otimizações, como evitar a carga de trocas de código que não estão sendo usadas ou duplicando seletores. Eu me perguntei sobre a melhor abordagem para servir o css de um tema que satisfaz os seguintes pressupostos:

  1. O tema serve apenas um arquivo css com estilos estáticos e dynamics nele.
  2. O CSS não está embutido em qualquer parte do tema, portanto, não são possíveis chamadas para wp_add_inline_style .
  3. Os estilos são fáceis de manter .

Qual abordagem é preferível e por quê? No caso de um arquivo css ser criado durante o processo, quais medidas devem ser tomadas para lidar com esse processo de geração de resources intensivos? Eu acredito que, em vez de fazê-lo sempre que WordPress é carregado, isso pode ser resolvido regenerando o arquivo css somente sob certas circunstâncias. Estes vieram à minha mente:

  • Ativação do tema.
  • Alterações no personalizador (ou aonde as opções de estilo estão definidas).

Existem algumas outras circunstâncias em que o stream do conteúdo css é desejável?


Eu tentei vários caminhos até agora:

APROXIMAÇÃO 1

Carregue um estilo.php na cabeça com

 wp_register_style( 'my-theme-styles', 'style-generator.php' ); wp_enqueue_style( 'my-theme-styles' ); 

e então, no arquivo php, analise o css assim

 header("Content-type: text/css"); //The styles themselves 

Pensamentos:

  • Escrever estilos em php é … feio.
  • É difícil dividir a geração css em vários arquivos php para fins de manutenção.
  • O suporte do navegador e do servidor para essa abordagem não está completo.
  • Os estilos são gerados toda vez que o WordPress é carregado, a menos que os transientes estejam em uso, adicionando mais complexidade.
  • Gosto que nenhum arquivo esteja escrito no servidor.

APROVAÇÃO 2

De forma semelhante à abordagem anterior, gere todo o código css a partir de uma function php, mas, em vez de carregar diretamente o arquivo php, file_put_contents( 'styles.css' ); seu conteúdo com file_put_contents( 'styles.css' ); que é mais tarde carregado com wp_enqueue_style .

Pensamentos:

  • Escrever estilos em php continua sendo complicado.
  • É difícil dividir a geração css em vários arquivos php para fins de manutenção.
  • Escrever um arquivo na pasta do tema pode criar problemas com a forma como algumas instalações são tratadas em relação às permissions da pasta. Escrevê-lo na pasta de carregamentos não parece ser muito elegante.

APROXIMAÇÃO 3

Integre todos os estilos dentro do tema em uma linguagem de préprocessador css e simplesmente passe os estilos dynamics para o gerador como variables. Então todo o código css é mesclado e escrito automaticamente em um único arquivo. Não irei publicar o código desta parte, já que é bastante extenso, mas também estou funcionando.

Pensamentos:

  • Funciona muito bem: os pré-processadores do css são muito convenientes, permitem o uso do arquivo include chamadas e manter o código legível, por isso é muito fácil manter os estilos.
  • A solução depende de bibliotecas de terceiros que possam ter erros ou se tornarem abandonadas.
  • Parece um pouco super projetado para mim.
  • Escrever um arquivo na pasta do tema pode criar problemas com a forma como algumas instalações são tratadas em relação às permissions da pasta. Escrevê-lo na pasta de carregamentos não parece ser muito elegante.

Solutions Collecting From Web of "Seguindo técnicas de otimização de desempenho da Web para produzir css estático e dynamic"