Não é segredo: os usuários da web de hoje precisam de velocidade. Com as conexões de internet e celular cada vez mais rápidas, os usuários esperam que os sites carreguem rapidamente, e é trabalho do desenvolvedor fazer o que puder para servir essas páginas rapidamente. Então, como você torna seu site rápido? Aqui está o que você deve fazer especificamente ao construir com o WordPress.

Em primeiro lugar: teste a velocidade do seu site

O desempenho pode ser dividido em duas categorias principais: front-end e back-end. Considero back-end qualquer coisa relacionada ao servidor e como os dados são preenchidos em uma página (seu código PHP em seu tema é o “back-end”). O front-end consiste em todos os seus ativos (CSS, JavaScript, imagens, etc.) e marcação. Tudo o que um navegador da web lê e interpreta é o “front-end”. A razão pela qual estou fazendo essa distinção em termos de desempenho é porque é bom saber o que você está otimizando e, ainda mais importante, onde você precisa otimizar mais.

Para testar a velocidade do seu site, recomendo usar uma combinação de WebPagetest e Google PageSpeed ​​Insights. O WebPagetest nos dá uma boa ideia do tempo real (em segundos) que um site leva para carregar, fornecendo algumas boas métricas para saber se é o back-end ou o front-end que está causando um carregamento lento do site. O PageSpeed ​​Insights é melhor para ver como seu site é renderizado pelo navegador e o que você pode melhorar no front-end.

Tenha em mente que este artigo é focado em sites WordPress totalmente personalizados. Se você estiver executando testes de velocidade em um site usando um tema volumoso e 19 plugins de terceiros (os plugins podem desacelerar tanto o front-end quanto o back-end), comece chegando a uma lousa em branco e ativando lentamente os plugins um por um para encontrá-los que estão atrasando as coisas.

Desempenho de front-end

Como melhorar a acessibilidade do seu tema WordPress agora

Não tem um dia que eu não use a web, nem mesmo quando estou de férias. Eu vou dar um palpite que você pode se relacionar. Cada vez mais, a internet desempenha um papel...

A regra de ouro do desempenho, de acordo com o diretor de desempenho da Fastly, Steve Souders, é que 80-90% do tempo total de carregamento de uma página consiste no front-end (a regra 80/20). Os 10-20% do back-end são extremamente importantes, mas mesmo se você estiver usando o host mais rápido que o dinheiro pode comprar, seu site ainda não atingirá todo o seu potencial sem otimizar o front-end para garantir que os usuários percebam que esta carregando rapido. A percepção é importante quando se trata de otimização de front-end. Um usuário não se importará com quanto tempo, em termos de segundos, um site levará para carregar. Tudo o que eles realmente se importam é com a rapidez com que podem interagir com ele e ver conteúdo ou realizar ações sem demora. Não quer dizer que você não deva se preocupar com o tempo de carregamento real (você deveria), mas seguindo as técnicas abaixo, você pode garantir que seu site esteja em um estado utilizável o mais rápido possível, seguido rapidamente com um carregamento de página completo de todos os bens.

CSS

A coisa mais importante a fazer com seu CSS antes de ser entregue ao navegador é simplesmente comprimi-lo e remover seletores não utilizados. Obter um bom fluxo de trabalho de desenvolvimento ao desenvolver temas torna esse processo trivial, especialmente se você estiver usando um pré-processador como o Sass. Eu uso o Grunt, que é um executor de tarefas JavaScript que executa comandos para você durante o desenvolvimento. Existe um plugin para o Grunt chamado grunt-contrib-sass que simplesmente compila todos os seus arquivos Sass em um só (se você estiver usando parciais Sass), minimiza e compacta. Coloque o plugin grunt-contrib-watch em cima disso e ele executará a tarefa Sass sempre que você salvar um arquivo. Fácil! Não perca o sono se você não estiver usando a melhor e mais recente metodologia CSS, mas tente seguir algum tipo de padrão ao criar CSS para evitar duplicação e tamanhos de arquivo enormes.

