Acelere o carregamento de páginas: técnicas incomuns de aumento de velocidade de sites – Parte 01

Artigo traduzido com permissão do autor, Manuel Lemos: Accelerate Page Loading: Unusual Site Speedup Techniques – Part 1

***

Nas últimas semanas,várias medidas foram implementadas para oferecer melhoras dramáticas à
velocidade do meu site. Este artigo é o primeiro de muitos que descrevem
essas medidas e como você pode aplicá-las nos seus sites.

Na primeira parte, é descrito como fazer páginasweb carregarem muito mais rápido quando há conteúdo pesado desacelerando o
carregamento da página, como publicidade ou widgets recuperados de outros
sites.

PHPClasses no Facebook

Antes de seguirmospara o tópico principal deste artigo, se você gosta do site PHPClasses, eu
gostaria de convidá-lo para se tornar um fã do
site PHPClasses no Facebook.

Como sugestão de alguns usuários dedicados, eu
finalmente consegui encontrar tempo para melhorar o conteúdo da página do
PHPClasses no Facebook. Como você pode ver, eu fiz com que o mural
mostrasse as últimas classes PHP, posts do blog e oportunidades de carreira
postados no site. Sinta-se à vontade para postar um comentário com outras
sugestões. 

Introdução

Às vezes você precisa inserir elementos nas páginasdo seu site que buscam conteúdo em outros sites. Esse é o caso de widgets que
você vê na barra de navegação de sites que exibem um botão para
submeter o link para aquela página no Twitter.

Outro caso é a publicidade que você vê em sites. A publicidade na maioria das vezes incomoda muitos dos usuários. Ela não apenas distrai os usuários que acessam o site, mas tambématrasa o carregamento do real conteúdo do site em que os usuários estão mais
interessados.

Infelizmente, a publicidade é necessária para mantersites requisitados como o meu viáveis financeiramente. Portanto, ela não pode
simplesmente ser removida. Então eu me perguntei, se ela não pode ser removida,
como posso deixá-la menos irritante?

Eu certamente não posso deixá-la menos irritante aomovê-la para longe da vista do usuário. Se o usuário não vir a propaganda, eles
não irá clicar nela. Se eles não clicarem nela, elas não geram lucro. Isso iria
contra o princípio básico da publicidade nas páginas de sites.

Se não posso movê-la, me pergunto se pelo menos possofazer com que ela não atrase o carregamento do resto das páginas. Este artigo
foca precisamente na solução que encontrei para esse problema.

Por que conteúdo remoto atrasa o
carregamento das páginas?

A raiz do problema das páginas lentas com conteúdoremoto tem a ver com o modo como ele é inserido. Existem basicamente duas
maneiras de inserir conteúdo remeto em páginas: usando elementos HTML inline e
inserindo HTML dinamicamente usando JavaScript.

Conteúdos remotos usando elementos HTML inline podemser por exemplo imagens ou quadros inline. Atualmente, todos os browsers
conseguem lidar com esses tipos de elementos da maneira mais eficiente possível.
Elementos inline geralmente são carregados em paralelo com o resto do conteúdo
da página, então eles não geram lentidão no carregamento do resto do conteúdo
do site.

Dinamicamente, HTML inserido usando JavaScript é oque causa a maior parte da lentidão das páginas. A razão para isso é que o
conteúdo e o layout das páginas dependem totalmente do que o JavaScript busca
quando é executado. Assim, a maioria dos browsers para a renderização da
página, uma vez que eles tropeçam em um bloco JavaScript recuperado de um
servidor remoto. Na verdade, isso não é totalmente verdade, browsers modernos
como o Google Chrome (e provavelmente já existem outros) conseguem recuperar e
executar JavaScript remoto em paralelo com o carregamento dos elementos da sua
outra página.

Ainda existe a lentidão dos browsers quando elesrenderizam páginas que recuperam publicidade ou outros tipos de conteúdo
dinamicamente recuperados usando JavaScript.

A solução: atrase todo o JavaScript remoto

Na maioria dos casos, os desenvolvedores web já sabem anteriormente qualserá o layout do conteúdo recuperado de sites remotos usando JavaScript. Por
exemplo, a publicidade geralmente ocupa espaços em dimensões fixas, que são
definidas pelo IAB (International Advertising Bureau).

