Como parar de carregar arquivos desnecessários e reduzir as solicitações HTTP do site – dicas de otimização do WordPress
Publicados: 2020-09-08
No Crunchify, publicamos vários tutoriais de otimização de velocidade para você consultar a qualquer momento.
Usamos MaxCDN como nosso provedor de conteúdo. Já se passaram quase 4 anos e até agora está funcionando muito bem. Genesis WordPress Framework e MaxCDN são a melhor combinação. Por padrão, o Genesis Framework vem com muita otimização, Google Markup Schema, estrutura amigável para dispositivos móveis e muito mais.
Na semana passada eu estava olhando para minha conta MaxCDN e de repente notei os principais recursos de download. Como você vê na imagem acima top 9 out of 10 resource files foram baixados mais de ~ 5 millions vezes na semana passada.
Fiquei surpreso e pensei que realmente deveria precisar desses recursos? Tenho que carregar esses arquivos separadamente? Como se livrar desses arquivos, se não for necessário, exceto o arquivo style.css , que é absolutamente necessário para o site carregar.
Vamos começar como eu me livrei de todos esses 9 arquivos com truques simples
Não para todos os leitores
Essas etapas não são para todos os leitores do WordPress. No Crunchify, estamos usando Crayon Syntax Highlighter e imagens específicas de temas personalizados, por isso se aplica a usuários limitados
Passo 1
Vamos list all of those 9 files . A 2ª coluna mostra o número de vezes que foi baixado.
|
1 2 3 4 5 6 7 8 9 |
/ wp - includes / js / wp - embed . min . js 12 , 626 , 575 2.41 GB / wp - content / plugins / crayon - syntax - highlighter / themes / neon / neon . css 11 , 406 , 345 2.61 GB / wp - content / plugins / crayon - syntax - highlighter / css / min / crayon . min . css 11 , 259 , 474 4.50 GB / wp - content / themes / crunchify / images / bg . png 9 , 268 , 221 3.45 GB / wp - content / themes / crunchify / images / bg - pattern . png 9 , 135 , 288 3.41 GB / wp - content / themes / crunchify / images / h3 . png 6 , 289 , 690 1.18 GB / wp - content / themes / crunchify / images / crunchify - logo . png 5 , 476 , 295 7.05 GB / wp - content / themes / crunchify / images / crunchify - sprite . png 5 , 334 , 562 7.45 GB / wp - content / plugins / crayon - syntax - highlighter / js / min / crayon . min . js 4 , 344 , 704 2.60 GB |
Passo 2
Vamos agrupar os arquivos Crayon Syntax Highlighter Plugin.
Existem 3 arquivos:
neon.css , crayon.min.css e crayon.min.js . Eu escrevi um tutorial separado completo com um total de 7 etapas detalhadas para se livrar desses arquivos. Por favor, passe por cima e me avise se você encontrar algum problema.
Etapa 3
Agora vá para wp-embed-min.js . Por favor, visite o tutorial Como desativar o script de incorporação automática para WordPress 4.4+. Ele irá parar de carregar o arquivo de incorporação no front-end.
Passo 4
Vamos ver mais 3 more .png :
bg-pattern.png
Eu estava carregando esta imagem no fundo do cabeçalho e rodapé. Eu me livrei dele usando a cor #333 .
crunchify-sprite.png
Eu estava carregando esta imagem de sprite para mostrar os botões de seguir social na barra lateral. Eu o substituí por fontes fontawesome .
h3.png
Eu estava carregando isso para mostrar a marca de seleção para postagens H3 em alguns locais. Substituí-o por fontes fontawesome . Abaixo está um equivalente fontawesome.
Passo-5
Agora ficamos com apenas 2 arquivos. crunchify-logo.png e bg.png , que pensei em mantê-lo. Então, em vez de chamar como imagem, adicionei o equivalente de imagem base64 para esses arquivos.
Antes de:
|
1 2 3 4 5 6 7 8 9 10 |
. header - image . site - title a { display : block ; float : left ; min - height : 60px ; text - indent : - 9999px ; width : 100 % ; background - position : center ! important ; background - size : contain ! important ; background : url ( images / crunchify - logo . png ) no - repeat ; } |
Depois de:
|
1 2 3 4 5 6 7 8 9 10 |
. header - image . site - title a { display : block ; float : left ; min - height : 60px ; text - indent : - 9999px ; width : 100 % ; background - position : center ! important ; background - size : contain ! important ; background : url ( data : image / png ; base64 , iVBORw0KGgoAAAANSUhEUgAAAmIAAACACAYAAAHfQjXQAABi3UlEQVR42u1dCXhVxfXPQlhcUBEEAQUheQmEPTtucV9xAcLm2r91qYraWnetkR2Sl7AoikutXbRSq9ba1qot1rpVcamKVVFBUZGEbCQkJG + 5 //O778xjMrlbFpJHmPN957vv3WXu3Llzz/zmnDPnxMVp0hQTVF6Sd3zowaONsAPrVpJomz8nuL00x3DjwsK4hM6uW1VVVdjDOcHq6upgp1WqekWu4aXBZk3cb3BnNxg1xF+oQULyPsMw4pUGM2pra0d1WqUa75/sqcHo1Jld8QWgQaz2Ec/jRv0XelmnVaiiNOdxLw0298RBzzmV09TUhIcIoAdUVlbW46F27NhhNDQ0mA8cDAYN6YHrsaXzjqYHXoTrampqkqXjgZ07dxpKA4WpJ0X3id91dXWGuFcoFDLEfvn6DicvDfbyz9K3uvSEEDVAQyAQwANsFD1DbKkhE6R9YWqok6TGeB4PTvuMtWvXJqrXogehAWh7p7TveblnYT9RIpVRJD5j3heVvZXFKc/RxeYnXVmU8qohyeVKf8qrVX7feM+NVliQ3lPwmisykgrz83tckRHZ4r/XzwcVFHIGDyAehD8fAw8u9qufndhWVFTkyo2B8uTGo3KeUD9X3v+JXA/aPieXs2tlqrF+TUZSwwqfQY0XXlsQl0hbo9rvW1J7/7jD8Nvg454abfHMLMONl87KrndptAD3GvMTlXqR4KDyHxyihy2Tz1Wvo+PredSMl/YtU89XPuPoMfQm6kF+NFRVccou2n6ABqos9tXVlZoNiPPiA/emGqH7Uo0qf8qXnhrtqhPTNnlquJnZf3EqB71I9CxlX7T3SfsS5E9HvVb8l0dI+Rx8xtxrvxafI/3vSb+/Id7OjVse2R/5JI21BYnikzTWxkXqUhDXvL50judPdImHRgPffNaYUXExRKJHicGA+D2IAgw0xH/a4xVYNjvbU8PFYqNBJNDoeYkdPNmjtGhmZshLw3XFjEAlgijoURNVeUaQY0CnVyZ7RP+XSfCT8M8yGZ+uYKm3jdCTTk2aNMUqAZ/UrcqtV/VmUb3amqMNTOp1S7Vi7ll3b16nNxjhre1i2uSiJMDMYume71mFhQleGqtyRU64K16kPG+1IlYMhDrnM6R5lpfGKivpmsbatm3bQCsNrTq/lKdge/wzLg==) no-repeat; } |
Eu converti ambas as imagens para imagens base64. A vantagem que teremos, não precisando abrir outra conexão e fazer uma requisição HTTP ao servidor pela imagem.
Menos solicitação = melhor tempo de carregamento da página
Há algumas vantagens em usar a SVG (Scalable Vector Graphic) image , pois as imagens são dimensionadas para qualquer tamanho sem perder a clareza (exceto muito pequenas), o que fica ótimo em telas retina.
Esses Data URIs não se limitam a .png ou imagens, mas a quaisquer recursos. Aqui está uma ferramenta simples de conversão de .png para .svg que usei online.
Resumo
Este tutorial faz parte da seção Como acelerar o WordPress e aumentar o desempenho. Você encontrará todos os truques e dicas de otimização do WordPress lá.
Ao fazer essas etapas, me livrei de todos os 9 recursos indesejados de 10. O que significa que minha página carrega muito rápido, pois haverá 9 solicitações a menos em cada página
Deixe-me saber se você tem outras dicas que irão melhorar a velocidade da página do site. No Crunchify, a velocidade é o principal critério e é por isso que estamos usando muito menos plugins. Todas as páginas são carregadas within half a second .
