Um Guia Sobre Otimização de Velocidade de Sites para Iniciantes

Capítulo 2 – O desempenho de sites impacta o sucesso dos negócios

O desempenho impacta as vendas

O desempenho de sites é a experiência do usuário – o poder de velocidade da página, traduzindo em uma atraente experiência de compra online, aumenta os números de vendas e eventualmente, determina o sucesso dos negócios online. O líder do setor, Google, começou a incluir a velocidade das páginas em seus algoritmos de busca, desde que detectou as repercussões que os lapsos de desempenho dos sites causavam nas vendas. O gigante dos mecanismos de busca já experimentou uma queda de 20% no tráfego, resultante de meio segundo de atraso nos tempos de carregamento da página.

Embora o Google tenha resolvido rapidamente o problema que quase prejudicou sua participação de mercado, o mesmo nem sempre ocorre com outros negócios online, que buscam estabelecer sua presença no mercado.

P: Então, como o desempenho do site afeta as vendas de um negócio online?

R: Dramaticamente. Essa é a única resposta possível!

A empresa de consultoria Forrester estudou recentemente o estado das expectativas de compras online dos consumidores e avaliou como os sites de baixo desempenho prejudicam os resultados financeiros, enquanto desempenhos de alto nível nos sites aumentam rapidamente as vendas.

A pesquisa apontou que 88% dos usuários da Internet escolhem varejistas online que ofereçam uma experiência de alto desempenho e fácil utilização em seus sites, e quase 50% dos visitantes abandonam sites que não carregam em até três segundos.

Essas ações, consequentemente, afetam as vendas. 79% dos clientes insatisfeitos não voltam a visitar os sites com desempenho insatisfatório – a não ser que você seja o Google ou a Amazon. 46% dos clientes insatisfeitos desenvolvem uma impressão negativa duradoura e 44% compartilham suas experiências de compras com o resto do mundo. As implicações vão muito além do mundo cibernético, pois 87% dos clientes fazem compras em lojas de varejo tanto online quanto físicas.

Embora o serviço e a qualidade do produto aparentemente tenham o maior impacto nas vendas das empresas, a conversão dos visitantes de sites em clientes de fato no mundo cibernético depende, em grande parte, da criação de uma impressão positiva junto ao cliente. E é aí que os parâmetros de desempenho do site de comércio eletrônico, como a alta velocidade da página e os processos de conclusão de compra rápidos, entram em ação, dando aos clientes uma impressão psicológica positiva que estimula as vendas e a fidelidade junto à marca.

O desempenho impacta a conversão

Como a mais importante e poderosa métrica da Internet para negócios online, a taxa de conversão depende, de forma holística, dos KPIs (indicadores chave) do site para estabelecer vantagens competitivas para plataformas de varejo online.

No mundo digital, as campanhas de marketing tradicionais, por si só, não aumentam as taxas de conversão sem melhorar a experiência do usuário do site – incluindo a velocidade da página e a responsividade do site.

A campanha de arrecadação de fundos de Barack Obama durante as Eleições Presidenciais de 2011 levantou US$ 34 milhões adicionais quando o site Obama for America reduziu o tempo de carregamento das páginas de cinco segundos para dois segundos – isso representou 14% de aumento na conversão de doações com meros três segundos de melhoria no desempenho do site!

Trazer potenciais clientes para a porta de lojas físicas muitas vezes requer uma campanha de marketing e propaganda planejada. E quando os clientes entram na loja, eles geralmente não saem sem uma compra.

São necessários muito menos esforços para levar os clientes a uma loja de varejo online. Os usuários da Internet não se importam em dar alguns cliques para abrir as páginas da web que nunca visitaram antes. A otimização para mecanismos de pesquisa e os anúncios nas mídias sociais geralmente são o suficiente para fazer isso.

Mas é igualmente conveniente para os visitantes abandonar o site se as informações necessárias não forem disponibilizadas dentro de alguns segundos ​​– para os visitantes que não ficam impressionados facilmente, isso também não exige muito mais do que alguns cliques!

A experiência do usuário, em termos de desempenho e responsividade do website, torna-se o fator principal que afeta as taxas de conversão em lojas online. O comércio eletrônico trata-se, em primeiro lugar, da conveniência do cliente e de como alcançar clientes em potencial de forma eficiente, com as informações, produtos e serviços certos no momento certo.

E nada disso é possível sem uma velocidade da página mais rápida do que o tempo que os usuários levam para abandonar as visitas, devido a problemas com o desempenho do website. Não está ciente de que o desempenho do seu sites afeta as taxas de conversão? Ferramentas como a Ferramenta Test My Site do Google podem ajudar a responder a essa pergunta (veja o exemplo abaixo).

O desempenho impacta o engajamento do usuário

As estatísticas de engajamento do usuário alimentam a análise de sites no desenvolvimento de melhores estratégias para otimizar as vendas online. As empresas online estabelecidas na rede competitiva compreendem bem a importância de desempenho de seus sites e das ferramentas que analisam e preveem as próximas ações a serem tomadas, correlacionando a velocidade e a receita da página.

Informações aprimoradas sobre o engajamento do usuário com sites responsivos e de carregamento rápido geralmente são vistas como um proxy do sucesso dos negócios online. O engajamento do usuário é altamente dependente das limitações humanas no armazenamento de memória de curto prazo, que dura apenas alguns segundos e das aspirações humanas de sentir controle sobre a máquina em todas as circunstâncias.

Para sites com baixo desempenho – sendo baixo desempenho um termo relativo – os tempos de carregamento da página excedem as limitações humanas, enquanto a falha em processar solicitações do usuário dá a falsa impressão de ignorância ou incompetência em entregar a resposta desejada com eficiência e precisão.

Sites de alto desempenho, por outro lado – sendo que alto desempenho também é um termo relativo – impactam três parâmetros que determinam o engajamento do usuário: sentimentos, estados mentais e interações. Esses três aspectos criam uma conexão emocional, cognitiva e comportamental entre os visitantes humanos (não se pode dizer muito sobre bots!) e o website.

Com esse tipo de conexão, empresas online podem explorar os aspectos de engajamento do usuário, como atenção concentrada, motivação e confiança para converter visitantes em clientes, clientes fiéis e até mesmo embaixadores da marca, gerando leads em mídias sociais e até fora da Internet.

O desempenho impacta as despesas operacionais e a receita

Embora o investimento na otimização de desempenho de sites aumente as despesas de capital em favor da redução de alguns segundos nos tempos de carregamento da página, o retorno é inevitavelmente visto na forma de aumento de receita e de redução de custos operacionais e investimentos em hardware.

A gigante do comércio eletrônico, Shopzilla, obteve uma redução de 50% em seu orçamento operacional ao encolher os tempos de carregamento da página de sete segundos para dois segundos. Melhorias de desempenho através de uma revisão do design do site permitiram que a empresa utilizasse os mesmos recursos de hardware para processar, de forma eficiente, a mesma quantidade de solicitações de usuários do site. A responsividade aprimorada do site também aumentou as receitas em 12%, já que a loja de varejo acomodou o aumento do tráfego da web sem gerar investimentos adicionais na expansão dos recursos de hardware.

Os aprimoramentos nos KPIs de sites também levaram a um melhor Índice de Qualidade do AdWords e portanto, reduziram o Custo Por Clique (CPC). As empresas online com alto Índice de Qualidade e velocidade da página podem utilizar seu orçamento de publicidade de forma eficiente, maximizando assim seu alcance e atraindo clientes sem a necessidade de despesas operacionais adicionais.

Por outro lado, uma redução de velocidade minimiza a utilização de recursos. O Bing conduziu um estudo independente sobre o desempenho de seu site afetando sua receita e descobriu que um atraso de dois segundos no resultado da pesquisa resultou em perda de receita de 4,3% por cento por usuário.

E o comportamento do cliente não se altera drasticamente quando os atrasos são removidos. Quando o Google removeu um atraso de 0,4 segundo no fornecimento de resultados de pesquisa, os usuários fizeram 0,21% menos pesquisas, mesmo com a página da web funcionando de maneira otimizada.

Esforços adicionais para melhorar o desempenho do site podem aumentar as despesas de capital temporariamente, mas a troca é justificada, à medida em que os investimentos extras se traduzem em resultados mais altos, aumento nos fluxos de receita e despesas operacionais reduzidas.

O desempenho impacta a usabilidade

Websites com a curva de aprendizado mais acentuada atingem o maior índice de clientes fiéis. Os internautas veem o tempo gasto em aprender a usar sites alternativos como um custo de mudança significativo, que funciona como um mecanismo para prendê-los aos serviços online oferecidos por meio de sites de alto desempenho.

