The Blog of a WebDeveloper » Optimização

Não desaproveite o seu Footer!

João Pedro Pereira — Thu, 03 Jun 2010 22:08:57 +0000

Ser WebDeveloper não é uma tarefa fácil, não só temos de estar sempre actualizados relativamente ao que o mercado de trabalho exige relativamente a conhecimentos em ferramentas, frameworks e linguagens de programação como também temos de estar em cima dos hot topics na área do WebDesign e Usabilidade.

Construir um site do zero não é uma tarefa simples, pois exige muito planeamento, estruturação e pensamento criativo e ser criativo é muitas vezes uma dor de cabeça pois quando mais precisamos da nossa amiga criatividade ela pode não aparecer… E é preciso saber estimulá-la.

Tenho visto na Web Portuguesa bons sites a desaproveitar algumas áreas do site, e neste artigo vou referir-me ao footer.

Além do típico Acordo de Privacidade e Informações Legais (que é sempre uma boa forma de aproveitar o espaço) existem algum conteúdo especifico que pode e deve ser usado no footer.

Sitemap – É uma excelente forma de utilizar o espaço do footer pois é útil para os visitantes que se encontrem perdidos ou que simplesmente tenham pressa para encontrar o que procuram sem terem de fazer um scanning por todo o conteúdo do site, que pode ser moroso e por consequência pode fazer-nos perder utilizadores e possíveis clientes. Ninguém gosta de não encontrar rapidamente o que procura e cabe-nos a nós dar-lhes o que desejam.

Informação de Contacto - É também muito importante ter informações de como pode ser feito o contacto com o dono do site ou então criar um formulário de contacto para facilitar o contacto.

Ferramentas e Inspiração:
15 Great Online Form Building Tools
Beautiful Contact Forms For Your Inspiration

Sobre – A par da informação de contacto, uma rápida descrição do que é aquela página, quem é a empresa, quem é a pessoa, etc. algo que faça os utilizadores conhecer melhor.

Social Media – É sem dúvida uma excelente forma de ganhar mais tráfego e/ou de manter os utilizadores actualizados quanto a informações relativos ao produto/conteúdo que o site tem ou vende.

Esta é uma lista de sugestões do que pode ser colocado no footer dos seus sites e dos sites que desenvolve, contudo a lista não termina por aqui existem muito mais coisas que podem ser colocados no footer, feed do Flickr com imagens interessantes, publicidade, formulários para subscrever a newsletters, feeds do twitter e/ou facebook, etc. etc. etc. Apenas a imaginação e originalidade de cada um é o limite.

O WebDeveloper que Utiliza PHP :: Caminho

João Pedro Pereira — Sat, 15 Aug 2009 15:38:50 +0000

PHP é a linguagem de programação web server-side mais utilizada a nível Mundial e neste artigo vão ser retratados os aspectos que devem fazer parte do estudo, do caminho de um WebDeveloper que quer desenvolver em PHP. Entre eles Boas práticas, Frameworks, Segurança, Caching, Buffering e Environments.

O Melhor Amigo – PHP Manual

Antes de mais é necessário aprender a linguagem em si, e o PHP é uma linguagem com uma enorme comunidade por trás que desenvolveu o PHP Manual, neste manual encontra-se todo o conhecimento necessário para se dominar a linguagem PHP. E como se não chegasse a sua enorme qualidade este é, também, gratuito e pode ser acedido quer online quer offline.

De leitura fácil encontramos no PHP Manual a documentação de como proceder à sua instalação e configuração, a documentação da estrutura lógica da linguagem bem como de todas as funções que a compõe sem nunca faltarem imensos exemplos! A secção das notas dos utilizadores é riquissima em estudos e desenvolvimentos de cada função, não dispensem a sua leitura!

Aceder ao PHP Manual em Português

Montar um Ambiente de Teste

Para testar o PHP não é necessário apenas ter um editor de texto e um browser, é necessário um servidor que corra o interpretador de PHP.

Então para começarmos a desenvolver em PHP é necessário configurar um pequeno servidor ou então utilizar um host existente…

Existem soluções que não envolvem muito trabalho nas configurações, como o MAMP (Mac), WAMP (Windows), LAMP (Linux), estas ferramentas já trazem também incluido a SGBD (Sistema de Gestão de Base de Dados) MySQL.

Depois para desenvolver o código pode utilizar ferramentas de auxilio, os IDE’s. A SmashingMagazine realizou um estudo comparativo sobre IDE’s para PHP. Ver Estudo Comparativo de IDE’s para PHP Aqui

Para quem não quer editores tão pesados aconselho o Geany (Linux) ou Notepad++ (Windows).

Desenvolver Bom Código

Isto não é algo restrito ao PHP mas a todas as linguagens de programação.

