Expressá-la

Otimizar Imagens

Optimização significa simplesmente mantendo o tamanho da imagem pequena mantendo a qualidade da imagem para o nível requerido. Há um monte de procedimentos que uma vez que podem realizar para otimizar imagens antes de serem carregados no servidor para a entrega. As ferramentas que usamos para a criação destas imagens (Photoshop, Fireworks, etc) costumam ter ferramentas que permitem aos usuários para otimizar a imagem para uso da web.
• Verifique o do GIF para ver se eles estão usando um tamanho de paleta correspondente ao número de cores na imagem. Quando uma imagem é usando 4 cores e uma paleta de 256 cores, em seguida, a imagem poderia estar mais otimizado

• Convert GIF é para onde PNG é possível e ver se há uma poupança. Mais frequentemente do que não existe. Não hesite em usar de PNG, como eles são totalmente suportados pela maioria dos navegadores mais usados. Esperar dos recursos de animação um PNG pode fazer o que faz um GIF, incluindo a transparência.

• Para as imagens utilizadas no sprites CSS, organizar as imagens do sprite horizontalmente e não na vertical, geralmente resulta em um tamanho de arquivo menor. Além disso, combinar imagens com cores semelhantes em um sprite. Isso ajuda você a manter a contagem de cor baixa, idealmente menos de 256 cores de modo a caber em um PNG8.

• Se você estiver usando um favicon.ico, mantê-la pequena, de preferência sob 1K.

Use corretamente dimensionado / redimensionada imagem.

Sempre tente usar imagens redimensionadas, ou seja, não use uma imagem maior do que você precisa só porque você pode definir a largura e altura em HTML. Se você precisar exibir uma imagem 100px X 100px na página, então não use uma escala reduzida imagem 200x200px.

Use imagens progressivas

Um navegador web já renderiza imagens progressivamente. Para fazer ainda melhor, basta salvar as imagens GIF ou PNG com o "entrelaçado" opção, ou suas imagens JPEG com a opção "progressista".

Há um debate permanente entre os usuários da web se o uso de imagem progressiva é uma benção ou um obstáculo. Também uma imagem progressiva pesa cerca de 20% a mais do que sua contraparte não progressiva. Então, se você acha que layout usa imagens que não vai prejudicar a experiência do usuário por ela ser progressiva, fique à vontade para fazê-lo.

Incluir JavaScript na parte inferior do documento HTML

Se você não tem document.write (ou qualquer geração dinâmica de conteúdo da página usando javascripts) para inserir parte do conteúdo da página em seus scripts, mover o script include para a parte inferior da página, antes do final da tag BODY.
A especificação HTTP/1.1 sugere que os navegadores não baixar mais de dois componentes em paralelo por hostname. Se você servir suas imagens a partir de nomes de hosts múltiplos, você pode obter mais de dois downloads para ocorrer em paralelo. Enquanto um script está baixando, no entanto, o navegador não irá iniciar nenhum download outros, mesmo em nomes de máquinas diferentes.
Existem também as formas para criar dinamicamente nós script e carregar scripts remotos após a página ser carregada usando AJAX.

Externalizar você JavaScript

Usando arquivos JavaScript externos vai resultar em mais rápido carregamento das páginas, pois os arquivos JavaScript são armazenados em cache pelo navegador. 'Inline JavaScript em documentos HTML são baixadas sempre que o documento HTML é solicitada. Isto pode efectivamente reduzir o número de pedidos HTTP feitas mas subsequentemente aumenta o tamanho do documento HTML. Externo JavaScript são armazenados em cache pelo navegador, o tamanho do documento HTML é reduzido sem aumentar o número de solicitações HTTP.
Por favor note que, se os usuários do seu site tem várias exibições de página por sessão e muitas das suas páginas reutilizar os mesmos scripts e folhas de estilo, há um benefício maior potencial de cache de arquivos externos.