Os elementos da relação entre a usabilidade do site e a fidelidade do cliente estão vinculados aos KPIs do site, incluindo a velocidade da página, o tempo de carregamento e a capacidade de resposta do site às solicitações do usuário. Um modelo hipotético de otimização de velocidade de sites leva esses elementos em consideração, com características como Confiança no Site, Interatividade e Relevância da Informação, consideradas como um subconjunto da usabilidade do site pelos usuários finais.

Da mesma forma, os rastreadores da web e os mecanismos de pesquisa medem o desempenho do site em termos de velocidade da página, navegabilidade, experiência do usuário, capacidade de resposta e alcance à audiência global como um subconjunto da otimização para mecanismos de busca, impactando a classificação nos resultados de pesquisa.

Usuários finais esperam encontrar as seguintes marcas que afetam a usabilidade dos websites:

• Fácil de operar, navegar e entender.
• Entrega direta de informações e controles relevantes que forem solicitados.
• Acessível em todos os tipos de dispositivos, máquinas, sistemas operacionais, navegadores e localizações geográficas.
• Entrega de informações, produtos e serviços legítimos, de alta qualidade e de credibilidade em apenas alguns cliques e solicitações.

Cumprir com esses requisitos é vital para maximizar o desempenho do site, a usabilidade e a fidelidade do cliente, que são elementos que juntos formam um sistema único, que funciona como um canal para o sucesso dos negócios online.

Capítulo 3: Sites para dispositivos móveis com velocidade otimizada ofuscam o desktop

A mobilidade é o futuro de tudo que está conectado. Sua adoção está subindo vertiginosamente, à medida que o massacre dos dispositivos móveis parece abranger toda a raça humana – são 2,32 bilhões de smartphones, cerca de 30% da população global em 2017. E as marés em expansão de grandes repercussões continuam atrapalhando os negócios online, que raramente fazem incursões no segmento de marketing móvel.

O sucesso no mundo cibernético depende da capacidade de adotar uma abordagem do conceito mobile-first, para atingir a população explosiva de usuários de dispositivos. E para as organizações que se esforçam para atingir efetivamente a população móvel em massa, recompensas inimagináveis ​​aparecem logo no início.

Por outro lado, o marketing na Internet voltado aos desktops é da última década. Pesquise os termos “Era pós-PC”, “queda livre de vendas de PCs” e a “morte dos computadores de mesa” e o resultado será uma infinidade de notícias e matérias jornalísticas retratando um futuro sombrio para organizações que ainda permanecem apenas com uma base de usuários de desktop.

Para esses atrasados da indústria, ainda não é tarde demais para adotar uma estratégia para dispositivos móveis. No entanto, essa abordagem nem sempre se paga em negócios online voltados para o futuro, quando eles não conseguem realmente otimizar seu alcance para uma base de usuários de dispositivos móveis.

Não há nada pior do que tomar uma direção errada para a mobilidade, do que não seguir algumas etapas vitais e não preencher o espaço necessário para alcançar clientes móveis de maneira eficiente. Essas lacunas estão centradas na falta de sites móveis responsivos e de alto desempenho.

Dispositivos móveis vs desktop – Por que é importante?

Porque todo mundo está fazendo isso, para começar. A competição pelo espaço móvel é intensa e em 2014, c CEO do Yahoo o classificou como o “ponto de inflexão” da Internet. E ela estava certa! O Stone Temple extraiu algumas estatísticas do Similar Web em 2017 e, não para nossa surpresa, dispositivos móveis representaram mais de 50% do tráfego, com base em 77 bilhões de visitas ao website.

Aqui estão algumas estatísticas adicionais:

• 87% dos cidadãos dos EUA possuem um dispositivo móvel.
• 45% destes possuem smartphones.
• 90% destes ficam online através do dispositivo móvel.
• Estes usuários navegam através de Internet móvel em media de 1,4 hora por dia.
• 74% abandonam sites móveis se eles não carregarem em menos de cinco segundos.

Todo o foco deve estar no tratamento das duas entidades – móvel e desktop – separadamente, pelo menos do ponto de vista do design do site. Sem essa estratégia, a experiência do usuário móvel no acesso às versões desktop de sites geralmente é comprometida em termos de tempo de carregamento de página, usabilidade e funcionalidade. Comprometer esses aspectos centrais de sites para dispositivos móveis pode forçar as empresas online a enfrentarem implicações negativas óbvias, incluindo:

• Baixas compras em dispositivos móveis: Compradores em dispositivos móveis têm menos atenção e paciência que usuários desktop.
• Perda para concorrência: De acordo com uma pesquisa com mais de mil usuários adultos de smartphones nos EUA, quase 75% dos entrevistados respondeu que prefere visitar novamente sites de comércio eletrônico móveis que oferecem uma boa experiência do usuário.
• Perda de valor da marca: Websites móveis projetados de forma ruim, que simplesmente reduzem o HTML do site desktop e fazem os usuários ampliarem e reduzirem as imagens em dispositivos móveis faz com que os visitantes se envolvam menos com a companhia no futuro.

Essas consequências impedem que os seguintes objetivos com clientes que utilizam Internet móvel sejam alcançados:

• Expansão da base de clientes.
• Novas opções de anúncios.
• Oferecer serviços de qualidade, de forma eficiente para a conveniência do usuário.
• E o mais preocupante é a incapacidade de utilizar a web móvel de forma produtiva, para desenvolver novos negócios.

Desktops e dispositivos móveis diferem em recursos de tecnologia, formas e interfaces de usuário – todos os aspectos que governam as implementações da otimização de desempenho do site. Sem otimizar os sites para dispositivos móveis separadamente, para oferecer o melhor desempenho das páginas, vários KPIs dos sites degradam e afetam negativamente a experiência do usuário em dispositivos móveis.

E como as tecnologias móveis proporcionam aos usuários a capacidade de pesquisar na web enquanto estão em pé, caminhando ou até mesmo deitados confortavelmente no sofá, a vontade de controlar as operações do site impulsiona as expectativas do usuário além dos padrões convencionais aplicáveis ​​apenas aos desktops. A capacidade de fornecer conteúdo de sites para dispositivos móveis dentro desse curto período de atenção de cerca de dois segundos faz toda a diferença para conquistar a fidelidade do cliente e atingir um relacionamento comercial de longo prazo com os usuários de Internet móvel.

Um site para dispositivos móveis de alto desempenho e espaço competitivo para altas conversões

Considerando o alto volume de tráfego na Internet, através de dispositivos móveis, para compras no comércio eletrônico, os sites para dispositivos móveis de alto desempenho são uma prioridade evidente para as empresas de comércio eletrônico. Um estudo recente revelou que as empresas de comércio eletrônico podem perder milhões de compradores móveis, cuja receita potencial agregada por conversão é de, em média, 80% se comparada com usuários desktop que fazem compras online.

A taxa de conversão entre pequenas empresas de comércio eletrônico que operam sites móveis de baixo desempenho é, normalmente, de 0,6% em comparação com a taxa de conversão de 1,6% das empresas de comércio eletrônico para desktops que estão no mesmo segmento de tamanho.

Os usuários de tablets, por outro lado, gastam 20% a mais que os usuários de desktop. Ao capturar esse público, as empresas online que estão invadindo o segmento de marketing de Internet móvel podem esperar fluxos de receita altos, que poderiam substituir público de desktops um dia – embora esse dia ainda pareça estar um pouco longe demais.

No entanto, a demanda para satisfazer as necessidades dos usuários móveis continuará a crescer exponencialmente. A otimização de mecanismos de pesquisa de sites para dispositivos móveis agora é um fator separado – assim como a otimização de velocidade de sites para dispositivos móveis, que é composta por:

• Alta velocidade da página
• Baixo tempo de carregamento
• Entrega eficiente de conteúdo de mídia
• Velocidade de download
• Formato otimizado do site
• Navegação e usabilidade fáceis pelo website
• E um sites totalmente funcional, que exige poucas ações do usuário para desempenhar atividades complexas na utilização de Internet móvel.

Ao abordar essas questões, os sites presentes na Internet móvel podem esperar competir com seus competidores maiores, desfrutando de taxas de conversão de até 1,2% (duas vezes mais do que as taxas de conversão de sites de desktop!) e muito mais de 80% da receita por conversão conseguida com as versões desktop de seus sites.

O mais rápido que cruzar na linha de chegada ficará no lugar mais alto do pódio

Portanto, não é surpreendente que as empresas da Fortune 100 tenham uma média de cinco segundos nos tempos de carregamento da página de seus sites para dispositivos móveis – isso é dois segundos mais rápido do que os padrões aceitáveis ​​médios (máximo de sete segundos).

Para empresas de comércio eletrônico, no entanto, cinco segundos de tempo de carregamento da página talvez sejam suficientes para que os visitantes busquem uma alternativa mais rápida. E no segmento de varejo, alguns sites carregam tão rápido quanto o Google – os tempos de carregamento da página são tão baixos quanto um segundo!

