Estas três coisas são definidas desde o início para aqueles que não estão esclarecidos sobre o que são.
Lazy Load
Lazy Load, também mal denominada "preguiçosa" para uma tradução literal, é um padrão de desenho que é usado para atrasar o carregamento ou a entrega de um objecto até ao momento certo de utilização para evitar a pré-carga desnecessária de objectos que possam não ser usados. É mais comummente usado para imagens e contribui para melhores tempos de carga e poupança de largura de banda.
A renderização de cada imagem é atrasada até ser necessária, carregando à medida que percorre o viewport
Viewport
Viewport placeholder, que não tem uma tradução exacta, mas é muitas vezes chamada de "janela gráfica", foi criada pela Apple em 2007 para o seu iPhone e era uma janela virtual semelhante à que a Nokia tinha desenhado para o Mini Map. Era, e ainda é, uma meta tag que se destinava a fornecer uma forma de as páginas web comunicarem aos navegadores móveis como eles queriam que o navegador web tornasse a página.
Sem esta meta tag, iPhones renderiza páginas web como uma janela de 980px de largura que o utilizador teve de aumentar e diminuir. Com esta meta tag, você pode renderizar uma página no seu tamanho real e depois adaptar o layout para fornecer o tipo de página que todos esperamos ver quando usamos um navegador móvel. Eventualmente tornou-se uma meta tag padrão suportada pela maioria dos dispositivos e é a usada hoje em dia para o que é conhecido como design responsivo.
Litespeed Cache
LiteSpeed Web Server é um software de servidor web e LiteSpeed Cache para WordPress (LSCWP) é o seu plugin de aceleração de site tudo-em-um, que apresenta um cache único para todo o servidor e uma colecção de características de optimização para páginas usando WordPress e alojadas num servidor a correr sob este software.
Carregamento de imagens
Idealmente, todas as imagens devem ser carregadas em diferido, excepto aquelas que já estão no viewport quando a página é carregada inicialmente, ou seja, o que é mostrado à primeira vista no ecrã antes de nos deslocarmos.
Isto tem um problema. A página pode ficar feia na primeira carga, pois as imagens não são mostradas até não haver movimento e você tem de excluir as duas ou três primeiras que são mostradas
Embora o WordPress tenha tido carregamento nativo diferido desde a versão 5.5 e possamos fazer isso com muitos outros plugins, tais como Perfmatterso controlo do Viewport para limitar quais as imagens em particular que deseja exibir e quais não são, não é tão simples, pois podemos dizer-lhe para não fazer o carregamento diferido das imagens que queremos exibir, por exemplo, mas não as podemos definir ou excluir primeiros dois, três ou quatromas não podemos definir ou excluir imagens específicas para cada página de uma forma simples e só o podemos fazer com o a granel.
VPI
Em 25 de Julho, o LiteSpeed adicionou na actualização da versão 5.0 do seu plugin uma opção flexível para corrigir isto a que chamou VPI (Viewport Images).
O serviço VPI examina um URL e determina que imagens são visíveis num ecrã de 1300×900 pixéis para vistas no ambiente de trabalho e que imagens são visíveis num ecrã de 480×800 pixéis para vistas no telemóvel. Ele devolve uma lista dessas imagens ao plugin LiteSpeed, e o plugin LiteSpeed exclui-as de carregar lentamente na próxima vez em que ele colocar em cache esse URL.
O resultado é uma página que se torna completamente acima da dobra, enquanto todas as imagens abaixo da dobra continuam a comportar-se como antes. A página mantém a sua boa pontuação de velocidade de página, enquanto os visitantes humanos encontram um primeiro ecrã completo de conteúdo.
Configuração
Para utilizar este novo serviço, obviamente, você tem de activar Carga preguiçosa no plugin.
A sua configuração é muito simples, basta activá-la e tem apenas dois interruptores.
Quando as imagens do viewport (daqui em diante VPI) são activadas e o cron está definido para ON, as imagens VPI serão geradas em segundo plano através de uma fila baseada no cron.
Se não quiser activar o cron, terá de processar a fila de VPI manualmente. Você pode fazer isto a partir do botão"Manually run VPI queue" que aparecerá quando houver URL's na fila ou a partir do painel principal da opção"Force cron".
O interessante e realmente útil sobre esta nova opção é que agora, tanto no editor clássico como no Gutenberg, em cada post e página encontrará uma nova caixa nas opções LiteSpeed onde pode desactivar completamente esta opção e remover qualquer imagem do Viewport para a afinar ao seu gosto.
Quaisquer imagens que apareçam nestas caixas não serão carregadas de forma diferida
Se a entrada ainda não tiver sido processada para VPI, ambas as caixas aparecerão vazias embora possa adicionar manualmente imagens como desejado ou apagar imagens de ambas as caixas e forçar um recálculo de VPI.
O bom e o menos bom
Sem dúvida, a grande vantagem do VPI da LiteSpeed é poder decidir rápida e facilmente em que imagens específicas não queremos que o carregamento diferido seja aplicado e defini-lo manualmente para cada página.
A desvantagem é que esta opção é adicional aos outros serviços de optimização do WordPress da QUIC.cloud tais como CSS Crítico (CCSS), CSS Único (UCSS), LQIP (Low Quality Image Placeholders) e Otimização de Imagem para os quais nos é oferecida uma taxa gratuita limitada, que pode nem sempre ser suficiente, e depois disso você tem que comprar créditos, embora não caro.
Decidi testá-lo para comparar o resultado com a carga preguiçosa nativa do WordPress Core e Perfmatters (com exclusões fixas por quantidade) e até agora posso ver uma melhoria dentro da pequena margem que já restava.
O resultado visual final é exactamente o mesmo que o obtido com Perfmatters, pois é suficiente para mudar a cor do espaço reservado de cinza para branco e ajustar a duração do efeito"fade in" com este CSS.
/* Fade para Lazy Load de Litespeed - PART 1 - Before Lazy Load */
img[data-lazyloaded]{
opacity: 0;
}
/* PART 2 - Upon Lazy Load */
img.litespeed-loaded{
-webkit-transition: opacity .5s linear 0.2s;
-moz-transition: opacity .5s linear 0.2s;
transition: opacity .5s linear 0.2s;
opacity: 1;
}