Quando programamos algo deve ter, além de uma estrutura lógica e funcional correcta, uma boa identação, documentação e deve também ser auto-explicativa (variáveis, classes e funções com nomes que descrevam facilmente o que contêm / o que fazem).

Deve ser fácil de ler e entender quer pelo próprio programador daqui a uns anos ou por outro programador que tenha de modificar algo no código desenvolvido.

Manter Funções Fora de Ciclos

Manter sempre a declaração de funções fora de ciclos é um aspecto muito importante quando visamos a performance de uma aplicação desenvolvida em PHP pois num ciclo que se repete (imaginemos) 500 vezes, a função será declarada 500 vezes, uma perda de tempo.

Organização do Código por Ficheiros

Além da organização ao nível das linhas código em si temos a organização de código relativa à separação por ficheiros e categorias. Para facilitar o entendimento e a detecção e correcção de erros o código deve ser separado lógicamente.

Imaginemos que estamos a desenvolver um CMS (Content Management System). E então devido à grande quantidade de código que tem de ser desenvolvido vamos separar o código em vários ficheiros.

Má Prática

Boa Prática

Aprender Object Oriented Programming

Object-oriented programming (OOP) ou Programação Orientada a Objectos (POO) em Português utiliza objectos para representar partes da aplicação permitindo separar em secções lógicas o código, facilitando a sua modificação e organização.

Aprender a Utilizar uma Framework

Muitos defendem que se deve aprender a utilizar frameworks na iniciação ao PHP porque com elas se aprende a desenvolver código mais avançado, a organizar melhor o código, a torná-lo lógico, a fazer debbug de erros, etc.

Outros defendem que não se deve aprender a utilizar frameworks na iniciação ao PHP porque no inicio o que os utilizadores necessitam é fazer os seus erros, aprender a desenvolver o seu código de raíz, sem funções e classes prontas a utilizar (exceptuando aquelas que vêm de raíz no PHP claro).

Eu considero que o utilizador deve dar uma olhadela a algumas frameworks e decidir se as deve ou não utilizar, porque cada pessoa é unica e pode aprender de diversas formas. Frameworks que considero muito bem estruturadas: Kohana, CodeIgniter e CakePHP .

Nunca Confie nos Utilizadores

Um dos aspectos mais importantes ao nível da segurança de aplicações informáticas é nunca confiar nos utilizadores da aplicação que estamos a desenvolver.

E que implica isso? Validar tudo o que entra! URL’s, formulários, cookies, sessões e até headers dos browsers.

Vamos então ver alguns exemplos de validações pois seria impossível cobrir todas as validações possíveis.

Validar Dados

É muito importante validar e corrigir todos os dados que possam ser introduzidos pelo utilizador! Infelizmente tenho visto imensas aplicações web sem qualquer protecção contra ataques tornando-as completamente vulneráveis a ataques.

Imaginemos o seguinte URL: joaopedropereira.com/xpto.php?id=1245

Que falha pode ser explorada aqui? O parâmetro dado ao id que pode ser utilizado para um SQL Injection por exemplo. Como fazer esta validação? Através de Regex:

function is_natural($str){
return (bool)preg_match( '/^[0-9]+$/', $str);
}
 
if(is_natural($_GET['id'])) { /* código */ }
else die('Erro');

Outro exemplo também com URL: joaopedropereira.com/xpto.php?email=email@domain.tld

function is_email($str){
return (preg_match("/^([a-z0-9\+_\-]+)(\.[a-z0-9\+_\-]+)*@([a-z0-9\-]+\.)+[a-z]{2,6}$/ix", $str)) ? TRUE : FALSE;
}
 
if(is_email($_GET['email'])) { /* código */ }
else die('Erro');

Também com formulários se deve proceder de uma forma semelhante a esta.

ID Cliente

function is_natural($str){
return (bool)preg_match( '/^[0-9]+$/', $str);
}
function is_email($str){
return (preg_match("/^([a-z0-9\+_\-]+)(\.[a-z0-9\+_\-]+)*@([a-z0-9\-]+\.)+[a-z]{2,6}$/ix", $str)) ? TRUE : FALSE;
}
if(is_email($_POST['email']) AND is_natural($_POST['id'])) { /* código */ }
else die('Erro');

Vimos então que se podem validar os dados através de Regex mas existem outras formas de o fazer.

Imaginemos que temos um formulário que envia um campo de texto. Não podemos criar uma função em Regex para o efeito, assim temos de utilizar outras funções mais ou menos complexas para fazer a limpeza destes dados (recomendo o estudo das funções de validação da Kohana ou CodeIgniter).

function proteger($str) {
$str = strip_tags($str);
$str = mysql_real_escape_string($str);
 
return $str;
}