Isso é extremamente rápido, semelhante ao foco do Google na velocidade da página e na capacidade de resposta do site. No entanto, esse é o tempo médio de carregamento da página de 16 dos 100 principais varejistas de multicanais, colhendo os frutos de um site móvel incrivelmente rápido e assim, gerando números de receita na casa de muitos bilhões de dólares vindos de clientes móveis.

O Google descreve várias alterações (aqui e aqui) no design de sites para dispositivos móveis, para renderizar páginas da web em telas de celulares em até um segundo – mesmo que você não seja uma empresa da Fortune 100 ou uma das 100 maiores varejistas de comércio eletrônico!

Para aqueles que dominam o assunto de desenvolvimento web móvel na palma de suas mãos, o World Wide Web Consortium (W3C), uma organização sem fins lucrativos, fornece diversas práticas recomendadas (aqui e aqui). É uma leitura longa, que demonstra como a otimização de sites para dispositivos móveis é importante e intensa!

E para os proprietários de empresas que empregam desenvolvedores web para projetarem sites para dispositivos móveis altamente responsivos e com velocidade otimizada, as melhorias devem ser buscadas nos três seguintes ingredientes da anatomia do website:

• Grades fluídas
• Imagens flexíveis
• Consultas de mídia

E um foco no design dos seguintes elementos de sites móveis:

• Cabeçalho
• Galeria de Imagens
• Descrição de Produtos
• Informações Adicionais
• Rodapé

Os clientes apreciam sites de resposta rápida e tempos de carregamento de página muito baixos. A tecnologia móvel e a inovação, associadas à crescente dependência de smartphones e tablets, não mostram sinais de desaceleração. Os principais varejistas online entendem a necessidade de fornecer conteúdo de maneira eficiente, que vai dos servidores da web ao pequeno espaço real das telas de dispositivos móveis. Obter sites totalmente projetados e dedicados para plataformas móveis permite que os clientes tomem decisões de compra rápidas e instruídas, que acabam criando fluxos de receita ilimitados para empresas online.

60% dos consumidores usam exclusivamente, dispositivos móveis para tomar decisões rápidas de compra. Dispositivos móveis e desktops ou notebooks são considerados igualmente importantes como fontes de informação da mídia, – 42% dos usuários de Internet preferem o celular, contra 43% do PC/notebook – mas a conveniência de acessar a web através de dispositivos móveis está impulsionando a Internet móvel para novas oportunidades de negócios.

E se você ainda pretende ignorar o desempenho de sites para dispositivos móveis, talvez você deva reconsiderar as oportunidades e o sucesso alcançados, na maioria das vezes, com um sites para dispositivos móveis dedicado, otimizado e veloz.

Capítulo 4 – Erros comuns de negócios que afetam o desempenho do site

Os mercados online – assim como campos de batalha dos antigos gregos – são plataformas competitivas de alta participação, nas quais apenas os mais diligentes sobrevivem. E como em todas as grandes batalhas, fatores humanos (erros de decisão, enganos e ignorância) contribuem significativamente para o resultado final nas competições entre negócios online.

No entanto, as empresas online e os webmasters responsáveis ​​por manter sites de alto desempenho e totalmente otimizados tendem a negligenciar elementos cruciais de design na web, que prejudicam os tempos de carregamento do site. E as consequências são geralmente tão perigosas quanto o Cavalo de Tróia, que penetrou através de defesas fortificadas e assumiu o controle total sobre a cidade de Tróia, apesar do tamanho e do domínio do exército troiano.

A competição pelo sucesso dos negócios online é tão intensa que chega a ser um pouco violenta. A luta pela atenção do cliente resume-se a entregar o conteúdo solicitado com mais eficiência e precisão, independentemente do tamanho da empresa e das conquistas anteriores. E assim como os erros humanos e a ignorância, que ditaram o resultado da Guerra de Tróia, os erros comuns que prejudicam o desempenho do site tendem a determinar o resultado da competição das empresas online – o mais rápido a cruzar a linha de chegada vence a corrida!

O chamado Gap of Death, que é o intervalo entre o tempo esperado de carregamento da página menor que dois segundos e o tempo médio de carregamento do site de até cinco segundos se expande ou contrai de acordo com as táticas de otimização do site e decisões de negócios negligenciadas. Ao contrário do sentimento popular, a otimização de velocidade é idealmente implementada em todos os estágios do desenvolvimento do site e não apenas após a criação de toda a página, que ocorre somente quando os proprietários do site percebem a necessidade de aumentar a otimização de desempenho de suas páginas.

Os ajustes finais e os complementos de otimização de velocidade implementados após o desenvolvimento do site melhora a velocidades da página, reduzindo o tempo de carregamento para que, pelo menos, atinjam o Gap of Death. Mas, mesmo dentro dessa zona de desempenho, as taxas de conversão diminuem em 7% para cada segundo adicional após o tempo esperado de carregamento da página de dois segundos.
Por outro lado, os proprietários de sites cautelosos com táticas de otimização de velocidade podem buscar melhor desempenho, evitando os seguintes erros fatais:

Serviço medíocre de hospedagem

O erro de optar por um serviço de hospedagem na web medíocre pode durar para sempre. Com mais de 1,3 bilhão de sites online a partir de 2017, o espaço de hospedagem na web está lotado e fragmentado. A disponibilidade global de uma vasta gama de opções de hospedagem está levando as empresas e os entusiastas a estabelecerem suas presenças no mundo cibernético. A demanda por serviços econômicos de hospedagem na web está aumentando exponencialmente e os provedores estão mais do que dispostos a comprometer a qualidade do serviço para em troca, acumular participação de mercado nas camadas de baixo custo.

Provedores medíocres, que vendem serviços econômicos, continuam a maximizar sua lucratividade, hospedando milhares de sites em instâncias únicas no Apache. Servidores não otimizados que executam milhares de sites públicos em uma única pilha de servidores são particularmente prejudiciais para sites de comércio eletrônico, caracterizados por picos incontroláveis ​​de tráfego na web, conteúdo multimídia e grandes arquivos.

As empresas de hospedagem e desenvolvimento web, que têm uma resposta comum para otimização de velocidade dizendo que “todo mundo tem banda larga nos dias de hoje”, traduzem diretamente em perdas financeiras e prejudicam a reputação da marca em negócios online. Um desempenho atraente no sites é essencial para o sucesso dos negócios de um comércio eletrônico, já que os sites que levam mais de três segundos para serem carregados perdem imediatamente, 40% do tráfego. 79% dos visitantes insatisfeitos quase nunca voltam a visitar estes sites lentos de comércio eletrônico!

Talvez, então, investir tempo e dinheiro na busca dos serviços de hospedagem na web da mais alta qualidade seja a chave para manter sites de alto desempenho, gerando vastos fluxos de receita, atraindo a atenção do visitante com eficiência e precisão.

Dando prioridade aos ladrões de largura de banda

A otimização de velocidade de um site é um processo contínuo e em evolução, e vai muito além da assinatura dos melhores serviços de hospedagem na web do mundo. Algumas decisões de negócios destinadas a maximizar a receita, alterando o design e os recursos do website, afetam negativamente o desempenho do site, ao roubar pedaços significativos da largura de banda alocada a cada visitante individual.

Excesso de widgets e plugins

Recursos e funcionalidades adicionais sempre agradam aos proprietários e desenvolvedores de sites. Widgets e plugins permitem mudanças convenientes em sites existentes, mas trazem consigo uma pequena sobrecarga no desempenho do mesmo. Mesmo o menor dos widgets, como a caixa do botão do Google+, pode afetar o desempenho do site em termos de tempo de carregamento da página, aumentando-a em até dois segundos em alguns casos.

A caixa de curtidas do Facebook é outra causadora de lentidão comum, já que é conhecida por adicionar mais de 40 solicitações HTTP (como visto abaixo). No site de um de nossos clientes, vimos que essa caixa adicionou 700 KB ao peso geral da página, o que não é bom!

Manter os complementos limitados a um número mínimo é essencial para conseguir um ótimo desempenho do site – e até mesmo plugins instalados no mesmo núcleo do site competem para fornecer a resposta mais rápida às solicitações do navegador, drenando a largura de banda.

Às vezes, a qualidade e a funcionalidade dos plugins instalados são muito mais importantes do que o número em si. Plugins que consultam grandes fluxos de dados para executar operações complexas devem fazer isso fora do servidor e não dentro de ambientes de hospedagem de sites como o WordPress.

Excesso de anúncios e serviços externos

Por mais tentador que possa parecer vender muitos espaços para anunciantes terceirizados prejudica drasticamente o desempenho de um site. Muitos anúncios, ou anúncios de carregamento lento, geram taxas de rejeição e têm um impacto negativo no comércio online. As perdas financeiras que vêm com altas taxas de rejeição superam os benefícios monetários de oferecer vastos espaços no site para os anunciantes.

