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.
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.
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.
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.
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.
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.
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.
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
Fonte: http://imasters.com.br/
***
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
Fonte: http://imasters.com.br/
Nenhum comentário:
Postar um comentário