Com esta função adicionamos alguma segurança ao nosso código limpando tags como as utilizadas em ataques XSS e limpamos os dados contra SQL Injection. (Atenção: esta função não inibe todos os ataques apenas os dificulta um pouco).

Existe também uma forma de melhorar a segurança que dá menos trabalho pois apenas com algumas linhas de código podemos limpar todos os dados passados por $_POST, $_GET, $_REQUEST, $_COOKIE, $_SESSION, etc.

Eu normalmente crio um ficheiro que incluo no inicio de cada página parecido com o seguinte:

foreach ($_POST as $key => $value) {
$_POST[$key] = proteger($value);
}
 
foreach ($_GET as $key => $value) {
$_GET[$key] = proteger($value);
}
 
foreach ($_REQUEST as $key => $value) {
$_REQUEST[$key] = proteger($value);
}
 
foreach ($_COOKIE as $key => $value) {
$_COOKIE[$key] = proteger($value);
}
 
foreach ($_SESSION as $key => $value) {
$_SESSION[$key] = proteger($value);
}

Ambiente de Teste vs. Ambiente Real

Um dos problemas com que me deparava quando me iniciei no desenvolvimento de aplicações web em PHP (como o tempo passa…) era a mudança de variáveis entre o ambiente de teste e o real, como por exemplo as configurações da base de dados…

Até ter adoptado uma metodologia que me permitia ao alterar apenas uma linha alternar entre os ambientes.

define('LIVE', true);
 
if(LIVE) {
error_reporting(0);
define('DB_HOST', 'localhost');
define('DB_USER', 'root');
define('DB_PASSWORD', '');
define('DB_DATABASE', 'basededadosxpto');
} else {
error_reporting(E_ALL);
define('DB_HOST', 'joaopedropereira.com');
define('DB_USER', 'joao');
define('DB_PASSWORD', 'pedro');
define('DB_DATABASE', 'joao_basededados');
}

Com esta metodologia só preciso de modificar a linha que define a constante LIVE como true ou false conforme esteja a trabalhar num ou noutro ambiente, podem também verificar ali a alteração do error_reporting, enquanto no caso do Ambiente Real não quero que sejam mostrados nenhuns erros aos visitantes por questões quer de segurança quer de aspecto, no caso do Ambiente de Teste quero saber todos os pormenores.

Utilizar Output Buffering

Utilizar Output Buffering é uma excelente maneira de optimizar a performance de uma aplicação em PHP. Sem Output Buffering a sua aplicação só vai mostrar o HTML no fim de toda a página estar carregada, com o Output Buffering a sua aplicação mostra o HTML já carregado quando o programador ordena!

O Developer Brian Cray criou um artigo muito interessante sobre este assunto para a DevTips. Veja-o aqui.

Utilizar Sistemas de Caching

Os Sistemas de Caching são interessantes para aumentar a performance de uma aplicação em PHP. No entanto há que ter em atenção alguns aspectos como por exemplo numa amostragem de resultados em tempo real não se podem utilizar sistemas de caching ou então teremos dados desactualizados…

Existem sistemas prontos a usar mas também podemos desenvolver o nosso sistema de caching como por exemplo algo do género:

$cache_file = 'cache_files/' . md5($_SERVER['SCRIPT_URI']);
$cache_time = 1200 * 60; //60min*6 * 60 segundos (6HORAS)
 
if(file_exists($cache_file) AND is_readable($cache_file) AND (time() - $cachetime < filemtime($cache_file))) {
require_once($cache_file);
} else {
ob_start();
 
/* o código do ficheiro */
 
$file = fopen($cachefile, 'w');
fwrite($file, ob_get_contents());
fclose($file);
 
ob_end_flush();
}

Sistemas de Caching:

Eu não mordo…

Não tenha medo de comentar, não tenha medo de perguntar, de criticar ou elogiar! Qualquer dúvida pergunte, qualquer reparo faça-o, todas as opiniões e comentários são bem vindos aqui no blog.

Pode também divulgar o artigo, eu não acuso ninguém que divulgue o meu artigo nas diversas redes sociais ou nos próprios blogs (mencionando a fonte ou autor) de plágio .

Criar uma aplicação com boa Usabilidade: O quê? Porquê? Como?

João Pedro Pereira — Sun, 19 Jul 2009 23:38:31 +0000

O que é a Usabilidade?

A Usabilidade é um termo utilizado para mostrar a facilidade de utilização e compreensão de uma interface, está directamente ligada à facilidade que o utilizador tem em alcançar os seus objectivos.