Os serviços externos normalmente trazem consigo dois problemas. Um é provocado pelo volume absoluto, o outro tem a ver com esperar até que eles carreguem.

• Se você tiver muitos serviços externos, precisará carregar todos eles e aguardar suas informações em cada carregamento de página. Quanto mais solicitações você tiver, mais você esperará, maior será a carga em seu próprio servidor e maior probabilidade de você encontrar o segundo problema.
• Em alguns casos, o carregamento da página aguardará até que a transferência de dados seja concluída entre seu site e o serviço externo. Se o serviço for solicitado no cabeçalho e houver uma interrupção do mesmo, sua página simplesmente se recusará a ser carregada.

De acordo com um estudo, o custo de gerar receita com banners é quase 33% de latência adicional. Anúncios pop-up intrusivos agravam ainda mais a situação e fazem com que os visitantes a abandonem os sites em taxas ainda mais altas.

Um código de afiliado, mesmo com aquelas poucas linhas adicionais de script, ocupa um valioso espaço de memória no ambiente de hospedagem e exige ciclos de processamento adicionais para entregar o conteúdo aos usuários finais.

No entanto, anúncios online é a principal fonte de renda para muitos negócios (pense no Google e no Facebook!) e um modelo otimizado de publicidade no site aumenta muito sua receita, minimizando o custo dos atrasos na latência e no carregamento das páginas.

Tema exagerado e multimídia incompatível

Os tentadores temas de sites e conteúdo multimídia chamam atenção para o tráfego online. Isso, claro, se o conteúdo chegar aos olhos dos visitantes impacientes com rapidez suficiente. Imagens e vídeos de alta qualidade (com muitos pixels e um arquivo  detamanho grande) demoram mais tempo para serem baixados pelos navegadores, enquanto gráficos leves e de baixa qualidade mal captam a atenção do usuário, apesar de seus tempos de carregamento mais baixos.

Entretanto, o conteúdo intenso de gráficos nem sempre é o fator decisivo na geração de conversões e vendas. Isso é verdade especialmente para sites de comércio eletrônico que precisam conter imagens e vídeos de produtos que tenham um carregamento rápido e que descrevam o valor dos produtos e não necessariamente sua beleza visual.

Problemas de compatibilidade também afetam o desempenho de aplicativos e multimídia em determinados navegadores e locais geográficos. Tome o Google Chrome e o Shockwave Flash como um exemplo. Os dois raramente funcionam bem um com o outro. Da mesma forma, as restrições do governo também podem impedir que algum conteúdo multimídia específico chegue aos visitantes locais.

Sites com conteúdo multimídia não funcional exigem ciclos de comunicação cliente-servidor excessivos para alcançar os navegadores dos usuários, o que acaba prejudicando o desempenho do site. No entanto, cabe aos proprietários desses sites garantir uma capacidade de serviço simplificada em todos os navegadores, formatos de dispositivos e localizações geográficas, pois as políticas governamentais e a compatibilidade de navegadores mudam com o tempo e na maioria das vezes, de forma imprevisível.

Carregamento rápido e conteúdo multimídia totalmente funcional são necessários para que os proprietários de comércio eletrônico mantenham contato com os visitantes de seus sites. Cada segundo de atraso no tempo de carregamento da página leva os visitantes frustrados a abandonarem sites lentos e geram uma perda de 7% nas taxas de conversão, 11% menos exibições de página e 16% de redução na satisfação do cliente.

Um pouco mais daquele código – Formulários de registro e analytics

Formulários de registro e código de analytics adicionam apenas algumas linhas aos arquivos principais do site. Mas quando muitas linhas únicas de código ocupam espaço no back-end, os ativos de conteúdo da web e os plugins com códigos longos acabam competindo por pequenos espaços de memória, em ciclos curtos de processamento. Como resultado, o fenômeno da física popular da falta de linearidade entra em ação e cada componente tem um desempenho imprevisível, geralmente consumindo mais ciclos de processamento do que o esperado.

Do ponto de vista dos usuários finais, os serviços em excesso muitas vezes são desnecessários ou pelo menos, considerados secundários diante do conteúdo real retratado pelo site. Muitos sites hospedam mais de 80 ativos (imagens, plugins, complementos e outros conteúdos multimídia) e todo esse conteúdo não é necessariamente fornecido como preferência dos usuários. Investimentos adicionais no desenvolvimento de sites ricos em mídia acabam saindo pela culatra quando as informações realmente solicitadas pelos usuários finais não podem ser entregues por causa de formulários de registro irrelevantes, códigos de analytics e outros conteúdos que adicionam peso desnecessário ao site.

Erros de dispositivos móveis e redirecionamentos equivocados

Espera-se que a adoção global de smartphones ultrapasse a marca de 2,7 bilhões até 2019, quando 83% dos usuários da Internet a acessarão por meio de dispositivos móveis. 30% do tráfego dos sites de comércio eletrônico em 2016 veio de dispositivos móveis e esse número continua a crescer exponencialmente com a explosão da base de usuários de smartphones.

A competição para chamar a atenção dos usuários de dispositivos móveis é ainda mais intensa devido ao carregamento lento dos sites móveis e dos níveis de paciência dos visitantes cada vez mais baixos. 60% dos usuários de dispositivos móveis esperam que os sites carreguem em até três segundos. E, em média, três em cada quatro pessoas abandonam um site para dispositivos móveis se ele demorar mais que cinco segundos para ser carregado, enquanto um sites móvel demora, em média, de 6 a 10 segundos para carregar.

Atrasos excessivos no tempo de carregamento das páginas móveis ocorrem principalmente quando os sites não são otimizados e projetados para oferecer alto desempenho em uma interface de um dispositivo móvel. Mesmo com páginas dedicadas e otimizadas para smartphones, os usuários destes dispositivos nem sempre são redirecionados para as versões móveis das páginas solicitadas pelos navegadores.

Redirecionamentos são instruções que enviam usuários que buscam a URL de site para outra que (supostamente) contém as informações exatas solicitadas pelos usuários. Os redirecionamentos são mais eficazes para os usuários de dispositivos móveis que pesquisam versões para desktop das páginas, que devem ser bem mapeadas e direcionarem para suas versões móveis equivalentes, fornecendo assim uma melhor experiência ao usuário do site.

Ao fazer isso de maneira imprecisa, os usuários são impedidos de deixar os arquivos indesejados do site até que cheguem onde querem. Isso causa atrasos desnecessários no carregamento das informações realmente procuradas pelos usuários finais.

Isso é semelhante a encontrar uma vaga livre em um estacionamento grande e lotado e ao chegar no espaço aparentemente vazio, descobrir que ele está sendo ocupado por um pequeno veículo, que não era visível à distância. O processo continua até que um espaço livre seja finalmente alcançado – isso se o motorista continuar procurando a vaga e não estiver frustrado o suficiente para sair do estacionamento.

Os proprietários de sites acabam sendo responsáveis ​​por perder vantagens competitivas no espaço móvel quando o tráfego da web é simplesmente redirecionado para a versão de desktop irrelevante, ao invés de oferecer uma solução móvel otimizada para seus usuários.

Websites que não são otimizados para dispositivos móveis sofrem com problemas comuns, que dificultam a experiência do usuário móvel. Problemas como redirecionamentos incorretos, vídeos que não podem ser reproduzidos, imagens e gráficos grandes demais, links irrelevantes e recursos desnecessários fornecidos aos visitantes de dispositivos móveis prejudicam o desempenho de sites e, consequentemente, geram maiores taxas de rejeição.

Apenas 10% do período de espera são definidos pela resposta HTML às solicitações do navegador, enquanto os 90% restantes são causados ​​na renderização de páginas, na análise do HTML, na execução dos scripts de código e na recuperação de arquivos incorporados. A revisão de desempenho do site com ferramentas de otimização e ajustes de scripts pode retirar partes consideráveis ​​dos tempos de carregamento da página, mas não são tão eficientes quanto desenvolver um site veloz e otimizado do zero. E a segunda opção também é mais uma estratégia de marketing, uma decisão de negócios e uma pequena preocupação em evitar os erros mais comuns que podem arruinar seus negócios online, ao prejudicar o desempenho do site.

Capítulo 5 – Teste de velocidade de sites – Identificando gargalos de desempenho!

O tráfego da web e a classificação nos mecanismos de pesquisa são, basicamente, métricas fúteis no desempenho do site. Por mais importantes que sejam, nenhuma das duas indica tanto o sucesso dos negócios online do que os números de vendas e as taxas de conversão. Colocando as situações em perspectiva, os sites de comércio eletrônico com (quase) 0% de taxa de rejeição, 15% de taxa de conversão e 10.000 visitantes únicos vindos de resultados de buscas se saem muito melhor do que sites com boas classificações que desfrutam de 100.000 visitas únicas com apenas 0,01% de taxa de conversão.

