Performan em sites Joomla

Por
Nicholas K. Dionysopoulos

Em 5 partes:

Origiais em inglês

https://www.dionysopoulos.me/joomla-performance-tuning-i-start-at-the-beginning.html
https://www.dionysopoulos.me/joomla-performance-tuning-ii-basic-settings.html
https://www.dionysopoulos.me/joomla-performance-tuning-iii-static-media-optimization.html
https://www.dionysopoulos.me/joomla-performance-tuning-iv-site-building-calisthenics.html
https://www.dionysopoulos.me/joomla-performance-tuning-v-content-quality.html

Terceira parte

Joomla Performance Tuning III: Static Media Optimization

Na segunda parte desta série, descrevi como desbloquear um nível básico de desempenho do seu site Joomla com algumas mudanças simples. Hoje estamos nos aprofundando em mídia estática: JavaScript, CSS e arquivos de imagem. Essas mudanças são mais complicadas, mas podem transformar um site lento em um site com desempenho decente. Indiscutivelmente, nem todas essas mudanças fazem sentido para todos os sites, mas os benefícios de desempenho obtidos são substanciais.

Grande parte do seu site vem na forma de arquivos de mídia estáticos: CSS, JavaScript, imagens e também possível áudio e vídeo. Tendemos a não pensar muito neles, considerando-os secundários em relação ao nosso conteúdo, mas normalmente constituem a maior parte dos dados transferidos do servidor do nosso site para o dispositivo do usuário quando ele visita uma página. Além disso, analisar grandes arquivos CSS e JavaScript ou decodificar imagens grandes congela o thread principal do navegador, o que, em termos simples, significa que o navegador não pode fazer nenhum trabalho para renderizar a página (ele só pode baixar mais dados em segundo plano). Além disso, quanto mais arquivos CSS, JavaScript e de imagem você tiver, mais tempo levará para que todos sejam carregados, o que significa que o navegador terá que parar de renderizar a página e recalcular tudo do zero sempre que um desses arquivos terminar de carregar. Isso pode fazer com que a página pareça mais lenta ou causar outros artefatos de renderização, como o conteúdo saltando pela tela (isso é chamado de "Mudança de layout" no jargão do navegador).

Otimize suas imagens

Se você tem um site com muito conteúdo como este blog, a maior parte da transferência de conteúdo da sua página são as imagens. Você provavelmente está acostumado a apenas tirar uma imagem, talvez redimensioná-la ou cortá-la um pouco, carregá-la com o Media Manager do Joomla ou com o Media Manager da JCE e encerrar o dia. Bom para você, mas suas imagens provavelmente não estão otimizadas e são maiores (em Kilobytes, não necessariamente em dimensões) do que deveriam.

Talvez você conheça vaga ou profundamente ferramentas como pngcrush e mozjpeg. Se você se sentir confortável com a linha de comando, use-a para otimizar suas imagens.

Ainda mais fácil, existe uma ferramenta gratuita chamada ImageOptim para macOS que pode executar várias dessas ferramentas em suas imagens e escolher o menor arquivo. É muito simples. Arraste e solte sua pasta de imagens na ferramenta. Espere até terminar. Suas imagens são substituídas por suas versões otimizadas. Obviamente, isso deve ser feito primeiro em uma cópia local do seu site. Você pode usar o Akeeba Backup para criar um backup do seu site e restaurá-lo localmente para funcionar no seu site.

Por favor, não me pergunte sobre alternativas para Windows e Linux. Não tive necessidade de nenhum, não procurei, não usei nenhum.

Torne suas imagens adaptáveis

Você já sabe que seu site será exibido em dispositivos com diferentes tamanhos de tela: telefones Android com orçamento abaixo de 5", smartphones convencionais de 6", phablets ou tablets pequenos de 7"+, tablets de 10" a 11", tablets de 13" a 15". "laptops e enormes monitores de desktop de 23"+. Você já levou isso em consideração ao tornar seu site responsivo, o que significa que seu conteúdo é dimensionado e seu design se contorce para os modos de interação mais apropriados para o tamanho de tela em que seu site está sendo renderizado.

Mas e as suas imagens?

Quando seus dispositivos de destino variam de um telefone econômico com largura de 380 px a um desktop com largura de 5120 px, o mesmo arquivo de imagem não é apropriado para todos os tamanhos. Se você otimizar para tela pequena, a imagem ficará borrada e pixelizada na tela grande. Se você otimizar para a tela grande, a maioria dos visitantes baixará um arquivo desnecessariamente grande para exibir uma imagem muito menor. Otimizar para o tamanho de dispositivo mais comum do seu público é o pior dos dois mundos: dispositivos pequenos baixam um arquivo grande e telas grandes mostram uma foto borrada. Se você também começar a levar em consideração dispositivos HiDPI com densidades de pixels 2x, 3x ou 4x a densidade padrão da tela (o padrão é, aliás, 96 pixels por polegada), você terá um grande quebra-cabeça para resolver. Você escolhe um arquivo razoavelmente pequeno, que será exibido mal em muitos dispositivos, ou um arquivo enorme, que é exibido perfeitamente em todos os dispositivos, mas tem cerca de alguns megabytes de tamanho?