A o estudo da Usabilidade numa aplicação web é muito importante para tornar a aplicação web mais eficiente e produtiva! A Usabilidade está também intimamente relaccionada com a Acessibilidade de uma aplicação web e sua Optimização, e em casos não relaccionados com o assunto especifico de criação de uma aplicação web também são tidos em conta no estudo da Usabilidade aspectos como a ergonomia.

Podemos definir Usabilidade separando-a em vários componentes:

Learnability: How easy is it for users to accomplish basic tasks the first time they encounter the design?

Efficiency: Once users have learned the design, how quickly can they perform tasks?

Memorability: When users return to the design after a period of not using it, how easily can they reestablish proficiency?

Errors: How many errors do users make, how severe are these errors, and how easily can they recover from the errors?

Satisfaction: How pleasant is it to use the design?

Fonte: Usability 101: Introduction to Usability

Porque devem ser feitos estudos de Usabilidade?

Na criação de aplicações web um dos pontos que se deve ter sempre em mente durante a fase de desenho da interface é a Usabilidade da mesma, é necessário ver a Usabilidade como condição essêncial para qualquer interface!

Se uma interface web for de uso dificil, se fôr confusa, se não transmitir a mensagem chave da aplicação, se não permitir entender o que existe naquela aplicação, se for cansativa e mal organizada, entre outras questões, o visitante não irá continuar a navegar.

Salvo raras excepções, os visitantes não vão perder tempo a tentar entender a sua interface, se encontrarem alguma dificuldade na utilização da aplicação saem!

Assim, podemos concluir que, quando presentes de uma interface com fraca Usabilidade (a Acessibilidade também entra nesta questão) o visitante não vai perder tempo e vai sair da página, deste modo, no caso de páginas de venda de produtos ou de promoção de empresas o volume de negócios vai ser bem menor do que o que seria com uma melhor interface. Um visitante não pode comprar algo que não encontra!

Mais Usabilidade = Sucesso

Como verificar a Usabilidade de uma interface?

Um erro muito comum nas pessoas que planeiam e desenham uma interface é esquecerem-se que os visitantes não sabem conhecem a interface aquando da sua primeira utilização, e como os visitantes caso tenham uma má experiência não voltam, é então imperativo que a aplicação seja testada por utilizadores não conhecedores do seu modo de funcionamento. Existem assim dois testes que podem ser realizados.

A utilização de sistemas de tracking que permitam verificar tudo o que é feito pelos visitantes. Sabendo onde clicam, em que página desistem, quantos cliques necessitam para realizar uma tarefa, o tempo passado na página, etc. podendo inclusivé utilizar duas interfaces distintas (utilizar algum script para fazer alternar) de forma a ver qual das duas é melhor ao nível de Usabilidade, a que trouxer mais lucros (monetários ou não, dependo do sentido da aplicação) será à partida a de melhor Usabilidade
A escolha de um certo número de utilizadores que possam fazer o teste da aplicação e no fim pedir a opinião e sugestões aos mesmos.

Dicas para criar aplicações com boa Usabilidade

As aplicações web:

devem-se explicar a si mesmas
devem ser funcionais
devem ser optimizadas para um rápido feedback
devem sempre ter uma funcionalidade de pesquisa
devem permitir formar um sitemap mental a partir do menu principal
devem permitir realizar qualquer tarefa em, no máximo, 3 passos
devem ter conteúdo organizado e ligações para todas as áreas da aplicação
não devem fazer o visitante pensar
não devem fazer o visitante perder tempo
não devem ser confusas
não devem ter informação redundante
não devem induzir em erro
não devem ter um design inapropriado ou irritante

Opinião

E vocês o que pensam relativamente a este tema? Que aspectos têm em conta na criação das interfaces dos vossos trabalhos e dos vossos projectos? Partilhem .

Torne o seu site mais rápido com Gzip

João Pedro Pereira — Sat, 11 Jul 2009 17:37:27 +0000

Já utiliza a compressão gzip na sua página? Espero que sim, isto porque tal como vou mostrar hoje, comprimir a vossa página com gzip torna a página surpreendentemente mais rápida!

Para demonstrar isto guardei a página da SAPO que é uma página com bastante conteúdo, e por isso bastante pesada, tem cerca de 413Kb.

O que se poupa comprimindo os ficheiros com gzip? Velocidade e bandwidth, então para host’s em que este segundo é limitado esta é uma técnica imprescindível!

Nos testes seguintes apenas vou utilizar o ficheiro HTML da SAPO e não todos os recursos externos (imagens, css e JavaScript).

Teste 1

Tamanho

$ cat < sapo.html | wc -c
68712

$ gzip < sapo.html | wc -c
14890

Em termos de tamanho vemos já que de 68,712bytes passamos para 14,890bytes, o gzip diminuiu o tamanho desta página em 53,822bytes, ~78% ! A página final ficou então com apenas 22% do tamanho original! É uma enorme diferença.