O debate sobre a otimização da taxa de conversão pode continuar por períodos muito longos, e a implementação de melhores práticas de negócios em sites bagunçados pode levar a toneladas de investimentos, com esforços de execução que duram meses e exigem paciência antes que qualquer melhoria significativa na taxa de conversão seja apresentada.

E há mais motivos para convencer os cidadãos impacientes do mundo cibernético a comprar produtos e serviços online do que implementar estratégias de negócios passivas para aumentar a comercialização. As empresas online que se concentram em melhorar o desempenho de sites experimentam resultados imediatos, na forma de taxas de conversão mais altas e vendas maiores.

A velocidade da página, em particular, preenche a lacuna no aprimoramento da comercialização, melhorando a experiência do usuário no site, para manter clientes impacientes envolvidos e satisfeitos. Um relatório de uma pesquisa recente publicado por O’Rielly detectou melhorias na experiência do usuário final de sites ao reduzir significativamente o tempo de carregamento das páginas, aumentando significativamente as vendas e as taxas de conversão. As estatísticas impressionantes são as seguintes:

• +3% de conversões por segundo, com melhorias no tempo de carregamento das páginas de 15 para sete segundos.
• +2% de conversões por segundo, com melhorias no tempo de carregamento das páginas de sete para cinco segundos.
• +1% de conversões por segundo, com melhorias no tempo de carregamento das páginas de quatro para dois segundos.

Essas estatísticas apresentam apenas como a velocidade das páginas impacta o sucesso dos negócios neste ciberespaço competitivo. Por mais complicado que isso possa parecer reduzir grandes porções de tempo no carregamento das páginas de sites lentos é algo relativamente simples, SE as táticas de otimização de velocidade forem implementadas na direção certa – e este é um grande SE quando os gargalos de desempenho são desconhecidos, muito complexos ou simplesmente vastos e diversos demais para serem identificados.

A busca por um site otimizado e veloz começa com a identificação de problemas críticos no front-end mais aparentes nos processos padrão de testes de desempenho. Steve Souders, engenheiro chefe de desempenho do Google, falou sobre esse assunto, dizendo que “80 a 90% do tempo de resposta do usuário final é gasto no front-end. Por isso, comece por aí”.

O que testar?

Antes de começar a exploração dos problemas relacionados à velocidade da página, compreender o comportamento dos indicadores de desempenho de velocidade de sites mais impactantes ajuda a identificar com precisão as brechas e lacunas no desempenho nos sites.

Velocidade da página inicial

O download de toneladas de memória, que contaminam o conteúdo do site, em milésimos de segundo, para iniciar solicitações do navegador, não é totalmente possível sem uma reformulação completa e otimização de velocidade de sites lentos. Em muitos casos, os visitantes só procuram as informações primárias na forma de conteúdo ou informações de produtos retratadas por páginas da web. Adicione muitos gráficos complementares e recursos do site e os tempos de renderização de página aumentarão além da medida.

Manter a velocidade inicial da página alta mantém os visitantes engajados, mesmo quando todo o conteúdo do site, incluindo gráficos, leva tempo para ser renderizado completamente. O monitoramento da alta velocidade inicial da página, rastreando parâmetros como Tempo Até o Primeiro Byte (TTFB) ou executando solicitações de ping nos servidores do site, descreve com precisão os tempos iniciais de carregamento da página e as estatísticas de velocidade da página. Se tais ações demorarem muito, trabalho precisa ser feito no back-end, na forma de otimização do núcleo do site e do servidor.

Tempo de carregamento da página inteira

O monitoramento do tempo consumido na renderização de todo o conteúdo da página nos navegadores é um elemento do teste de experiência do usuário final. Essa informação impulsiona as decisões estratégicas de TI na implantação e otimização da infraestrutura de hardware, para maximizar o desempenho do site.

O monitoramento regular desse indicador de desempenho permite que os proprietários percebam como seus sites se comportam, à medida que se dimensionam em termos de tamanho e tipo de conteúdo. Com essas informações, os webmasters podem armazenar em cache o conteúdo estático em locais separados, como na Rede de Fornecimento de Conteúdo (CDN), enquanto mantêm servidores de back-end dedicados, para distribuir com eficiência o conteúdo carregado dinamicamente.

Desempenho geográfico

Uma das vantagens de operar um negócio online é o crescente alcance do mercado global. Mas esse alcance nem sempre é igualmente eficiente em todo o mundo, devido aos fatores que limitam a comunicação entre os clientes e o servidor. Políticas, limitações de largura de banda e tecnologia do governo impedem o melhor desempenho do site em todo o mundo, portanto testes de velocidade e disponibilidade devem ser conduzidos em diferentes locais, para determinar os resultados globais de desempenho do site que impactam o alcance de negócios ao redor do mundo.

Tolerância de cargas

O desempenho de sites varia com as flutuações do tráfego na web. Os servidores de hospedagem que lidam com carga normal com desempenho máximo podem perder velocidade da página quando expostos a cargas excessivas. A realização de testes de estresse, testes de carga e outros testes de desempenho em sites cria uma imagem precisa de quanto tráfego da web o site pode suportar antes de perder desempenho ou sair totalmente do ar. Compare os resultados com os padrões reais de uso do site para determinar se ele precisa de atualizações de hardware para lidar com os picos de carga da maneira mais eficiente possível.

Carga do CPU no servidor web

Os provedores de hospedagem compartilhada que executam milhares de sites em servidores Apache individuais não oferecem alto desempenho, mesmo quando o site é bem projetado, possui um código limpo e é otimizado para velocidade. Os problemas de desempenho se intensificam durante os períodos de pico de carga, quando a capacidade insuficiente do servidor não consegue processar as solicitações de download do site de maneira eficiente. O monitoramento da carga da CPU do servidor permite que as empresas de hospedagem e as equipes de TI que rodam sites hospedados localmente mantenham uma verificação dos recursos de hardware de back-end diante do tráfego imprevisível da web.

Desempenho do banco de dados do site

O desempenho do banco de dados é crítico para sites que mantêm conteúdo dinâmico extraído dos bancos de dados de back-end. Deve haver um mecanismo para detectar e alertar sobre imprecisões na transmissão de tais dados. Ficar de olho no espaço livre em disco em servidores que hospedam sites localmente ajuda a evitar erros e perdas de dados, que levam a links quebrados e acabam prejudicando o desempenho do site.

Como testar

Os proprietários de sites podem utilizar diversos serviços gratuitos e premium de testes de desempenho de websites para analisar páginas da web e gerar soluções sob medida, que atendam às maiores necessidades de melhorias de desempenho e melhorem as lacunas que estiverem prejudicando a velocidade das páginas.

As ferramentas de teste de velocidade de gigantes como Google e Yahoo, ou de sites especializados em monitoramento, como Pingdom e GTMetrix, fornecem informações valiosas sobre os indicadores de desempenho do site gratuitamente e geram pontuações e sugestões para educar os proprietários que não são especialistas. Confira estes guias detalhados para ajudar você a começar.

Como ssas ferramentas funcionam

Essas ferramentas usam vários navegadores para carregar sites e replicar a experiência do usuário final em diferentes locais geográficos. Os gargalos de desempenho são monitorados em vários elementos da página web sob análise, incluindo tamanho do arquivo, tempo de carregamento, tempo de resposta e solicitações referentes a várias partes do site (JavaScript, arquivos CSS, HTML, imagens etc.).

As ferramentas atribuem pontuações de desempenho, com base em um conjunto ou regras desenvolvidas no contexto de desempenho da página web e das prioridades do usuário. Os princípios incluem armazenamento em cache de recursos, tempos de ida e volta entre cliente e servidor, tamanho de download e upload de dados e uma série de regras que impactam a experiência do usuário final em termos de velocidade da página.

Sugestões são apresentadas, antecipando melhorias na velocidade da página que devem ocorrer através da implementação das regras de otimização apropriadas. Por exemplo, se um arquivo de imagem grande for exibido descompactado, as ferramentas de monitoramento recomendariam a implementação de várias medidas para compactar este arquivo. Tais questões, de outro modo, passariam despercebidas, devido a erros humanos ou simples ignorância – nenhuma das quais pode ser eliminada completa e verdadeiramente. Ao mesmo tempo as ferramentas de monitoramento de velocidade da página são capazes de ao menos, capacitar os proprietários de sites para que identifiquem os problemas e tomem as medidas adequadas para erradicar gargalos ocultos no desempenho do site.

Tutorial de testes