Felizmente, você NÃO precisa escolher. Os navegadores há muito suportam imagens adaptativas. Resumindo, usando o elemento PICTURE com as consultas de mídia apropriadas, você pode selecionar o arquivo de imagem correto para a tela em que seu site está sendo renderizado. Se o tamanho da tela mudar, por ex. Se o usuário girou o dispositivo de retrato para paisagem ou redimensionou a janela do navegador na área de trabalho, o navegador descobrirá de maneira inteligente o que fazer. Se tiver uma imagem grande o suficiente, ela será reduzida. Caso contrário, e você tiver sugerido em seu elemento PICTURE que uma imagem maior está disponível, ela carregará a imagem maior. Enquanto a imagem maior está sendo carregada, a menor aparecerá dimensionada, de modo que, da perspectiva do usuário, há um pouco de desfoque nas imagens que desaparece rapidamente.

Outra coisa mágica que você pode fazer com o elemento PICTURE é fazer com que o navegador selecione o formato de arquivo mais apropriado que ele suporta. A maioria das imagens na web são JPG ou PNG. Esses são formatos de imagem legados, que datam da década de 1990 ou até antes. A maioria dos navegadores modernos também oferece suporte a WEBP, um formato de arquivo de imagem muito mais eficiente que resulta em arquivos muito menores e, ao mesmo tempo, oferece suporte à transparência. Da sua perspectiva como construtor de sites, é como PNG com esteróides. Infelizmente, você não pode simplesmente prosseguir e converter tudo para WEBP porque versões mais antigas de navegadores (e todas as versões do Safari, no momento em que este artigo foi escrito) não suportam WEBP.

Agora você pode estar segurando a cabeça em desespero. O que era simplesmente enviar um único arquivo de imagem e colocar uma tag IMG em seu conteúdo agora se tornou um quebra-cabeça que exige que você crie vários tamanhos e tipos de imagens diferentes. Isso é difícil para você, integrador de sites, e totalmente impossível para seus clientes.

Felizmente, existem extensões Joomla de terceiros que podem cuidar disso para você. Eu usei o XT Adaptive Images Pro. Este site não usa esta extensão. Em vez disso, escrevi uma pequena biblioteca e uma substituição de layout especial para converter imagens automaticamente conforme necessário em meu site. No entanto, não sou um integrador de sites típico, sou principalmente um desenvolvedor back-end. Achei mais fácil escrever código PHP personalizado para meu site do que usar uma solução de terceiros. Para todos que não sou eu, recomendo fortemente o uso de uma extensão de terceiros para implementar imagens adaptativas.

Outro ponto a ser destacado sobre as imagens é que as ilustrações (ao contrário das fotografias) normalmente começam sua vida como um arquivo vetorial em algo como Adobe Illustrator ou Affinity Designer. O que normalmente vemos é que eles são convertidos em arquivos PNG transparentes antes de serem usados em um site. Esta é a maneira menos eficiente de fazer isso. Os navegadores há muito suportam arquivos de gráficos vetoriais escaláveis (SVG), pequenos arquivos de texto que descrevem gráficos vetoriais. Eles tendem a ser muito menores do que os formatos de arquivo otimizados para fotografia (JPG, PNG e até WEBP), são muito mais compressíveis por serem texto simples e podem ser dimensionados para qualquer tamanho, de minúsculo a enorme, em qualquer resolução de tela, sem perder a nitidez. O problema é que o Joomla 3, por padrão, não suporta arquivos SVG por razões políticas disfarçadas de questões de segurança(*). Se você quiser usar arquivos SVG muito mais eficientes para suas ilustrações, você pode instalar meu plugin Joomla SVG Support. Também recomendo usar o JCE Pro e sua substituição de campo de mídia para facilitar a seleção de SVG e outros arquivos de mídia em componentes de terceiros. Uma nota final de cautela: não tente usar arquivos SVG em elementos que esperam obter seu tamanho do conteúdo (arquivos SVG não possuem largura e altura fixas intrínsecas para todos os cuidados do navegador) e não tente usar arquivos SVG como imagens de fundo. Existem maneiras de fazer as duas coisas, mas é provável que você sofra desnecessariamente.

* A parte da “preocupação com a segurança” tem a ver com o fato de que os arquivos SVG podem conter JavaScript. A preocupação foi eliminada com a recomendação do Joomla sobre a adição de código .htaccess, que evita que o conteúdo JavaScript em arquivos SVG seja executado quando o arquivo é acessado diretamente ou colocado na página com uma tag EMBED ou OBJECT. Arquivos SVG colocados em uma página com uma tag IMG nunca têm seu JavaScript executado em nenhuma versão de navegador lançada neste lado de 2013 como precaução de segurança empregada pelos próprios navegadores. O Joomla 3 ainda não adicionará suporte para SVGs, mesmo que esteja alterando 5 linhas de código, porque é considerado um "recurso importante" quando na verdade não é e o Joomla 4 aplicou acidentalmente as alterações de código necessárias de qualquer maneira, sem ninguém perceber, quando o componente Media Manager foi reescrito. Ops :) Portanto, as únicas razões pelas quais o Joomla 3 ainda não suporta arquivos SVG prontos para uso são políticas e não orientadas para a segurança.

