Expresa-la

Optimizar Imaxes

Optimización significa simplemente mantendo o tamaño da imaxe pequena mantendo a calidade da imaxe para o nivel requirido. Hai unha morea de procedementos que unha vez que poden realizar para optimizar imaxes antes de ser cargados no servidor para a súa entrega. As ferramentas que usan para a creación destas imaxes (Photoshop, Fireworks, etc) adoitan ter ferramentas que permiten aos usuarios para optimizar a imaxe para uso da web.
• Comprobe o do GIF a ver se eles están usando un tamaño de paleta correspondente ao número de cores da imaxe. Cando unha imaxe é utilizando 4 cores e unha paleta de 256 cores, a continuación, a imaxe podería estar máis óptimo

• Convert GIF é onde PNG é posible e ver se hai un aforro. Máis veces que non existe. Non dubide en usar de PNG, como son totalmente soportados pola maioría dos navegadores máis utilizados. Esperar dos recursos de animación dun PNG pode facer o que fai un GIF, incluíndo a transparencia.

• Para as imaxes utilizadas no sprites CSS, organizar as imaxes do sprite horizontal e non vertical, xeralmente resulta un tamaño de arquivo menor. Ademais, combinar imaxes con cores similares nun sprite. Isto axuda a manter a conta de memoria baixa, ideal menos de 256 cores para caber nun PNG8.

• Se está a usar un favicon.ico, mantela pequena, preferentemente baixo 1k.

Use correctamente dimensionado / redimensionada imaxe.

Sempre proba a usar imaxes redimensionadas, é dicir, non empregue unha imaxe máis grande do que precisa só porque pode definir o ancho e alto HTML. Se precisa amosar unha imaxe 100px X 100px na páxina, non empregue unha escala imaxe 200x200px.

Use imaxes progresivas

Un navegador web xa renderiza imaxes progresivamente. Para facer aínda mellor, pode gardar as imaxes GIF ou PNG co "entramado" opción, ou as súas imaxes JPEG coa opción "progresista".

Hai un debate permanente entre os usuarios da web o uso de imaxe progresiva é unha bendición ou un obstáculo. Tamén unha imaxe progresiva pesa un 20% máis que a súa contraparte non progresiva. Entón, se pensas que esquema usa imaxes que non vai prexudicar a experiencia do usuario por ela ser progresiva, sexa a vontade para facelo.

Incluír JavaScript na parte inferior do documento HTML

Se non ten document.write (ou calquera xeración dinámica de contidos da páxina usando javascripts) para inserir parte dos contidos da páxina nos seus scripts, mover o script include para a parte inferior da páxina, antes do final da etiqueta BODY.
A especificación HTTP/1.1 suxire que os navegadores non baixar máis de dúas compoñentes en paralelo por nome de máquina. Se servir súas imaxes a partir de nomes de hosts múltiples, pode obter máis de dous descargas que apoian en paralelo. Mentres un script está baixo, con todo, o seu navegador non pode iniciar ningún descarga outros, mesmo nos nomes de máquinas diferentes.
Existen tamén as formas para crear dinámicamente nós script e cargar scripts remotos despois da páxina cargar usando AJAX.

Externalizar vostede JavaScript

Empregando arquivos JavaScript externos vai producir máis rápido carga das páxinas, xa que os arquivos Javascript se almacenan en cache polo navegador. 'Inline JavaScript en documentos HTML son baixadas sempre que o documento HTML é solicitada. Isto pode efectivamente reducir o número de solicitudes HTTP feitas pero posteriormente aumenta o tamaño do documento HTML. Externo Javascript se almacenan en cache polo navegador, o tamaño do documento HTML é reducido sen aumentar o número de solicitudes HTTP.
Teña en conta que, se os usuarios do seu sitio web ten varias exhibicións de páxina por sesión e moitas das súas páxinas reutilizar os mesmos guións e follas de estilo, hai un beneficio maior potencial de caché de ficheiros externos.

Abale seus arquivos JavaScript

En caso de JavaScripts, ao contrario do CSS, os arquivos poden crunched usando algúns algoritmos estándar que daría un tamaño de arquivo menor que a simple eliminación de espazos ou tabulacións. Un exemplo de javascript embalaxe se pode atopar aquí http://dean.edwards.name/packer/

Librar-se de calquera scripts duplicados

É moi raro que os scripts enteiros poden ser duplicados, pero unha revisión dos dez principais sitios de Estados Unidos web demostra que dous deles conteñen un script duplicado. Duplicar scripts, pero, obviamente, reduce o rendemento a través da creación de solicitudes innecesarias de HTTP e desperdiçar a execución de JavaScript.
Ademais, en moitos casos, aínda que os nomes scripts son diferentes, hai unha probabilidade de scripts duplicados na mesma páxina debido ao tamaño do equipo eo número de scripts.