Embale seus arquivos JavaScript

Em caso de JavaScripts, ao contrário do CSS, os arquivos podem crunched usando alguns algoritmos padrão que daria um tamanho de arquivo menor do que a simples remoção de espaços ou tabulações. Um exemplo de javascript empacotador pode ser encontrada aqui http://dean.edwards.name/packer/

Livrar-se de quaisquer scripts duplicados

É muito raro que os scripts inteiros podem ser duplicados, mas uma revisão dos dez principais sites dos Estados Unidos da web mostra que dois deles contêm um script duplicado. Duplicar scripts, mas, obviamente, reduz o desempenho através da criação de solicitações desnecessárias de HTTP e desperdiçou a execução de JavaScript.
Além disso, em muitos casos, embora os nomes scripts são diferentes, existe uma probabilidade de scripts duplicados na mesma página devido ao tamanho da equipe e número de scripts.

Minimizar acesso a elementos DOM, sempre que possível

Acessando elementos DOM com JavaScript é tão lento, a fim de ter uma página mais interativa, você deve:
• As referências a elementos de cache acessados
Nós • Atualizar "offline" e, em seguida, adicioná-los à árvore
• Evite fixar layout com JavaScript

Comportamento separado de Conteúdo e Apresentação

Assim como nós Apresentação separado (CSS / XSLT) de conteúdo (XHTML / XML), também devemos separar Comportamento (Javascript). Isto é chamado Javascript discreto. Assim como vincular a arquivos CSS externos, devemos vincular a arquivos externos JavaScript.

Em vez de codificação comportamento rígido para o conteúdo (por exemplo, onmouseover, onclick, etc), o comportamento deve ser dinamicamente adicionados elementos, classes e elementos únicos (IDS), usando o DOM. O documento fundamental, o conteúdo, deve conter apenas XHTML / XML e não javascript.
Javascript deve aumentar o conteúdo, adicionando comportamento. O conteúdo deve permanecer útil e utilizável sem javascript (ou sem suporte javascript completo).

Eu salvei este artigo idades de volta, So Sorry! Eu não lembro a fonte ... mas pareceu útil, para nós, que temos de estar conscientes sobre o público para o qual nós desenvolvemos o site para ... isso aqui é i

Peso de página pode ser usado para determinar o tempo de descarga para uma determinada página de uma variedade de velocidades de ligação de Internet. A título de exemplo, o quadro seguinte mostra os tempos de transferência para três páginas diferentes em um número de velocidades de ligação populares.

Benefícios da redução de peso página?

O impacto positivo da redução dos benefícios de peso página proprietários tanto no site e consumidores. Os benefícios potenciais incluem:

1. Carregar páginas mais rápido. O impacto mais óbvio de diminuir o peso da página é que as páginas do seu site irá carregar mais rápido para os visitantes, independentemente da sua velocidade de conexão.
2. Menores tempos de carregamento das páginas criar os visitantes mais confortáveis. Os visitantes são menos propensos a tornar-se frustrados e ir para outro lugar, se suas páginas carregam rapidamente. Por outro lado, a lentidão de carregamento de páginas são uma das maneiras mais seguras para perder visitantes e potenciais clientes.
3. Mais rápidas de carga vezes vai contribuir para a conversão aumentada. Mais visitantes permanecerão no seu site por mais tempo. Mais deles vai acabar fazendo compras, inscrevendo-se para o seu boletim, ou livro marcação do seu site.
4. Sua percepção da marca será reforçada. Clientes de retorno e pela primeira vez visitantes igualmente estará mais inclinado para descrever o seu site (e negócios), como "profissional" se suas páginas carregam rapidamente.
5. Páginas com código limpo e sólido, muitas vezes, ser indexado de forma mais eficaz pelos motores de busca naturais.
6. Páginas optimizadas para peso pode realmente salvar cargas de largura de banda de alto tráfego sites. 100.000 páginas cada um pesando 150 Kb exigirá o dobro de largura de banda de seu provedor de 100.000 páginas cada peso de 75 Kb. Para provedores que cobram por largura de banda utilizada ou para excedentes, essa redução pode criar economias significativas em custos de largura de banda.