Tempo de Compressão

Há quem afirme que comprimir as páginas com gzip é lento, consome recursos no servidor e não traz grandes vantagens. Como vimos no exemplo anterior o gzip reduziu o tamanho da página em 78%! 78% é muita fruta.

Vamos então ver o tempo que demora a comprimir esta página.

$ time gzip < sapo.html > /dev/null
real 0m0.005s
user 0m0.004s
sys 0m000s

No meu laptop (Intel Core Duo T2350 @ 1.86Ghz) o gzip demorou 4ms a comprimir 68,712bytes, mas vamos testar com ficheiros maiores…

Teste 2

Tamanho

Para este teste, utilizando na mesma a página da SAPO guardada aumentei o seu tamanho copiando o código integralmente e colando-o no fim, várias vezes.

$ cat < sapo.html | wc -c
3023330

Temos agora um ficheiro de 3,023,330bytes, cerca de 3Mb sem compressão alguma.

$ gzip < sapo.html | wc -c
631094

Este ficheiro de aproximadamente 3Mb, comprimido com gzip fica com apenas 631,094bytes, 631Kb! Isto dá uma redução de 2,392,236bytes ou seja mais de 2Mb!

E 3Mb, quanto tempo demorará o gzip a comprimir?

Tempo de Compressão

$ time gzip < sapo.html > /dev/null
real 0m0.189s
user 0m0.188s
sys 0m0.000s

Desta vez foi bem mais lenta a compressão, mas mesmo assim a compressão demorou 189ms, se dividirmos o segundo em dez partes, a compressão utilizou pouco menos que duas dessas partes para comprimir 3Mb e passá-los para cerca de 600Kb!

Conclusão

Como vimos o algoritmo de compressão utilizado no gzip permitiu comprimir esta página em 78% ao nível do tamanho utilizando apenas 5ms para o fazer num laptop com vários programas a utilizar capacidade de processamento e que tem menos capacidade de processamento que um servidor actual, isto vai tornar a página mais rápida e vai utilizar menos bandwidth que muitas vezes é limitada em alguns planos de alojamento.

Vejamos então o gráfico seguinte para ver como se comporta a compressão gzip com o aumento do tamanho do ficheiro:

Analisando vemos que quando temos uma página web com 1,9Mb o tempo de compressão é de 125ms, isto é, 0,125 segundos. É super raro existirem páginas com este tamanho ao nível de HTML, para não dizer que não existem mesmo (se conhece alguma envie o URL em baixo nos comentários).

Assim tendo em conta os resultados, podemos concluir que se deve utilizar gzip para comprimir os websites de forma a poupar tempo de espera ao utilizador e largura de banda no servidor e no utilizador.

E vocês o que acham? Vale a pena ou não vale? Gostava de saber a vossa opinião.

Diminuir Load Times no Carregamento de Páginas Web

João Pedro Pereira — Fri, 03 Apr 2009 22:23:47 +0000

Um aspecto muito importante que é necessário ter em conta aquando do desenvolvimento de páginas web é a acessibilidade de uma página e do tempo que a página demora a estar pronta para ser utilizada, pois caso o tempo de carregamento (load time) seja elevado, os visitantes não vão gostar podendo até retroceder e não voltar a essa página, logo load times elevados correspondem quase que directamente a visitantes / utilizadores / membros / clientes perdidos.

Tempo de carregamento baixo = – tempo perdido = utilizador contente

Então podemos concluir que é necessário diminuir os tempos de carregamento das páginas e neste artigo vão ser abordadas várias formas de como reduzir os tempos de carregamento tendo em conta a optimização do JavaScript, do CSS, das imagens bem como optimização do lado do servidor nomeadamente com a utilização de PHP.

JavaScript

O JavaScript é uma linguagem que tem vindo, sucessivamente, a tornar-se cada vez mais popular entre os programadores de webservices pois tem aplicações desde a passagem de argumentos para o servidor sem ser necessário recarregar a página até aos efeitos que o JavaScript permite adicionar às páginas e seus elementos. Mas, infelizmente, todas estas funcionalidades e coisas boas que o JavaScript traz tem um preço… Muitas vezes os ficheiros JavaScript tornam-se muito pesados, quer por serem bibliotecas como a jQuery, MooTools, dojo, ExtJS, etc. ou mesmo porque desenvolvemos grande parte da interface recorrendo a esta linguagem, o que vai adicionar centenas de kilobytes de informação às páginas. E o utilizador é exigente, quer páginas com tempos de carregamento baixos, mas também gosta de todas as facilidades e das interfaces que o JavaScript lhe proporciona. Assim, torna-se necessário, para não causar descontentamento no utilizador, correlacionar estes dois aspectos, é importante encontrar um ponto de equilibro. Como encontrar um ponto de equilibro entre a utilização “massiva” de JavaScript e a exigência dos utilizadores?