Minimizar acceso a elementos DOM, sempre que sexa posible

Acceder elementos DOM con JavaScript é tan lento, a fin de ter unha páxina máis interactiva, ten que:
• As referencias a elementos de caché populares
Nós • Actualizar "offline" e, a continuación, engadila los á árbore
• Evite fixar esquema con JavaScript

Comportamento separado de contido e Presentación

Así coma nós Presentación separado (CSS / XSLT) de contido (XHTML / XML), tamén debemos separar Comportamento (JavaScript). Isto chámase Javascript discreto. Así como obrigar á arquivos CSS externos, debemos obrigar á arquivos externos Javascript.

En vez de codificación comportamento duro ao contido (por exemplo, onmouseover, onclick, etc), o comportamento debe ser dinamicamente engadidos elementos, clases e elementos únicos (IDS), usando o DOM. O documento fundamental, o contido, debe conter somente XHTML / XML e non javascript.
Javascript debe aumentar o contido, engadindo comportamento. O contido debe permanecer útil e utilizable sen javascript (ou sen soporte javascript completo).

Eu salvei este artigo idades de volta, So Sorry! Eu non lembro a fonte ... mais pareceu útil, para nós, que temos que ser conscientes sobre o público para o que nós realizamos o sitio para ... iso aquí é i

Peso de páxina pode ser usado para determinar o tempo de descarga para unha páxina dunha variedade de velocidades de conexión de Internet. Por exemplo, o cadro seguinte mostra os tempos de transferencia para tres páxinas diferentes nun número de velocidades de conexión populares.

Beneficios da redución de peso páxina?

O impacto positivo da redución dos beneficios de peso páxina propietarios tanto no sitio web e consumidores. Os beneficios potenciais inclúen:

1. Cargar páxinas máis rápido. O impacto máis evidente de diminuír o peso da páxina é que as páxinas do seu sitio web ha cargar máis rápido para os visitantes, sexa cal sexa a súa velocidade de conexión.
2. Menores tempos de carga das páxinas crear os visitantes máis cómodos. Os visitantes son menos propensos a facer-se frustrados e ir a outro lugar, se as súas páxinas cargar rapidamente. Por outra banda, a lentitude de carga de páxinas son unha das formas máis seguras para perder visitantes e potenciais clientes.
3. Máis rápidas de carga veces vai contribuír á conversión aumentada. Máis visitantes permanecerán no seu sitio web por máis tempo. Máis deles vai acabar facendo compras, inscribíndose para o seu boletín, ou libro reserva do seu sitio.
4. A súa percepción da marca será reforzada. Clientes de retorno e por primeira vez visitantes tamén estará máis inclinado para describir o seu sitio (e negocios), como "profesional" se as súas páxinas cargar rapidamente.
5. Páxinas con código limpo e sólido, moitas veces, ser indexado de forma máis eficaz polos buscadores naturais.
6. Páxinas optimizadas para peso realmente gardar carga de ancho de banda de alto tráfico sitios. 100.000 páxinas cada un pesando 150 Kb esixe o dobre de ancho de banda do seu proveedor de 100.000 páxinas cada peso de 75 Kb. Para provedores que cobran por ancho de banda utilizada ou excedentes, esta redución pode crear economías significativas en custos de ancho de banda.

Considero os seguintes datos, publicados nun informe

Se XML / XSL transforma é o seu Domian, entón hai momentos nos que queremos un pedazo de código dinámico para o uso elemento de biblioteca (para ser re-utilizable). O que quero dicir, probablemente podería ser máis claro con este escenario de exemplo.

Imaxina que está creando un sitio web (e usando XML, XSL transfroms por suposto) ea maioría das páxinas tería un módulo de comentarios. Ben! a continuación, copiar ou pegar este código en cada modelo de páxina (que eu non teño dicir, pero facer o mantemento e retrabalho un pesadelo) ou aínda mellor, se crea un ficheiro de inclusión que pode ser levado, onde queira que o quere na súa páxina ( s) ...
Entón, como imos crear un ficheiro XSL include e inclui-lo dentro doutro ficheiro XSL? Aquí está como ...

Só para facer as cousas claras ... Aquí está a lista rápida de ficheiros que crear ... aquí, estaremos incluíndo información sobre froitas e verduras nunha páxina pai chamado alimentos.

1. food.xml - ficheiro de datos XML de que a transformación aplicarase
2. food.xsl - arquivo XSL principal, que ha transformar o noso food.xml
3. inc_fruits.xsl - XSL incluír o ficheiro que irá procesar datos froitas
4. inc_vegtables.xsl - XSL incluír o ficheiro que irá procesar datos vetetables

Eu non creo que teño explicar moito, os códigos para elementos anteriormente mencionados, 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>

Descarga de todos os ficheiros anteriores aquí (252 descargas)