Performance e boas_praticas_de_web
-
Upload
thiago-verly -
Category
Documents
-
view
319 -
download
0
description
Transcript of Performance e boas_praticas_de_web
![Page 1: Performance e boas_praticas_de_web](https://reader036.fdocumentos.com/reader036/viewer/2022082921/5560cbead8b42a0d088b4ba4/html5/thumbnails/1.jpg)
Cartilha de Performance e Boas práticas na Web
Versão 1.0 por Thiago Verly
![Page 2: Performance e boas_praticas_de_web](https://reader036.fdocumentos.com/reader036/viewer/2022082921/5560cbead8b42a0d088b4ba4/html5/thumbnails/2.jpg)
Introdução
Esta cartilha tem como objetivo alinhar e padronizar o desenvolvimento web dos produtos Lancenet! focando na melhoria do desempenho/performance dos hotsites e otimização da aplicação no servidor web.
![Page 3: Performance e boas_praticas_de_web](https://reader036.fdocumentos.com/reader036/viewer/2022082921/5560cbead8b42a0d088b4ba4/html5/thumbnails/3.jpg)
Tópicos
1. Javascript2. CSS3. Imagens4. Cache5. Compressão de arquivos6. .htaccess7. Peso em Kbytes
![Page 4: Performance e boas_praticas_de_web](https://reader036.fdocumentos.com/reader036/viewer/2022082921/5560cbead8b42a0d088b4ba4/html5/thumbnails/4.jpg)
Javascript
Apenas um framework de javascript poderá ser utilizado para enriquecer a Interface do Usuário - UI, evitando carregamento de arquivos desnecessários. Algumas opções são:
• Jquery• Scriptaculous• Prototype• Mootools• Dojo
![Page 5: Performance e boas_praticas_de_web](https://reader036.fdocumentos.com/reader036/viewer/2022082921/5560cbead8b42a0d088b4ba4/html5/thumbnails/5.jpg)
Javascript
Esses arquivos deverão obrigatoriamente ser carregados externamente pela rede de Datacenters do Google. As vantagens são diminuição da latência, paralelismo maior no carregamento dos arquivos e melhor armazenamento em cache.
<script src="http://www.google.com/jsapi"></script><script type="text/javascript"> google.load("jquery", "1.3.2");</script>
Documentação: http://code.google.com/intl/pt-BR/apis/ajaxlibs/documentation/#googleDotLoad
![Page 6: Performance e boas_praticas_de_web](https://reader036.fdocumentos.com/reader036/viewer/2022082921/5560cbead8b42a0d088b4ba4/html5/thumbnails/6.jpg)
Javascript
É necessário minificar o código com as funções em javascript, diminuindo o peso do arquivo .js em Kbytes. Lembrando sempre de guardar um backup da versão identada para futura alteração.
http://tools.w3clubs.com/jsmin/
![Page 7: Performance e boas_praticas_de_web](https://reader036.fdocumentos.com/reader036/viewer/2022082921/5560cbead8b42a0d088b4ba4/html5/thumbnails/7.jpg)
CSS
Caso seja necessário usar um reset.css para resetar as propriedades de todos os browsers, use o reset do Yahho UI, pois este arquivo será carregado pela rede de distribuição de conteúdo do Yahoo paralelamente com outros arquivos, diminuindo o tempo final de carregamento da página.
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.1.1/build/cssreset/reset-min.css">
![Page 8: Performance e boas_praticas_de_web](https://reader036.fdocumentos.com/reader036/viewer/2022082921/5560cbead8b42a0d088b4ba4/html5/thumbnails/8.jpg)
CSS
Arquivos CSS também devem ter o código minificado, lembrando sempre de guardar o backup do arquivo identado para facilitar a leitura e uma futura alteração.
http://tools.w3clubs.com/cssmin/
![Page 9: Performance e boas_praticas_de_web](https://reader036.fdocumentos.com/reader036/viewer/2022082921/5560cbead8b42a0d088b4ba4/html5/thumbnails/9.jpg)
Imagens
As imagens do hotsite devem sempre estar o mais otimizado possível reduzinho o máximo de peso em Kbyte sem perder a qualidade. Após a otimização, deverá ser ainda mais otimizada através da ferramenta Smush.it.
http://www.smushit.com/ysmush.it/
![Page 10: Performance e boas_praticas_de_web](https://reader036.fdocumentos.com/reader036/viewer/2022082921/5560cbead8b42a0d088b4ba4/html5/thumbnails/10.jpg)
Imagens
Para usar thumbnails nas fotos, NUNCA redimensione a imagem pelo atributo width e height do HTML. Use a classe Timthumb que faz o crop da imagem reduzinho seu peso em Kbyte.
Errado: <img width="100" height="100" src="sua_imagem.jpg" alt="Imagem" />
Correto: <img src="/scripts/timthumb.php?src=/sua_imagem.jpg&h=100&w=100&zc=1" alt="Imagem" />
Documentação: http://www.darrenhoyt.com/2008/04/02/timthumb-php-script-released/
![Page 11: Performance e boas_praticas_de_web](https://reader036.fdocumentos.com/reader036/viewer/2022082921/5560cbead8b42a0d088b4ba4/html5/thumbnails/11.jpg)
Cache
A aplicação deve sempre ter o seu conteúdo gerado em arquivo estático html, evitando consultas excessivas no servidor de Banco de Dados.
Se o hotsite for desenvolvido com o CMS Wordpress, é obrigatório o uso do plugin WP Super Cache e ser configurado corretamente para que ele se encarregue de criar automaticamente esse cache das páginas.
WP Super Cache: http://wordpress.org/extend/plugins/wp-super-cache/
![Page 12: Performance e boas_praticas_de_web](https://reader036.fdocumentos.com/reader036/viewer/2022082921/5560cbead8b42a0d088b4ba4/html5/thumbnails/12.jpg)
Compressão de arquivos - PHP
Arquivos javascript e CSS devem ser comprimidos utilizando a biblioteca Minify. Na prática, ela carrega todos os arquivos javascript e CSS em apenas uma requisição HTTP, diminuindo o tempo final de download da página. Para os projetos em Wordpress existe o plugin WP Minify.
Antes:<script src="script1.js"></script><script src="script2.js"></script>
Depois:<script src="/min/?f=script1.js,script2.js,..."></script>
Documentação: http://code.google.com/p/minify/source/browse/tags/release_2.1.3/min/README.txtPlugin WP: http://wordpress.org/extend/plugins/wp-minify/
![Page 13: Performance e boas_praticas_de_web](https://reader036.fdocumentos.com/reader036/viewer/2022082921/5560cbead8b42a0d088b4ba4/html5/thumbnails/13.jpg)
Compressão de arquivos - ASP
Arquivos javascript e CSS devem ser comprimidos utilizando a biblioteca MbCompression. Na prática, ela carrega todos os arquivos javascript e CSS em apenas uma requisição HTTP, diminuindo o tempo final de download da página.
Documentação: http://codeplex.codeplex.com/
![Page 14: Performance e boas_praticas_de_web](https://reader036.fdocumentos.com/reader036/viewer/2022082921/5560cbead8b42a0d088b4ba4/html5/thumbnails/14.jpg)
.htaccess
Para cacheamento correto do browser para os arquivos estáticos, insira o seguinte código no arquivo .htaccess do servidor.
<ifModule mod_headers.c> <filesMatch "\\.(ico|pdf|flv|jpg|jpeg|png|gif|swf)$"> Header set Cache-Control "max-age=2592000, public" </filesMatch> <filesMatch "\\.(css)$"> Header set Cache-Control "max-age=2592000, public" </filesMatch> <filesMatch "\\.(js)$"> Header set Cache-Control "max-age=2592000, private" </filesMatch> <filesMatch "\\.(xml|txt)$"> Header set Cache-Control "max-age=2592000, public, must-revalidate" </filesMatch> <filesMatch "\\.(html|htm|php)$"> Header set Cache-Control "max-age=1, private, must-revalidate" </filesMatch></ifModule><ifModule mod_headers.c> Header unset ETag</ifModule>FileETag None
<ifModule mod_expires.c> ExpiresActive On ExpiresDefault "access plus 1 minutes" ExpiresByType text/html "access plus 1 minutes" ExpiresByType text/css "access plus 1 months" ExpiresByType text/javascript "access plus 1 months" ExpiresByType text/plain "access plus 1 months" ExpiresByType application/x-javascript "access plus 1 months" ExpiresByType application/x-shockwave-flash "access plus 1 months" ExpiresByType image/gif "access plus 1 years" ExpiresByType image/jpeg "access plus 1 years" ExpiresByType image/jpg "access plus 1 years" ExpiresByType image/png "access plus 1 years" ExpiresByType image/x-icon "access plus 1 years"</ifModule>
![Page 15: Performance e boas_praticas_de_web](https://reader036.fdocumentos.com/reader036/viewer/2022082921/5560cbead8b42a0d088b4ba4/html5/thumbnails/15.jpg)
Peso em Kbytes
O peso máximo aceitável para uma página do hotsite é entre 300kb e 400kb, sendo o ideal 200kb.
É necessário ter todos esse cuidados durante o desenvolvimento dos hotsites para entregarmos um conteúdo de qualidade para o usuário.
![Page 16: Performance e boas_praticas_de_web](https://reader036.fdocumentos.com/reader036/viewer/2022082921/5560cbead8b42a0d088b4ba4/html5/thumbnails/16.jpg)
Thiago VerlyAnalista de Web - [email protected]