O seguinte teste foi realizado utilizando a ferramenta gratuita de teste de velocidade do site Pingdom. Visite o Pingdom e conduza o teste selecionando várias localizações geográficas de acordo com as opções fornecidas e compare os resultados finais. Insira a URL de seu site e aperte o botão Start Test.

Em seguida, a página retornará com um resumo de seu site, incluindo uma nota de desempenho, o tempo total de carregamento, o tamanho total da página e o número de solicitações que você tem em seu site.

A seção de insights de desempenho na ferramenta de teste de velocidade do Pingdom é muito útil. Tudo é baseado nas regras do Google PageSpeed ​​Insight. Em geral, se você melhorar esses fatores em seu site, deverá ver uma diminuição nos tempos de carregamento.

A ferramenta lista todos os arquivos baixados em um formulário, classificando em termos de ordem de carregamento, tempo de carregamento, tamanho, tipo ou URL.

Analise o desempenho de cada download de arquivo, observando os resultados em relação ao gráfico fornecido na ferramenta:

A ferramenta ajuda a identificar as próximas ações a serem tomadas, com táticas de otimização de velocidade nos sites. No teste demonstrado acima, o sites testado precisa corrigir alguns erros para solicitações que não estão sendo encontradas. No entanto é importante entender que a otimização desses elementos no design de sites é um processo contínuo e em evolução, que começa no nível básico do desenvolvimento e é implementado em todas as novas páginas, à medida que o sites cresce.

Se você precisar de ajuda adicional para compreender o desempenho do seu site no Pingdom, confira nossa explicação mais aprofundada da ferramenta.

Qual ferramenta escolher?

Diferentes ferramentas – Google Page Speed ​​Insights, Pingdom e GTMetrix, entre outros – identificam diferentes problemas, testam diferentes parâmetros de desempenho e indicadores de diferentes maneiras, a partir de diferentes navegadores e localizações geográficas. As classificações de desempenho e os resultados dos testes são portanto diferentes e nenhuma ferramenta identifica todos os gargalos de desempenho nos designs dos sites. No entanto, é recomendável que você permaneça apenas com uma ferramenta enquanto faz melhorias para monitorar melhor seu progresso.

No entanto, o teste em várias ferramentas, a análise de diferentes elementos de design do site e a comparação de vários resultados de testes fornecem insights racionais, ​​para que os proprietários de negócios online criem estratégias de otimização de velocidade para seus sites.

Capítulo 6 – Como melhorar a velocidade do site?

Desenvolver um ótimo site exige muito trabalho. Os principais negócios online se aproveitam de sua experiência comprovada do setor, de suas habilidades avançadas de desenvolvimento web e de um serviço de hospedagem de sites matador para desenvolver sites com desempenho de alto nível e experiência do usuário. Mas para aqueles que não possuem este ponto de partida em sua busca pela velocidade otimizada de websites, adotar uma abordagem minimalista na execução de táticas de otimização de velocidade de página por conta própria funciona (geralmente) bem o suficiente para corrigir sites lentos.

O conhecimento para investir no conjunto certo de soluções e serviços de otimização de velocidade de sites, gerenciamento e talvez truques de codificação é essencial para obter o máximo desempenho do site. As decisões estratégicas de negócios baseadas nesse conhecimento contribuem diretamente para melhorar o desempenho de sites que, por sua vez, leva a mais vendas online, leads, conversões e consequentemente ao sucesso do negócio.

Otimização é a palavra de ordem para o sucesso no mundo cibernético. O ciberespaço, assim como o mundo físico real de planetas, estrelas e galáxias está em fluxo – um estado de mudança e evolução contínuas. De fato, a mudança é o único processo consistente entre o mundo real e o mundo cibernético. A sobrevivência nesses espaços depende da capacidade dos habitantes de se adaptar a diferentes recursos e circunstâncias ambientais.

E o mesmo acontece com os proprietários de sites, que competem pelo sucesso dos negócios online em meio a diversas tendências de mercado, mudanças no comportamento dos visitantes da Internet, avanços tecnológicos em grande escala seguindo a Lei de Moore e padrões variados de desempenho de sites, que são definidos pelos gigantes dos mecanismos de pesquisa.

Otimização de velocidade por conta própria (DIY)

Os proprietários de negócios online e os webmasters adaptam seus sites para buscar os melhores resultados sob a impressão consistente de mudanças, improvisando e otimizando elementos-chave no design do site, que impactam a velocidade da página.

Otimização de imagens

Como regra geral, arquivos maiores demoram mais para serem baixados do que arquivos menores. O tempo de download da página, também conhecido como o tempo de carregamento da página, depende do tamanho total dos arquivos de conteúdo que estão sendo baixados dos servidores de hospedagem para o navegador solicitante. As imagens de alta qualidade são os maiores contribuidores para aumentar o tamanho da página web, reduzindo sua velocidade e exigindo paciência dos visitantes que aguardam ansiosamente o carregamento completo da página.

De acordo com o HTTP Archive, em dezembro de 2017, as imagens representavam, em média, 66% do peso total de uma página web. As seguintes práticas de otimização de imagens são recomendadas e contribuem bastante para reduzir o impacto negativo desses arquivos na velocidade do site:

• Seleção de formato: Use JPGs quando a qualidade for prioridade e não forem necessárias modificações na imagem antes de fazer o upload. Os JPGs podem receber processamento e modificações limitados antes que a qualidade da imagem diminua drasticamente. Para imagens com ícones, logotipos, ilustrações, sinais e texto, use o formato PNG. Use GIFs somente para imagens pequenas ou simples e evite BMPs ou TIFFs.
• Tamanho adequado: Economize bytes valiosos de carregamento das imagens e adeque as dimensões (largura) ao seu modelo de página web. Use os recursos de redimensionamento do navegador para tornar as imagens responsivas, definindo instruções de largura fixa e altura automática.
• Compressão: A compressão de imagens deve estabelecer uma combinação entre o tamanho e a qualidade da imagem. Para JPGs, uma compressão de 60 a 70% produz um bom equilíbrio. Para telas de retina, aumente (JPGs) o tamanho da imagem em 150-200%, comprima de 30 a 40% e diminua sua escala conforme as dimensões necessárias.
• Menos imagens: Mantenha o menor número possível de imagens.

Soluções no WordPress:

Aproveite os plugins de otimização de imagens, como Imagify, Optimus WordPress Image Optimizer, WP Smush, TinyPNG, EWWW Image Optimizer Cloud. É ainda melhor se você escolher um que comprima e otimize as imagens externamente, reduzindo o carregamento feito em seu próprio site.

Para mais dicas, veja nosso guia de otimização de imagens.

Otimize o Código CSS e a entrega

Não faz muito tempo, 30 KB era considerado o tamanho ideal de uma página. E isso incluía imagens, conteúdo, gráficos e código formando toda a página. A popularidade do CSS e do JavaScript reduziu o padrão de 30 KB de tamanho da página, ao oferecer uma experiência de usuário aprimorada ao website.

No entanto, sites modernos codificados em CSS são melhores para baixar conteúdo dos servidores de hospedagem para os navegadores com maior eficiência e precisão. A otimização, portanto, não se trata apenas da redução do tamanho do arquivo. As seguintes práticas recomendadas asseguram uma entrega de CSS otimizada e veloz:

• Codificação curta: Reduza o tamanho de seu código, utilizando menos declarações e operadores. Menos linhas de código significam menos ciclos de processamento e uma entrega mais eficiente de arquivos de sites aos navegadores solicitantes
• Acabe com Hacks CSS para navegadores específicos: O CSS corre perigo, devido a hacks para navegadores específicos muito complexos – ou declarações correcionais, como são chamados – adicionando peso desnecessário aos arquivos de script CSS. Um código CSS otimizado é leve e simples, para que os servidores o processem com eficiência.
• Reduza o CSS: Quase todas as ferramentas de monitoramento de velocidade do site oferecem uma sugestão em comum de reduzir o peso do código CSS, para aumentar a velocidade da página. Um código leve e compacto acelera o download, a análise e a execução, para reduzir drasticamente o tempo de carregamento da página.
• Posicionamento do código: Carregue o código CSS dentro do <head> e o JavaScript dentro do corpo, já que referenciar CSS fora desta seção impede que navegadores exibam conteúdo CSS imediatamente após baixá-lo.
• Melhores práticas na entrega de CSS: 
  • Não utilize @import.
  • Remova CSS não utilizado.
  • Não utilize CSS em HTML, como tags H1 e DIV, por exemplo.
  • Utilize CSS inline.

Soluções para WordPress:

Ferramentas como Autoptimize, WP Rocket, Cache Enabler, CloudFlare CDN e W3 Total Cache são algumas das mais populares disponíveis para reduzir JavaScript e CSS.

Se você é um cliente Kinsta, você pode tirar proveito do recurso de minificação de código que está embutido diretamente no painel MyKinsta. Isto permite aos clientes ativar rápida e facilmente a minificação automática de CSS e JavaScript com um simples clique.