Considere os seguintes dados, publicados em um relatório

Se XML / XSL transforma é o seu Domian, então há momentos em que queremos um pedaço de código dinâmico para ser usado item de biblioteca (para ser re-utilizável). O que quero dizer, provavelmente poderia ser mais claro com este cenário de exemplo.

Imagine que você está criando um site (e usando XML, XSL transfroms é claro) ea maioria das páginas teria um Módulo de Comentários. Bem! em seguida, copiar ou colar esse código em cada modelo de página (que eu não tenho dizer, mas fazer a manutenção e retrabalho um pesadelo) ou ainda melhor, você cria um arquivo de inclusão que pode ser puxado, onde quer que você o quer em sua página ( s) ...
Então, como vamos criar um arquivo XSL INCLUDE e incluí-lo dentro de outro arquivo XSL? Aqui está como ...

Apenas para tornar as coisas claras ... aqui está a lista rápida de arquivos que você criar ... aqui, estaremos incluindo informações sobre frutas e verduras em uma página pai chamado alimentos.

1. food.xml - arquivo de dados XML em que a transformação será aplicada
2. food.xsl - arquivo XSL principal, que irá transformar o nosso food.xml
3. inc_fruits.xsl - XSL incluir o arquivo que irá processar dados frutas
4. inc_vegtables.xsl - XSL incluir o arquivo que irá processar dados vetetables

Eu não acho que tenho explicar muito, os códigos para elementos acima referidos, será auto-explicativo ...

FOOD.XML


<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="food.xsl"?>
<food>
<date>July 2008</date>
<description>All about things we eat everyday</description>
<fruits type="tropical">
<item name="mango" moreinfo="http://www.mango.com">Mango is the king of fruits</item>
<item name="banana" moreinfo="http://www.banana.com">Banana once a day , keeps the doctor away</item>
<item name="orange" moreinfo="http://www.orange.com">Orange is the color and rich in vitamin C</item>
<item name="Papaya" moreinfo="http://www.papaya.com">Papaya - Hot when raw, cold when ripe</item>
</fruits>

<vegetables>
<item name="spinach" moreinfo="http://www.spinach.com">Spinach is full of iron</item>
<item name="asparagus" moreinfo="http://www.asparagus.com">Asparagus contains loads of vitamin D </item>
<item name="fenugreek" moreinfo="http://www.fenugreek.com">Fenugreek is rich in vitamin C</item>
</vegetables>
</food>


<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:include href="inc_fruits.xsl" />
<xsl:include href="inc_vegetables.xsl" />
<xsl:template match="/">
<html>
<head>
<title>Title</title>
</head>
<body>
<h3><xsl:value-of select="/food/description" /></h3>
Modification Date : <xsl:value-of select="/food/date" />
<hr/>
<h5> About Fruits</h5>
<xsl:call-template name="about_fruits"/>

<hr/>
<h5> About Vegetables</h5>
<xsl:call-template name="about_vegetables"/>

<hr/>
</ Body>
</ Html>
</ Xsl: template>
</ Xsl: stylesheet>

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="iso-8859-1" />
<xsl:template name="about_fruits">
<xsl:for-each select="/food/fruits/item/@*">
attribute name : <xsl:value-of select="name()"/>
attribute value : <xsl:value-of select="."/> <br />
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="iso-8859-1" />
<xsl:template name="about_vegetables">
<xsl:for-each select="/food/vegetables/item/@*">
attribute name : <xsl:value-of select="name()"/>
attribute value : <xsl:value-of select="."/> <br/>
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>

Download de todos os arquivos acima aqui (249 downloads)