E se nós simplesmente inserirmos algumas tags HTMLque pegam o espaço do conteúdo remoto e então substituirmos essas tags com
as tags de código originais do JavaScript? Isso iria resolver o problema, mas a
solução não é tão fácil assim.

A primeira abordagem que me vem à cabeça é colocaralgumas tags <div> nas posições originais do conteúdo lento e então usar
o evento ONLOAD para inserir as tags originais dentro da tag <div> configurando a propriedade innerHTML.

Infelizmente isso não funcionaria bem. O principal
problema é que a maioria das tags fornecidas pelas agências de publicidade web
usam o chamado document.write do JavaScript  para inserir o conteúdo da página.
Esse chamado anexa tags HTML ao documento da página. Portanto, se você atrasar
o carregamento do conteúdo original dessa maneira, em vez de fazer o conteúdo
aparecer nas posições originais, ele apareceria no fim da página.

A solução tem que partir da premissa de que o conteúdooriginal carrega onde é inserido. Portanto, poderíamos atrasar o carregamento
do conteúdo remoto e então fazer com que ele aparecesse nas posições originais.

A solução encontrada consiste em fazer com que oconteúdo lento carregue dentro das tags <div> escondidas no final da
página, e depois movê-las para as posições originais, o que pode ser feito
usando chamadas no objeto DOM node como removeChild e replaceChild.

O objeto Fast Page Content
Loader

Para simplificar a implementação dessa solução, eu desenvolvi um objetoem JavaScript chamado Fast Page Content Loader, que é responsável
pelos passos necessários. O código desse objeto é open source e foi
recentemente publicado no site JSClasses

Eu escrevi um pequeno tutorial no blog do objetoFast Page Content Loader para facilitar a vida daqueles que gostariam de fazer
a implementação dele. Os passos do tutorial são bastante simples de seguir e, ao
usar esse objeto, você irá começar a usufruir da aceleração dos seus sites. A
licença do objeto do novo BSD, que significa que você pode usá-lo, modificá-lo
e redistribuí-lo à vontade, desde que você preserve as notificações originais
de copyright. Eu apenas gostaria de pedir que, se você usá-lo, modificá-lo ou
distribuir o código do objeto, que mantenha o URL da página do objeto que está
dentro do código, para que qualquer pessoa que procure por atualizações do
código as encontre nessa página.

Problemas de browser

Essa solução funciona muito bem, mas não é perfeita.Depois de alguns testes, eu notei que ao usar browsers como  Internet
Explorer e Opera, em alguns casos, o conteúdo atrasado não iria mover para suas
posições originais como deveria. Por algum motivo, esses browsers deixavam as
tags atrasadas no final da página em que elas foram inseridas. Eu não consegui
descobrir qual era o problema. Portanto, por enquanto, ela não irá atrasar o
carregamento de conteúdos lentos sob o Internet Explorer e o Opera. Isso
significa que o conteúdo lento irá carregar automaticamente nas suas posições
originais, apesar de ainda atrasarem o carregamento do resto da página. Se você
tiver alguma ideia sobre por que esse problema acontece com o  Internet
Explorer e com Opera e você sabe de uma possível solução, poste nos comentários deste artigo.

Com outros browsers, como Google Chrome, Firefox eaté o Safari, ela irá funcionar bem, atrasando o carregamento do conteúdo lento
como deveria, então o esforço de executar a implementação dessa solução vale a pena.

Eu estava receoso de que o atraso do carregamento daspropagandas pudesse prejudicar a receita de publicidade. Quando executei a implementação
dessa solução, não vi nenhuma perda na receita
publicitária. Na verdade, parece que a receita aumentou, mas é muito cedo para
dizer se isso foi devido à mudança na maneira como a propaganda está sendo
carregada.

Próximas técnicas para aceleração de sites

Em breve, publicarei artigos quecontam mais sobre outras técnica não usuais que eu implementei recentemente
para melhorar a velocidade do site.

Até lá, por favor poste seus comentários, suas ideias
diferentes para melhorar a velocidade do site ou qualquer outro que você tenha.

?

Texto original disponível em http://www.phpclasses.org/blog/post/131-Accelerate-Page-Loading-Unusual-Site-Speedup-Techniques-Part-1.html