Redução – JavaScript, CSS e HTML

De fato, a otimização de velocidade não se trata (apenas) da redução do tamanho da página. A redução do número de solicitações cliente-servidor no envio do conteúdo do site para navegadores é parte importante da otimização de velocidade do site. Os webmasters conseguem isso ao não exagerarem nas solicitações de CSS, HTML e JavaScript. Mesmo que o número de solicitações não seja tão importante quanto costumava ser, graças a melhorias com o HTTP/2. Isto é, otimize, diminua e elimine todas as linhas de código desnecessárias e que possam ser compactadas.

A redução é particularmente importante para JavaScript embutido e arquivos externos não armazenados em cache. O Google recomenda a redução de todos os arquivos JavaScript com mais de 4096 bytes de tamanho e um corte de 25 bytes é o mínimo para produzir qualquer diferença perceptível em relação ao tempo de carregamento da página.

Uma abordagem rigorosa para projetar um site otimizado e veloz incorpora uma forte intenção de eliminar bytes desnecessários do código. Utilizar todo o espaço de codificação disponível a exclusão de espaços extras, recuos e espaços entre as linhas, enquanto se mantém a legibilidade do código, reduz o tamanho geral dos arquivos principais e front-end do site. E para sites já desenvolvidos sem essa estratégia em mente, a combinação de várias solicitações do servidor (HTML, JavaScript e CSS) em unidades únicas reduz efetivamente os tempos de carregamento da página.

No entanto, o uso excessivo redução de HTML pode levar à perda de fidelidade do código do site, com agentes do usuário usando ciclos excessivos de memória e energia da CPU para “adivinhar” os recursos ausentes, necessários para analisar arquivos HTLM. O monitoramento das alterações no desempenho do carregamento da página em resposta à implementação de cada processo de redução garante que apenas o código e os espaços desnecessários sejam excluídos.

A redução de CSS, JavaScript e HTML apresenta benefícios em comum: latência de rede reduzida, menos solicitações de HTML, compactação aprimorada, download e execução mais rápidas no navegador que levam ao aumento de velocidade da página e a pontuações mais altas nas ferramentas de medição de velocidade do site.

Plugins – Menos é mais!

Funcionalidades adicionais no sites através do uso de plugins tem um preço: redução de desempenho. Infelizmente os webmasters programam uma infinidade de plugins para adicionar recursos atraentes para os visitantes, mas muitas vezes desnecessários, como Gravatar, ferramentas de perfil, estatísticas do site e fontes – alguns usam até 10 plugins diferentes para fazer integrações com as redes sociais. O único benefício disso tudo é evitar a codificação manual.

Muitos sites populares carregam até 80 plugins. No entanto, esse número não gera total preocupação se os plugins instalados forem bem desenvolvidos, para que evitem ações complexas e processamento excessivo do servidor.

Quatro fatores importantes a ficar atento na escolha de plugins de qualidade:

• Ele realiza operações complexas?
• Ele carrega muito conteúdo e scripts?
• Ele aumenta o número de consultas no banco de dados em cada página solicitada?
• Ele realiza solicitações a APIs externos?

Se a resposta para todas essas questões for SIM, você deve dizer um grande NÃO para o plugin!

Agora, a grande pergunta: quantos plugins são demais?

Embora não haja uma resposta exata para essa pergunta, as limitações são exclusivas de cada site e plugin. Muitos especialistas em WordPress recomendam não utilizar muitos plugins. Mas muitos sites de bom desempenho hospedam mais de 80 plugins, até instalarem um plugin de baixa qualidade que adiciona meio segundo ao tempo de carregamento da página.

Da mesma forma, usar 10 plugins para tarefas simples e únicas é muito melhor do que implementar um plugin para realizar todas as tarefas complexas sozinho. As exceções incluem plugins de alta qualidade de desenvolvedores como Yoast WordPress SEO Plugin, All In One SEO Pack e similares.

Soluções para WordPress

Use as seguintes soluções para verificar o desempenho dos plugins no WordPress:

• Kinsta APM – Solução integrada para perfil de desempenho de aplicativos
• Query Monitor

Limitar/Desabilitar revisões no WordPress

O gerenciamento de revisões é uma das vantagens que o WordPress tem a oferecer. O CMS automaticamente acompanha o conteúdo criado no CMS e o disponibiliza para alterações futuras. Para o servidor, isso exige processamento desnecessário, através de entradas no banco de dados adicionais que, na verdade, não são realmente necessárias. Controlar o número de revisões armazenadas alivia o núcleo do site da carga inútil.

Escrever o trecho de código a seguir no arquivo wp-config.php ajuda a contornar este problema:

Desabilitar Revisões:

define( 'WP_POST_REVISIONS', false );

Limitar Revisões:

define( 'WP_POST_REVISIONS', 10 ); // limited to 10 revisions

Confira nosso guia completa sobre como otimizar revisões no WordPress para obter um desempenho mais rápido.

Otimize o Bancos de Dados

O CMS do WordPress armazena posts, comentários, páginas e outras formas de dados em texto e criptografados em um único banco de dados – exceto para imagens e vídeos armazenados na pasta “wp_content”. Esse banco de dados fica lotado ao longo do tempo, não apenas com conteúdo desnecessário e revisões de posteriores, mas também com dados inúteis.

Conteúdo inútil inclui:

• Comments in the spam queue
• Unapproved comments
• Post revisions
• Trashed items such as posts and pages

A otimização do banco de dados gira em torno da eliminação de dados e conteúdo inúteis e desordenados, reduzindo seu tamanho e facilitando que os servidores de hospedagem de sites obtenham o conteúdo solicitado com eficiência, dentro de ciclos mínimos de processamento. Isso também envolve você se certificar de que esteja usando o InnoDB para suas tabelas de banco de dados MySQL, ao invés de MyISAM. Aprenda como converter myISAM em InnoDB.

A tabela wp_options também é negligenciada quando se trata de desempenho geral do WordPress e do banco de dados. Especialmente em sites antigos e grandes, este fator pode ser o culpado por tempos de consulta lentos em seu site, devido a dados carregados automaticamente que são deixados para trás por plugins e temas. Confira nosso guia sobre como limpar sua tabela wp_options.

Soluções para WordPress:

• Limitar, desabilitar e excluir revisões de posts.
• Automaticamente limpar itens excluídos, ao adicionar o seguinte código no arquivo wp-config.php:

define('EMPTY_TRASH_DAYS', 10 );

10 é o número de dias antes que os dados inúteis sejam automaticamente removidos. Altere esse número da forma mais apropriada para você.

Compressão

Segundo o Google, todos os dias, o mundo cibernético se depara com 99 anos de anos humanos desperdiçados, devido ao conteúdo da web descompactado. E, embora a maioria dos navegadores mais recentes suportem recursos de compactação de conteúdo, nem todos os sites oferecem conteúdo compactado. Os visitantes desses sites que consomem muita largura de banda experimentam interações muito lentas com as páginas web. As principais razões para esse comportamento desfavorável (em geral e não intencional) do site incluem servidores de hospedagem mal configurados, proxies da web, navegadores antigos ou com bugs e softwares antivírus.

O conteúdo não comprimido prejudica os usuários que possuem restrição de largura de banda, que acabam por receber o conteúdo da web em tempos de carregamento de página extremamente longos. Esta é a transcrição de uma comunicação comum entre o navegador e o servidor, para fornecer conteúdo não comprimido:

Navegador: Ei, CARREGUE pra mim o /CampeãoDosPesosPesados.html!

Servidor: Pode deixar! *navega pelo servidor e localiza o arquivo*

Servidor: Aqui está, 250 KB de código como resposta.

Navegador: Ai! *usuário final suando, recebendo finalmente o conteúdo solicitado após algumas dezenas de segundos*. (Ok, a comunicação cliente-servidor talvez seja um pouco mais formal e menos dramática do que a narrativa acima).

A maior parte do problema está na maneira como a comunicação cliente-servidor entra no mundo HTML. Arquivos HTML (que compõem quase todo o conteúdo da web) incluem várias instâncias de código redundantes. <Tags>, <Alts>, <HTML> e semelhantes são todas as mesmas coisas que se materializam repetidamente.

O Google recomenda as seguintes táticas de compressão para fornecer o conteúdo de sites de maneira eficiente:

• Reduzir JavaScript, HTML e CSS
• Garantir consistência em códigos CSS e HTML, com as seguintes técnicas:
  • Escrita consistente – com a maioria do código em letras minúsculas.
  • Utilização consistente dos atributos HTML.
  • Especificar atributos HTML na mesma ordem.
  • Especificar pares de valores-chave CSS na mesma ordem, colocando-os em ordem alfabética.