Conteúdo duplicado para quê?

Sim, pode parecer óbvio que não se deve ter o mesmo script repetido na mesma página mas é algo que é muito comum e vai gerar dois pedidos HTTP por cada componente a descarregar e utilizar mais capacidade de processamento por parte do browser do utilizador, factores que levam a que a página demore mais tempo a ser carregada inutilmente. Verifique sempre se não tem conteúdo duplicado por acaso! Uma outra solução é utilizar PHP, ou outra linguagem server-side, para adicionar os ficheiros JavaScript ao HTML e verificar se já foi adicionado ou não, tornando assim o código mais profissional e menos susceptivel a falhas e/ou faltas de atenção / verificação.

Colocar os scripts no fundo da página

O grande problema com os scripts é que os browsers não permitem descarregar mais nenhum componente externo enquanto está a descarregar um script. Para optimizar o carregamento da página é então aconselhável que se movam os scripts para o fundo do body, no entanto, existem scripts que não podem ser movidos para o fundo pois passam conteúdo valioso para a página (por exemplo). Uma solução alternativa é utilizar o atributo defer.

“When set, this boolean attribute provides a hint to the user agent that the script is not going to generate any document content (e.g., no “document.write” in javascript) and thus, the user agent can continue parsing and rendering.” (ver aqui)

Assim ao utilizar o atributo defer estamos a dizer ao browser que pode continuar a carregar a página e carregar o script apenas no fim. O que vai reduzir substancialmente o tempo de carregamento, tal como é pretendido.

Descarregar ficheiros em paralelo

Caso façamos uma introdução “normal” na nossa página de ficheiros JavaScript isso vai fazer com que os ficheiros sejam descarregados um de cada vez, diminuindo assim o tempo de carregamento da página.

(...)


(...)

Utilizando a forma normal de inserir os scripts na página vai acontecer que o script2.js só começa a ser descarregado depois do script1.js estar completamente descarregado. Mas para quê esta espera se os acessos de hoje são de banda larga e suportam altas velocidades? Podemos descarregar ambos paralelamente, ao mesmo tempo.

Caso os ficheiros sejam descarregados de forma paralela o tempo de carregamento da página vai diminuir, e como podemos fazer isso? É tão simples como saber utilizar o document.write

(...)
<script type="text/javascript">script>
(...)

Como podemos observar, o segundo exemplo permite que os ficheiros sejam descarregados mais rápidamente pois o download é efectuado ao mesmo tempo. Para mais informações sobre downloads em paralelo continue a ler o artigo e na secção Server-Side este tema será novamente abordado.

Ferramentas para a optimização de código JavaScript

CSS

Todas as páginas web utilizam folhas de estilo (CSS -Cascading Style Sheets) e dependendo do design e da estrutura da folha de estilo esta pode ser maior ou menor mas em ambos os casos leva tempo a carregar e esse tempo deve, tal como nos outros pontos abordados neste artigo, de ser diminuido ao máximo! Além da validação sempre necessária vão ser apresentadas algumas formas de optimizar o código CSS. (validar CSS aqui).

Folhas de estilo no topo

Colocar as folhas de estilo no topo da página faz com que as páginas possam carregar progressivamente e que o utilizador vá vendo o design a surgir. É muito importante dar aos utilizadores um feedback visual mal seja possível (ver estudo aqui), no caso de uma página web a estrutura da página é o nosso indicador de progressão no carregamento da página. Ao carregar a estrutura progressivamente da página (exemplo: header -> menu -> left sidebar -> contéudo) tudo isto vai servir como feedback visual para o visitante que está à espera da página. Caso as folhas de estilo aparecessem mais para o fim, o utilizador enquanto a página fosse carregando iria ter um visual sem estilo algum, sem uma ordem, e por isso pode facilmente desinteressar-se pela página. É também uma especificação HTML dada pelo World Wide Web Consortium (ver aqui

Optimizar o Código CSS

Existem várias formas de se optimizar o código CSS sem reduzir de forma alguma as suas capacidades tornando apenas o código mais pequeno e mais conciso. Exemplo:

#div_xpto {
padding-top:15px;
padding-bottom:10px;
padding-left:13px;
padding-right:0px;
}

Neste exemplo podem ser feitas duas alterações de forma a optimizar o código. Unir as componentes da propriedade padding na própria propriedade. A ordem é sempre top, right, bottom, left (Menomónica possível: TR BL).

#div_xpto {padding: 15px 0px 10px 13px;}

Em vez de utilizarmos 6 linhas utilizamos 1 linha, obtendo o mesmo efeito. Neste exemplo existe ainda outra modificação que podemos fazer que é a de retirar caracteres desnecessários.

