Performance – menos requets e mais cache
by Michael Mafort on jan.29, 2010, under Desenvolvimento, PHP
Oba eu também quero! Mas o que é isso?
Uma das melhores praticas para se ter uma boa performance em sua página web é reduzir o número de requisições ao servidor, pois cada requisição abre um canal de comunicação que é composto por uma mensagem de ida que aguarda a mensagem de volta, que será a resposta, numa página pode ser html, imagem, css, js etc. Por isso é importante reduzir este número de requisições, pois o que vai tornar a exibição da página mais rapido não será necessariamente o seu tamanho total em Kb mas sim a quantidade de requisições que ela tem.
Agora sim!
Para economizarmos ( economia trabalha o melhor uso de recursos escassos, no nosso caso o tempo ) e ganharmos performance, uma das técnicas é da utilização de renderização de imagens usando inline images rfc 2397, ou seja você não vai ficar fazendo 1 requisição para cada imagem, elas irão ser carregadas juntamente com o seu html, isto agiliza o processo de renderização, diminui os seus requests e possibilita um controle de cache maior, pois todas as imagens estarão no mesmo arquivo html.
Vamos a prática
1 2 | No seu html vai ficar assim: <img src="<?php echo renderImagem( " alt="" />"> |
Com isso você irá reduzir consideravelmente os requests de imagens no seu servidor, diminuindo o tempo para renderização da página, no entando isto aumenta um pouco o tamanho da imagem que era compactada e passou a ser descompactada e enviada via base64, mas para isto há uma solução muito rápida e prática com o uso do mod_deflate do apache, mas isto já é assundo para um novo post.
Até logo e obrigado pelos peixes!
janeiro 29th, 2010 on 1:48 pm
Muito interessante isso.
Michael, coloca aqui como a pessoa pode testar isso e ver a diferença no código fonte.
Pode ter alguem iniciante que não entendeu nada hehehehe
fevereiro 18th, 2010 on 12:48 pm
Eu acredito que essa não seja a melhor solução, adicionando imagens inline você estará aumentando o HTML, poderá misturar as camadas de apresentação e conteúdo e em muitos casos, irá perder a capacidade de cachear um elemento do site.
Separando as imagens em arquivos, mesmo que aumente o número de requisições, permitirá o navegador fazer controle de cache. O HTML muitas vezes é dinâmico, se as imagens forem codificadas junto com o HTML, o navegador baixará a imagem várias e várias vezes. Com um bom trabalho de CDN e Headers, imagens serão o ultimo problema de performance que terá.
Se for imagens de Layout, a técnica de Sprites é muito mais indicada.
fevereiro 18th, 2010 on 1:16 pm
Concordo, João José, no entanto cada caso é um caso como explicitou. Sendo útil esta forma abordada por mim em casos onde o conteúdo seja menos dinâmico, produzindo um efeito de maior velocidade no carregamento já que tudo estara embutido e se não houve alteração estará em cache.