• Habilitar compressão GZIP. O GZIP encontra sequências e instâncias de códigos semelhantes, substituindo-as temporariamente com caracteres mais curtos. Os navegadores descompactam estes arquivos, trazendo-os de volta à sua forma original.

Alguns cuidados:

• Não utilize GZIP em imagens, PDF ou outros dados binários.
• Utilize GZIP apenas em dados cujo tamanho esteja entre 150-1000 bytes. A velocidade de compressão deve ser maior que o tempo necessário para entregar o conteúdo descompactado.
• NÃO comprima conteúdo em navegadores antigos.

Não seguir as recomendações acima acaba fazendo com que o tamanho do arquivo e o tempo de carregamento da página aumentem, devido à sobrecarga no processo de compactação e descompactação.

Soluções para WordPress:

• Habilite compressão GZIP, utilizando o plugin W3 Total Cache.
• A melhor forma de habilitar a compressão GZIP é no nível do servidor Apache ou Nginx. Confira nosso guia de compressão GZIP.

Cache

Desenvolvedores almejam a simplicidade no código do design do site. Um código do site mais fácil de criar, ler e manter leva a processos eficientes no desenvolvimento de sites. Isso inclui o uso frequente das funções de código disponíveis para reduzir a codificação extensa, para oferecer funcionalidades específicas ao site.

No entanto, adicionar muitos loops e linhas de código desnecessárias aumenta os tempos de renderização da página em alguns milissegundos. O influxo de uma torrente de tráfego no site e os milissegundos compostos fazem com que a velocidade da página fique bem abaixo dos padrões aceitáveis.

Os webmasters podem reduzir esses tempos de resposta, fornecendo cópias em cache do conteúdo solicitado ao invés de renderizá-lo repetidamente a cada solicitação de usuário que aparece em seu servidor. O cache da web é o mecanismo de armazenamento temporário de cópias do conteúdo, para atender a solicitações subsequentes do usuário no banco de dados em cache, quando condições específicas são atendidas. Esse processo reduz o número de viagens de ida e volta entre cliente-servidor, realizadas para entregar o conteúdo do site (estático) às solicitações dos navegadores.

Os proprietários de sites podem ativar o armazenamento em cache com os seguintes complementos e configurações, ao hospedarem suas páginas em provedores de serviços que não fornecem armazenamento em cache no servidor:

• W3 Total Cache
• Cache Enabler
• WP Rocket
• FastCGI Cachepara servidores Nginx e Drupal.

Juntamente com o conteúdo em cache estático, os sites também hospedam informações dinâmicas, que contêm atributos exclusivos que mudam regularmente para cada usuário final. Armazenar cópias em cache de conteúdo dinâmico não reutilizável, portanto, não faz sentido, mesmo que a renderização de conteúdo não armazenado em cache seja um processo extremamente lento.

Cache fragmentado

Essa é a arte de armazenar em cache elementos menores de conteúdo dinâmico não armazenáveis no cache do site. Quando as páginas web que contêm conteúdo estático e/ou dinâmico são carregadas, os servidores de hospedagem processam o código PHP e consultam os bancos de dados MySQL para buscar o conteúdo solicitado. Esses processos que consomem tempo e recursos são contornados, fornecendo a saída desejada armazenada como uma cópia em cache.

O armazenamento em cache fragmentado armazena a saída de alguns blocos de código, que permanecem inalterados em várias versões do conteúdo dinâmico. Quando o código é executado e atinge o bloco de código em cache por um tempo predeterminado, o servidor consulta e entrega a saída em cache desse código, ao invés de executá-lo repetidamente, até que o limite de tempo seja atingido.

O resultado final é um conteúdo de site otimizado em cache, para obter máxima velocidade de página, mesmo para sites de comércio eletrônico e de associação, que lidam com conteúdo bastante dinâmico. Na verdade, Kinsta fornece quatro tipos diferentes de armazenamento em cache, todos feitos automaticamente no software ou no nível do servidor. Portanto, não há necessidade de mexer com plugins de terceiros.

Content Delivery Networks (CDN)

A CDN é uma extensão da otimização em cache, projetada para sobrecarregar o desempenho do site, especificamente voltado para o tráfego web disperso globalmente. As CDNs consistem em uma rede de servidores que hospedam cópias em cache de páginas web. Os visitantes da Internet que solicitam essas informações são direcionados para o servidor mais próximo dessa rede, com base em sua localização geográfica.

Os benefícios tradicionais das CDNs, incluindo aumento de desempenho, alta disponibilidade e classificação da página (page rank), elevam os resultados financeiros. Confira todas as razões pelas quais você deve estar usando um CDN. Kinsta inclui um CDN WordPress com suporte para HTTP/2 e IPv6- gratuitamente para todos os clientes nos planos de hospedagem do WordPress!

Mude para hospedagem gerenciada!

O WordPress democratizou a web, ao capacitar os cidadãos do mundo cibernético para que criassem seus próprios blogs e lançassem produtos e serviços online, com investimentos mínimos. Em geral, os proprietários de sites aproveitam um dos seguintes serviços de hospedagem para manter seus sites em funcionamento:

• Hospedagem gratuita: Opção favorita de quem vê o site como um hobby.
• Hospedagem compartilhada: Opção favorita de indivíduos que estão desenvolvendo seus negócios online com um baixo custo.
• Hospedagem dedicada ou gerenciada: Opção favorita de indivíduos que levam a sério seus negócios ou de empresas de pequeno e médio porte, que estão estabelecendo sua presença online.
• Hospedagem colocada: Opção favorita de grandes empresas ou instituições governamentais com equipes internas de TI para gerenciar seus websites.

Entre eles, a contratação de hospedagem gerenciada para serviços de gerenciamento e desenvolvimento de sites de ponta a ponta é a opção mais econômica e produtiva para a manutenção de um sites de alto desempenho. Os recursos da hospedagem gerenciada que afetam a velocidade da página e o desempenho do site incluem:

• Otimização de desempenho – compressão, redução de código, cache no servidor, etc.
• Otimização de cache.
• Otimização de conteúdo para bom desempenho – otimização de imagem, controle de dados inúteis, etc.
• Otimização para mecanismos de pesquisa.
• Atualizações frequentes de software.
• Compatibilidade e implementação de plugins para melhor desempenho.
• Otimização do banco de dados.
• Redes de fornecimento de conteúdo.
• Teste e monitoramento de desempenho.
• Servidores leves e otimizados para velocidade.
• Configuração e manutenção de servidores e sites para minimizar o fluxo entre cliente-servidor.
• Últimas versões de PHP e MariaDB.

WordPress é mais rápido com PHP 7

Com o lançamento do PHP 7, vieram enormes ganhos de desempenho! Tão grandes, na verdade, que devem ser uma prioridade sobre muitas das pequenas otimizações que você pode fazer em seu site WordPress. Os benchmarks a seguir demonstram melhorias significativas de desempenho com o PHP 7 em comparação com versões anteriores. O PHP 7 permite que o sistema execute o dobro de solicitações por segundo em comparação com o PHP 5.6, com quase metade da latência.

Também executamos nossos próprios benchmarks de PHP. E, similarmente aos benchmarks acima, vimos que o PHP 7.3 poderia executar quase três vezes mais transações (solicitações) por segundo em comparação com o PHP 5.6. o PHP 7.3 também é, em média, 9% mais rápido que o PHP 7.2.

• Benchmark WordPress 5.0 PHP 5.6 resulta em: 91.64 solicitações/seg
• Benchmark WordPress 5.0 PHP 7.0 resulta em: 206.71 solicitações/seg
• Benchmark WordPress 5.0 PHP 7.1 resulta em: 210.98 solicitações/seg
• Benchmark WordPress 5.0 PHP 7.2 resulta em: 229.18 solicitações/seg 
• Benchmark WordPress 5.0 PHP 7.3 resulta em: 253.20 solicitações/seg 🏆

Veredito

A lacuna de desempenho entre o PHP 5.6 e as versões posteriores do PHP é evidente, e é por isso que Kinsta sempre oferece a última versão estável. O PHP 8.1, que é ainda mais rápido, foi oficialmente lançado em 25 de novembro de 2021 e agora está disponível para todos os clientes Kinsta com um plano de hospedagem.

Conclusão: A velocidade do site importa. E muito.

Ufa, você completou nosso guia! Parabéns e obrigado pela leitura. Esperamos que você tenha encontrado pelo menos alguns bons conselhos que poderá seguir agora! Em Kinsta, fornecemos serviços de hospedagem gerenciada premium para WordPress e com nossa infraestrutura, você pode ter certeza de que todas as otimizações no servidor serão atendidas! Se você quiser, experimente nosso sistema!

Por último, mas não menos importante, se você achou nosso guia útil, compartilhe com seus amigos e seguidores!