#div_xpto {padding: 15px 0 10px 13px;}

Como é possível verificar foi retirado depois do 0 os caracteres px porque 0 é uma medida igual quer em pt, px, em, etc. logo é tempo de carregamento (devido a ser um ficheiro menor) que ganhamos. Caso as medidas padding-top e padding-bottom sejam iguais é possível utilizarmos algo assim: (consideremos as medidas top e bottom de 15px)

#div_xpto {padding: 15px 0 10px; }

Ou seja combinar a componente top e a componente bottom na mesma. Também a nível do background (quase todos os websites utilizam esta propriedade) devem ser feitas optimizações:

div {
background-image:url("fundo.jpg");
background-color:#ffffff;
background-repeat:repeat-x;
background-position:top center;
}

Passa a:

div {
background:url("fundo.jpg") #fff top center repeat-x;
}

Neste exemplo fizeram-se duas alterações, passaram-se as várias componentes do background tudo para a propriedade sem particionamento e a cor passou de #ffffff a #fff. Esta útlima alteração das cores também pode ser utilizada de forma a optimizar o código. Se se definam cores utilizando o standard de 6 digitos este pode ser definido apenas por 3 digitos em certos casos. Como por exemplo: Preto #000000 passa para #000 Branco #ffffff passa para #fff Verde #99ff33 passa para #9f3 Orange #ffcc00 passa para #fc0 Vermelho #ff3300 passa para #f30 Mas por exemplo #930f14 já não pode ser simplificada. Esta técnica funciona para todas as cores seguras (ver aqui tabela). É também muito comum uma outra optmização a nível do código CSS que é combinar elementos. Se tivermos dois elementos que tenham certas caracteristicas iguais, então em vez de se definir duas vezes a mesma caracteristica define-se apenas uma vez englobando ambos os elementos o que torna o código mais limpo e mais leve. Exemplo:

p {
border:0;
padding:0;
margin:0;
font-size:13px;
color:#000
}
.texto {
border:0;
padding:0;
margin:0;
font-size:13px;
color:#360
}

Como podemos reparar as caracteristicas border, padding margin e font-size são idênticas quer na tag p quer na class .texto. Assim em vez de se definirem essas propriedades duas vezes podem ser definidas apenas uma:

p, .texto {
border:0;
padding:0;
margin:0;
font-size:13px;
}

Ferramentas para Optimização de CSS

Leitura complementar:

CSS Sprites

JavaScript / CSS

JavaScript e CSS em ficheiros externos

Uma pergunta que se faz muitas vezes é se os ficheiros JavaScript e os ficheiros CSS devem estar em ficheiros à parte ou na própria página. Utilizar ficheiros externos torna as páginas mais rápidas porque os ficheiros ficam na cache do browser equanto que se estiverem na página são descarregados sempre que é feito um pedido do documento, assim, ao utilizar ficheiros externos, reduz-se o tamanho da página mas aumenta-se o número de pedidos HTTP, contudo, os ficheiros externos ficam na cache do browser, logo diminui-se os pedidos HTTP e o tamanho da página utilizando ficheiros externos. Além da optimização da página, utilizar ficheiros externos torna o código mais estruturado, mais fácilmente editável e mais limpo sendo então uma boa prática para manutenção da página.

Imagens

Os designs mais eye-candy com a utilização de vários icons para descrever serviços, os efeitos dos fundos, dos headers, dos footers, etc. utilizam bastantes imagens, maiores ou menores mas que, de qualquer modo, levam a que o tempo de carregamento da página seja maior. E o que há fazer? São só imagens… Há alguns truques que podem ser utilizados para aumentar a velocidade de carregamento de imagens.

Não redimensione imagens em HTML!

Este ponto é de facto importante, muitas vezes carregam-se imagens, imaginemos, de 500x500px e depois em HTML definem-se medidas menores, isto é desnecessário e vai obrigar a que uma imagem maior seja carregada em vez de uma menor. Ou seja, em vez de se fazer algo assim

com a imagem image.png a ter um tamanho de 500x500px deve-se ter

tendo a imagem image.png o tamanho de 50x50px.

É também importante manter sempre as dimensões da imagem mesmo quando ela é exacta, isto é, no caso anterior mesmo já tendo a imagem 50x50px como queremos devemos indicar width=”50px” height=”50px” porque deste modo o browser não tem de “medir” a imagem antes de a colocar na página ficando então da seguinte forma:

Obrigado ao Sérgio Dinis Lopes pela dica.

favicon.ico pequeno e armazenável em cache