Quando sua folha de estilo estiver pronta, a maneira mais fácil (e de longe, a padrão) de carregá-la é apenas referenciá-la no <head> ;. Dessa forma, o navegador carrega e analisa antes que o restante do DOM seja carregado. No entanto, há uma nova técnica em que os estilos “críticos” são embutidos no <head> e, em seguida, a folha de estilo completa é carregada de forma assíncrona usando JavaScript. Eu realmente só uso essa técnica quando estou absolutamente tentando fazer um site carregar (ou perceber o carregamento) em um segundo, mas é uma ótima coisa para olhar e ver se ele pode se encaixar no seu fluxo de trabalho. O Filament Group tem um ótimo artigo extenso sobre o uso desta técnica.

JavaScript

Entendendo como o WordPress usa o MySQL

De um modo geral, o WordPress pode ser dividido em dois segmentos: a lógica e os modelos que geram a aparência de um site WordPress o banco de dados MySQL que armazena todo o conteúdo e poderes i...

A(s) regra(s) de ouro para otimizar JavaScript é simples: servir o menor número possível de arquivos JavaScript e reduzir e concatenar. Plugins de terceiros do WordPress podem ser prejudiciais ao inchar seu documento com arquivos JavaScript de bloqueio não reduzidos, por isso é importante estar atento ao escolher plugins. Idealmente, você concatenaria TODOS os arquivos JavaScript em um e, em seguida, diminuiria completamente. Para momentos em que não é possível concatenar todos os seus arquivos em um, existem atributos HTML chamados “async” e “defer” que podem ser usados ​​para carregar arquivos JavaScript de forma assíncrona ou depois que o restante da página for carregado.

O lugar mais comum hoje em dia para fazer referência ao JavaScript é na parte inferior do seu documento, logo antes da tag de fechamento. No entanto, existem técnicas mais avançadas para carregar JavaScript. Novamente, o Filament Group fez muitas pesquisas sobre isso e tem vários projetos de código aberto que você pode usar se estiver buscando um tempo de carregamento de página super rápido (a propósito, não sou afiliado ao Filament Group; Eu só acho o material deles incrível). A melhor abordagem parece ser carregar scripts dinamicamente ao inserir uma pequena função no <head> ; que então anexa tags de script sem bloquear o resto da página. Para obter mais informações, confira o script loadJS.

Imagens

As imagens geralmente são os maiores arquivos em uma página, responsáveis ​​pelo maior atraso no tempo de carregamento da página. O bom das imagens, porém, é que, ao contrário do CSS e do JavaScript, a maioria dos navegadores as carrega de forma assíncrona. Isso pelo menos ajuda com o desempenho percebido de uma página, mas você ainda quer ter certeza de que A) você está servindo o menor número possível de imagens e B) essas imagens são compactadas o máximo possível.

As ferramentas de compressão são necessárias para espremer o máximo de excesso possível nas imagens. ImageOptim é um ótimo aplicativo para Mac que faz isso bem, junto com OptiPNG e jpegtran para uso com executores de tarefas como o Grunt.

Fontes

As fontes da Web são super comuns nos dias de hoje. Eu uso o Google Web Fonts em quase todos os projetos, mas até recentemente não percebi o impacto no desempenho que estava tendo apenas referenciando-os no <head> . O impacto no desempenho é pequeno, mas este é um artigo sobre como tornar os sites extremamente rápidos, então tudo conta! Para melhor desempenho usando fontes da web, recomendo usar o Web Font Loader, co-desenvolvido pelo Google e Typekit. É um script de código aberto que gerencia o carregamento de suas fontes de terceiros, como o Google Web Fonts, e permite que elas sejam carregadas de forma assíncrona (está cansado dessa palavra ainda?).

Como esperado, há alguma configuração necessária para que o Web Font Loader seja integrado ao seu projeto, então confira o projeto no GitHub para obter detalhes sobre como configurá-lo.