Combine JavaScript e CSS

Lembra quando mencionei o fato de que ter muitos arquivos JavaScript e CSS é lento? Vamos dissecar isso um pouco. Em 2010, para cada arquivo necessário do servidor, seu navegador precisava abrir uma nova conexão HTTP(S) com o servidor, o que acarreta uma penalidade de tempo que é exacerbada em conexões com longos tempos de ida e volta (ping). como redes celulares lentas e aguarde a entrega do arquivo. Além disso, os navegadores só podiam baixar até 4 arquivos do servidor por vez. Em 2020, os navegadores podem baixar até 8 arquivos em paralelo de um servidor e manter a conexão com o servidor aberta (sem necessidade de restabelecê-la) até terminarem de renderizar a página. Ainda assim, para cada arquivo que você precisa buscar no servidor, o navegador precisa enviar uma solicitação e aguardar uma resposta. Isso significa que o tempo de ida e volta ainda é importante, ou seja, conexões móveis lentas com tempo de ida e volta muito alto ou acesso a um servidor distante sofrem atrasos proporcionais ao número de arquivos JavaScript e CSS sendo baixados.

Além disso, o navegador não sabe magicamente quais arquivos baixar, apesar do HTTP/2 Push enviar magicamente alguns desses arquivos com o conteúdo HTML principal. Ele precisa analisar a página HTML e começar a baixar os arquivos assim que perceber que eles são necessários. Isso significa que os arquivos JS e CSS serão totalmente carregados pelo navegador em diferentes momentos. Enquanto isso, o navegador não pode ficar parado, girando os polegares. Ele começa a descobrir como renderizar a página e a colocar coisas na tela. Quando chega um novo arquivo CSS ou JS, ele interrompe o que está fazendo, analisa o arquivo e começa tudo de novo. Quanto mais arquivos você tiver, mais ele terá que parar e reiniciar o que está fazendo. Isso significa que as páginas do seu site são mais lentas para serem exibidas por completo, elas “piscam” muito pois o conteúdo precisa mudar de posição na tela e consomem mais bateria dos dispositivos móveis porque o navegador precisa despender muito mais esforço para renderizar sua página. Resumindo, a experiência do usuário é uma merda.

Este é um problema fácil de resolver quando você tem controle total de toda a aplicação web que gera seu site: você sabe quais bits de CSS e JS são usados em cada seção do seu site e os combina em um arquivo reduzido e compactado antes de implantar a aplicação. Isso também significa que você tem um grande subdepartamento de TI lidando apenas com o site e gasta milhares a milhões de dólares para mantê-lo. No outro extremo do espectro, temos sites baseados em CMS prontos para uso, como WordPress e Joomla, que são uma integração de uma plataforma com vários softwares de terceiros. No nosso caso, seria o Joomla (as principais bibliotecas do CMS) e todas as suas extensões próprias e de terceiros. Cada extensão possui seus próprios arquivos CSS e JS. As extensões não se conhecem e não há suporte no próprio Joomla para combinar seus arquivos CSS e JS. É mais fácil e barato construir um site dessa forma, mas o desempenho é péssimo, conforme explicado acima.

Você pode usar extensões de terceiros, como meu plugin Combinator, para forçar o Joomla a combinar arquivos CSS e JS individuais em um único arquivo. Estou usando este plugin neste blog. É muito trabalhoso, com muita tentativa e erro, para acertar tudo, mas vale a pena se o seu site for acessado principalmente por dispositivos móveis em conexões de celular, como este blog aqui.

Usando um CDN

É ótimo saber todos os itens acima e até mesmo se preocupar em implementá-los pelo menos uma vez, para que você possa apreciar totalmente o impacto que eles têm no desempenho do site. Há algo a ser dito, no entanto, sobre a viabilidade de manter essas otimizações de sites mais difíceis de empregar em dezenas ou centenas de sites, ou seja, na frota de sites de manutenção ativa de uma agência web típica. Neste ponto, você pode considerar pagar pelo CloudFlare.

CloudFlare é um serviço combinado de CDN, otimização de sites e segurança de sites. Como um CDN, ele possui nós em todo o mundo que entregarão seus arquivos estáticos e páginas em cache com rapidez aos visitantes do seu site. Os recursos de otimização que oferece podem lidar automaticamente com a compactação de seus recursos estáticos e até mesmo combinar JS e CSS (Rocket Loader). Há um pequeno custo associado, então não é algo que eu recomendo para todos os sites. Por exemplo, estou usando CloudFlare em nosso site comercial, mas não neste blog.

Continua:

https://www.dionysopoulos.me/joomla-performance-tuning-iv-site-building-calisthenics.html