O favicon.ico é uma pequena imagem que se encontra na raíz do servidor (normalmente). É muitas vezes um problema porque mesmo não existindo o browser vai fazer um request à sua procura por isso é sempre bom ter uma para não se responder com um erro 404 Not Found. Esta pequena imagem interfere também com a sequência de carregamento da página por exemplo no browser Internet Explorer enquanto que os scripts, css, imagens, etc são pedidos no onload event o favicon é pedido antes. Sugestões:

Pequeno, de preferência com um máximo de ~1K (exemplos: wikipedia 318 bytes; google 1150 bytes; twitter 1406 bytes; wordpress 1150 bytes);
Defina o parâmetro Expires com um valor que ache mais correcto (4 meses é um valor aceitável tendo em conta que não se muda de favicon ferquentemente);

Escolher o Formato Correcto para as Imagens

Existem vários formatos de imagens utilizados na construção de páginas web, entre elas destacam-se os formatos gif, jpeg, png e é importante escolher para cada imagem qual o formato que melhor se lhe adequa fazendo com que imagens com menos pormenores, menos cores, etc. utilizem formatos mais leves (ver mais informações aqui).

Leitura complementar:

Four Steps to File Size Reduction por Stoyan Stefanov
Progressive JPEG…Hot or Not? por Stoyan Stefanov
Alojar Imagens na Amazon por Amit Agarwal

Server-Side

Nos tempos de carregamento também interferem as acções do lado do servidor e por isso é necessário optimizar essas acções o máximo possível.

Descarregar o buffer de saída mais cedo

Quando uma página é pedida existe um intervalo de tempo em que o browser espera que o servidor junte o HTML e o envie para o browser. Durante este tempo o browser está inactivo à espera da resposta. A linguagem de programação PHP tem uma função chamada flush que permite que sejam enviadas respostas para o browser particionadas permitindo ao browser começar logo a carregar as informações recebidas enquanto o servidor continua a gerar o resto do HTML.

Downloads em Paralelo

(imagens utilizadas neste subcapitulo retiradas daqui)

A especificação HTTP/1.1 sugere que os browsers façam apenas dois downloads em paralelo de cada dominio assim caso todos os componentes estejam no mesmo dominio só poderão ser feitos dois downloads de cada vez aumentando muito o tempo que uma página demora a carregar.

Clients that use persistent connections SHOULD limit the number of simultaneous connections that they maintain to a given server. A single-user client SHOULD NOT maintain more than 2 connections with any server or proxy.

Neste exemplo, estão representados 10 componentes extra na nossa página que precisam de ser descarregados, então se criarmos subdominios conseguimos optimizar o download dos componentes colocando-os a ser descarregados em paralelo. Apesar de se poderem adicionar quantos sub-dominios quiserem às páginas não se devem utilizar mais do que 2-4 dominios devido ao tempo que demora a fazer a correspondência nos DNS (hostname <-> IP) e esta demora, normalmente, entre 20 e 120 millisegundos, enquanto isto acontece o browser não descarrega nada do dominio em questão. E então como resolver a situação? O HTML fica no main-domain http://joaopedropereira.com/ e podem ser criados entre dois e quatro sub-dominios para as imagens content1.joaopedropereira.com e content2.joaopedropereira.com e (sub-dominios apenas com fins ilustrativos). Assim conseguimos optimizar o tempo de carregamento das imagens e scripts da página. Neste exemplo foi possível poupar algum tempo, quanto mais scripts e imagens existirem mais diferença se fará notar no tempo de carregamento da página.

Leitura Complementar

Maximizing Parallel Downloads
Alojar Imagens na Amazon por Amit Agarwal
Optimize Parallel Downloads to Minimize Object Overhead

Utilizar o método GET ou POST em AJAX?

Ao utilizar XMLHttpRequest, o método POST consiste em dois processos separados de envio de informações, primeiro envia os cabeçalhos e só depois envia a informação enquanto que o método GET envia a informação de uma só vez (excepto se existirem muitos cookies). Existe também limite no envio de informações utilizando o método GET pois este não foi feito para enviar grandes quantidades de informações. Tal como os nomes indicam o método GET foi desenhado para pedir informações ao servidor enquanto que o método POST foi desenhado para enviar informações para o servidor. Então qual deles escolher? Na verdade não existe um melhor, existem dois métodos diferentes para situações diferentes e o que é melhor em determinada situação pode não o ser numa outra situação diferente. Então é necessário avaliar cada caso e escolher qual o método mais apropriado.

Leitura Complementar

Ajax: Get or Post por Stephen Chapman

Quer saber mais?

Existem mais maneiras de optimizar um website mas que podem ser mais complexas ou mais dispendiosas, mas vou aqui deixar links para quem quiser estudar mais sobre este tema.

High Performance Web Sites por Steve Souders
How To Optimize Your Site With GZIP Compression