Minimice el tamaño de la carga útil en la web

https://developers.google.com/speed/docs/best-practices/payload#ScaleImages

La cantidad de datos enviados en cada respuesta del servidor puede añadir latencia significativa a la aplicación, especialmente en zonas donde el ancho de banda es limitada. Además de los costos de red de los bytes de transmisión, existe también una pena correspondiente a cruzar un límite paquete IP. (El tamaño máximo de paquete, o unidad de transmisión máxima (MTU), es de 1500 bytes en una red Ethernet, sino que varía en otros tipos de redes.) Por desgracia, ya que es difícil saber qué bytes cruzar un límite de paquetes, lo mejor es simplemente reducir el número de paquetes transmite su servidor, y nos esforzamos por mantenerlos en 1500 bytes siempre que sea posible.

Reducir al mínimo el tamaño de carga de recursos, tanto estáticos y dinámicos pueden reducir significativamente la latencia de red. Además, para los scripts que se almacenan en caché, reduciendo su velocidad de tamaño en bytes el tiempo que el navegador lleva a analizar y ejecutar código necesario para representar la página.

1. Habilitar la compresión
2. Eliminar sin usar CSS
3. Minify JavaScript
4. Minify CSS
5. Minify HTML
6. Aplazar la carga de JavaScript
7. Optimizar imágenes
8. Sirva imágenes a escala
9. Servir los recursos desde una dirección URL en consonancia

Habilitar la compresión

Información general

La compresión de los recursos con gzip o desinflar puede reducir el número de bytes enviados a través de la red.

Detalles

Mayoría de los navegadores actuales son compatibles con la compresión de datos para los archivos HTML, CSS y JavaScript. Esto permite que el contenido se envía a través de la red en forma más compacta y puede resultar en una reducción dramática en el tiempo de descarga. 

Muchos servidores web puede comprimir archivos en formato gzip antes de enviarlos para su descarga, ya sea llamando a un módulo de terceros o el uso de rutinas incorporadas. Para habilitar la compresión, configurar el servidor web para configurar el Content-Encoding cabecera para gzip formato para todos los recursos compresibles. También puede utilizar desinflar , que utiliza los mismos algoritmos de compresión, pero no se utiliza ampliamente, por lo que recomendamos gzip. Si la transmisión de compresión impone una carga excesiva en el servidor, por lo general, puede configurarlo para que antes de comprimir los archivos y almacenar en caché para su descarga a futuro. 

Tenga en cuenta que gzipping sólo es beneficioso para las grandes recursos. Debido a la sobrecarga y la latencia de la compresión y descompresión, se debe sólo los archivos gzip por encima de un umbral determinado tamaño, se recomienda un intervalo mínimo entre 150 y 1000 bytes. Archivos gzipping por debajo de 150 bytes en realidad puede hacerlas más grandes.

Recomendaciones

Escribir el contenido de su página web para hacer más efectiva la compresión.

Para asegurarse de que su contenido se comprime bien, haga lo siguiente:

• Garantizar la coherencia en el código HTML y CSS. Para lograr la coherencia:
  • Especifique CSS pares clave-valor en el mismo orden que sea posible, es decir, alfabetizar a ellos.
  • Especifique los atributos de HTML en el mismo orden, es decir, alfabetizar a ellos. Ponga href primero para los enlaces (ya que es el más común), a continuación, ordenar alfabéticamente el resto. Por ejemplo, en la búsqueda de Google, la página de resultados, cuando los atributos HTML fueron alfabetizados, una reducción del 1,5% en el tamaño de la salida gzip resultado.
  • Utilice carcasa consistente, es decir, usar minúsculas donde sea posible.
  • Utilice citar consistentes para los atributos de etiquetas HTML, es decir, siempre se cita única, cita siempre doble, o no citar en absoluto que sea posible.
• Minify JavaScript y CSS . Minifying JavaScript y CSS pueden mejorar la compresión, tanto para exterior JS y CSS, y para las páginas HTML que contienen entre líneas de código JS y bloques de estilo.

No use gzip para la imagen u otros archivos binarios.

Formatos de archivo de imagen compatibles con la web, así como vídeos, archivos PDF y otros formatos binarios, ya están comprimidos, utilizando gzip sobre ellos no aporta ningún beneficio adicional, y en realidad puede hacerlas más grandes. Para comprimir las imágenes, vea Optimizar imágenes .

Recursos adicionales

• Para más consejos sobre cómo asegurarse de que su contenido se descarga en formato comprimido, consulte Uso de compresión para hacer la web más rápido .

Volver arriba

Eliminar sin usar CSS

Información general

La eliminación o aplazamiento de las reglas de estilo que no se utilizan de un documento de evitar la descarga de bytes innecesarios y permitir que el navegador se inicie la representación antes.

Detalles

Antes de que un navegador puede comenzar a hacer una página web, debe descargar y analizar las hojas de estilo que se requieren para diseñar la página. Incluso si una hoja de estilos en un archivo externo que se almacena en caché, la representación se bloquea hasta que el navegador carga la hoja de estilos del disco.Además, una vez que la hoja de estilos se carga, el navegador CSS motor tiene que evaluar cada norma contenida en el archivo para ver si la regla se aplica a la página actual. A menudo, muchos sitios web volver a utilizar el mismo archivo CSS externa para todas sus páginas, aunque muchas de las reglas definidas en ella no se aplican a la página actual.

La mejor manera de reducir al mínimo la latencia provocada por la carga de hojas de estilo y el tiempo de procesamiento es reducir la huella de CSS, de una manera obvia de hacerlo es eliminar o aplazar las reglas CSS que no se utilicen en la página actual. 

Consejo:  Cuando se ejecuta Page Speed ​​en contra de una página hace referencia a los archivos CSS, identifica todas las reglas CSS que no se aplican a esa página.

Recomendaciones

• Retire todos los bloques de estilo en línea que contienen CSS que no es utilizado por la página actual.
• Minify CSS .
• Si su sitio utiliza archivos CSS externos compartidos entre varias páginas, considere la posibilidad de dividirlos en pequeños archivos que contienen las reglas para las páginas específicas.
• Si una página hace referencia a las reglas de estilo que no son necesarios a la derecha en el inicio, ponerlos en un archivo separado. Css y aplazar la cargadel archivo hasta que el onload evento se dispara.
• Si utiliza JavaScript para generar estilos, asegúrese de que esas funciones no son llamados desde las páginas que no utilizan esos estilos. Esto puede requerir la refactorización de código JS.

Volver arriba

Minify JavaScript

Información general

Compactación de código JavaScript puede ahorrar muchos bytes de datos y acelerar la descarga, el análisis, y el tiempo de ejecución.

Detalles

"Minifying" código se refiere a la eliminación de bytes innecesarios, como los espacios en blanco, saltos de línea y sangría. Mantener el código JavaScript compacto tiene una serie de beneficios. En primer lugar, para la línea de JavaScript y archivos externos que no desea en caché, el tamaño del archivo se reduce la latencia de la red se incurre en cada vez que se descarga la página. En segundo lugar, minificación puede mejorar aún más la compresión de archivos JS externos y de los archivos HTML en el que se inline el código JS. En tercer lugar, los archivos más pequeños se pueden cargar y ejecutar con mayor rapidez por los navegadores web.

Varias herramientas están disponibles gratuitamente para minify JavaScript, incluyendo el compilador de cierre , JSMin o el compresor de YUI . Se puede crear un proceso de construcción que utiliza estas herramientas para minify y renombrar los archivos de desarrollo y las guarda en un directorio de producción. Le recomendamos minifying los archivos JS que son 4096 bytes o más en tamaño. Usted debe ver un beneficio para todos los archivos que se pueden reducir en 25 bytes o más (menos de esto no se generará alguna ganancia de rendimiento apreciable).

Consejo: Cuando se ejecuta Page Speed ​​en contra de una página hace referencia a los archivos de JS, se ejecuta automáticamente el compilador de cierre (si está disponible) y JSMin (para los bloques en línea y si el compilador no está disponible) en los archivos y guarda la salida minified a un directorio configurable .

Volver arriba

Minify CSS

Información general

Compactación de código CSS puede ahorrar muchos bytes de datos y acelerar la descarga, el análisis, y el tiempo de ejecución.

Detalles

Minifying CSS tiene las mismas prestaciones que los de minifying JS: la reducción de la latencia de red, la mejora de la compresión, y una carga más rápida del navegador y la ejecución.

Varias herramientas están disponibles gratuitamente para minify JavaScript, incluyendo el compresor de YUI y cssmin.js .

Consejo: Cuando se ejecuta Page Speed ​​en contra de una página hace referencia a los archivos CSS, se ejecuta automáticamente cssmin.js en los archivos y guarda la salida minified a un directorio configurable .

Volver arriba

Minify HTML

Información general

Compactación de código HTML, incluyendo cualquier JavaScript y CSS en línea contenida en el mismo, puede ahorrar muchos bytes de datos y acelerar la descarga, el análisis y el tiempo de ejecución.

Detalles

Minifying HTML tiene los mismos beneficios que los de minifying CSS y JS: la reducción de la latencia de red, la mejora de la compresión, y una carga más rápida del navegador y la ejecución. Por otra parte, con frecuencia HTML contiene código JS en línea (en <script> etiquetas) y la CSS en línea (en <style> tags), por lo que es útil para minify éstos también.

Nota: Esta regla es experimental y se centra actualmente en la reducción de tamaño en lugar de HTML estricta bien formado. Las futuras versiones de la norma también tendrá en cuenta la corrección. Para más información sobre el comportamiento actual, ver el wiki de Page Speed ​​.

Consejo: Cuando se ejecuta Page Speed ​​en contra de una página hace referencia a los archivos HTML, se ejecuta automáticamente la velocidad de la página HTML compactador (que a su vez se aplican JSMin y cssmin.js a cualquier línea de JavaScript y CSS) en los archivos y guarda la salida a un minified directorio configurable .

Volver arriba

Aplazar la carga de JavaScript

Información general

Aplazar la carga de las funciones de JavaScript que no se llaman en el arranque se reduce el tamaño de la descarga inicial, permitiendo que los recursos de otros para ser descargado de forma paralela, y la aceleración de la ejecución y el tiempo de renderizado.

Detalles

Al igual que las hojas de estilo, las secuencias de comandos debe ser descargado, se analiza y ejecuta antes de que el navegador puede comenzar a hacer una página web. Una vez más, incluso si un script está contenida en un archivo externo que se almacena en caché, el procesamiento de todos los elementos por debajo de la secuencia de comandos se bloquea hasta que el navegador carga el código del disco y lo ejecuta. Sin embargo, para algunos navegadores, la situación es peor que la de hojas de estilo: mientras que JavaScript está siendo procesado, el navegador bloquea todos los demás recursos que se descargue. Para las aplicaciones AJAX tipo que utilizan muchos bytes de código JavaScript, se puede añadir latencia considerable.

Para muchas aplicaciones de uso intensivo de guiones, la mayor parte del código JavaScript se encarga de los eventos iniciados por el usuario, tales como ratón, hacer clic y arrastrar, la entrada de la forma y presentación, la expansión de los elementos ocultos, y así sucesivamente. Todos estos eventos activados por el usuario se producen después de que se cargue la página y el onload evento se dispara. Por lo tanto, gran parte de la demora en la "ruta crítica" (el tiempo necesario para cargar la página principal en el arranque) se podrían evitar mediante el aplazamiento de la carga del JavaScript hasta que realmente se necesita.Aunque este "flojo" método de carga no se reduce la carga útil JS total, puede reducir significativamente el número de bytes necesarios para cargar el estado inicial de la página, y permite que los bytes restantes para ser cargado de forma asincrónica en el fondo.

Para utilizar esta técnica, primero debe identificar a todas las funciones de JavaScript que no se utilicen en el documento antes de que el proceso de carga de eventos. Para cualquier archivo que contiene más de 25 funciones no requerida, se mueven todas esas funciones en un archivo separado, JS externo. Esto puede requerir la refactorización de su código para evitar dependencias entre los archivos. (Para los archivos que contienen menos de 25 funciones no llamados, no vale la pena el esfuerzo de refactorización.)

Luego, se inserta un detector de eventos de JavaScript en el encabezado del documento que contiene el archivo que obliga externo que se cargará después de que el proceso de carga de eventos. Usted puede hacer esto por cualquiera de los medios habituales de secuencias de comandos, pero se recomienda un elemento de guión muy simple DOM (para evitar la multi-navegador y el mismo dominio de las cuestiones de política). He aquí un ejemplo (donde "deferredfunctions.js" contiene las funciones que se perezosamente cargado):

original sin traducir:

<script type="text/javascript">

 // Add a script element as a child of the body
 function downloadJSAtOnload() {
 var element = document.createElement("script");
 element.src = "deferredfunctions.js";
 document.body.appendChild(element);
 }

 // Check for browser support of event handling capability
 if (window.addEventListener)
 window.addEventListener("load", downloadJSAtOnload, false);
 else if (window.attachEvent)
 window.attachEvent("onload", downloadJSAtOnload);
 else window.onload = downloadJSAtOnload;

</script>
TRADUCCIÓN AUTOMÁTICA:
<script type="text/javascript"> / / Añadir un elemento de script como un niño del cuerpo downloadJSAtOnload function () { var elemento = document.createElement ("script"); element.src = "deferredfunctions.js", documento . body.appendChild (elemento); } / / Comprobar la compatibilidad de los exploradores de la capacidad de manejo de eventos if (window.addEventListener) window.addEventListener ("load", downloadJSAtOnload, false); else if (window.attachEvent) window.attachEvent (" onload ", downloadJSAtOnload); otra window.onload = downloadJSAtOnload; </ script>

Volver arriba

Optimizar imágenes

Información general

Correctamente el formato y la compresión de imágenes puede ahorrar muchos bytes de datos.

Detalles

Las imágenes guardadas de programas como Fireworks puede contener kilobytes de comentarios adicionales, y usar demasiados colores, a pesar de una reducción en la paleta de colores no se puede reducir sensiblemente la calidad de imagen. Imágenes optimizadas incorrectamente puede ocupar más espacio de lo que necesitan, para los usuarios de conexiones lentas, es especialmente importante para mantener un tamaño de imagen a un mínimo.

Debe realizar la optimización básica y avanzada en todas las imágenes. Optimización de cultivo básico incluye un espacio innecesario, lo que reduce la profundidad de color a su menor nivel aceptable, la eliminación de los comentarios de imágenes, y guardar la imagen en un formato apropiado. Puede realizar la optimización básica con cualquier programa de edición de imágenes, tales como GIMP . Optimización avanzada implica más (sin pérdida) de compresión de archivos JPEG y PNG. Usted debe ver un beneficio para cualquier archivo de imagen que se puede reducir en 25 bytes o más (menos de esto no se generará alguna ganancia de rendimiento apreciable).

Recomendaciones

Elija un formato de archivo de imagen apropiado.

El tipo de una imagen puede tener un impacto drástico en el tamaño del archivo. Use estas pautas:

• PNG son casi siempre superiores a los archivos GIF y son generalmente la mejor opción. IE 4.0b1 +, Mac IE 5.0 +, Opera 3.51 + 4.04 + y Netscape, así como todas las versiones de Safari y Firefox totalmente compatibles con Papúa Nueva Guinea, incluida la transparencia. Las versiones de IE 4 a 6 no son compatibles con la transparencia de canal alfa (transparencia parcial), pero que apoyan de 256 colores-o-menos PNG con transparencia de 1 bit (el mismo que es compatible con archivos GIF). IE 7 y 8 PNGs alfa soporte transparente, excepto cuando una alfa opacidad filtro se aplica al elemento.Puede generar o convertir archivos PNG adecuados con GIMP usando "indexado" en lugar del modo "RGB". Si usted tiene que mantener la compatibilidad con navegadores 3.x nivel, sirven un GIF alternativo para los navegadores.
• Utilice archivos GIF para gráficos muy pequeños o sencillos (por ejemplo, menos de 10x10 píxeles, o una paleta de color de menos de 3 colores) y para las imágenes que contienen animación. Si usted piensa que una imagen puede comprimir mejor como GIF, probarlo como PNG y GIF uno y escoger el más pequeño.
• Utilice archivos JPG para las imágenes fotográficas de estilo.
• No utilice BMP o TIFF.

Use un compresor de imágenes.

Existen varias herramientas que realizan una mayor compresión, sin pérdida de archivos JPEG y PNG, sin efecto sobre la calidad de la imagen. Para JPEG, se recomienda jpegtran o jpegoptim (disponible sólo en Linux, correr con el - strip-all opción). Para PNG, se recomienda OptiPNG o PNGOUT .

Consejo: Cuando se ejecuta Page Speed ​​en contra de una página hace referencia a los archivos JPEG y PNG, que comprime automáticamente los archivos y guarda la salida a un directorio configurable .

Volver arriba

Sirva imágenes a escala

Información general

Del tamaño correcto de las imágenes se pueden ahorrar muchos bytes de datos.

Detalles

A veces es posible que desee mostrar la misma imagen en varios tamaños, por lo que servirá para un recurso de imagen única y el uso de HTML o CSS en la página que contiene la escalada. Por ejemplo, usted puede tener una de 10 x 10 versión en miniatura de una mayor imagen de 250 x 250, y en lugar de obligar al usuario a descargar dos archivos separados, utilice marcadores para cambiar el tamaño de la versión en miniatura. Esto tiene sentido si el tamaño de la imagen real coincide con al menos uno - el más grande - una de las instancias en la página, en este caso 250 x 250 píxeles. Sin embargo, si usted sirve una imagen que es más grande que las dimensiones utilizadas en todos los casos de marcado, usted está enviando bytes innecesarios sobre el alambre. Usted debe usar un editor de imágenes para reducir las imágenes para que coincida con el mayor tamaño necesario en su página, y asegúrese de que especifique las dimensiones de la página también.

Volver arriba

Servir los recursos desde una dirección URL en consonancia

Información general

Es importante para servir a un recurso de una URL única, para eliminar bytes duplicados de descarga y RTT adicionales.

Detalles

A veces es necesario hacer referencia al mismo recurso en varios lugares en una página - las imágenes son un ejemplo típico. Aún más probable es que comparten los mismos recursos a través de varias páginas en un sitio como. Css y. Js. Si sus páginas no deben incluir el mismo recurso, el recurso debe ser siempre sirve a partir de una URL consistente. Asegurarse de que un recurso siempre se le asigna una dirección URL única tiene una serie de beneficios. Reduce el tamaño de carga en general, ya que el navegador no es necesario descargar copias adicionales de los mismos bytes. Además, la mayoría de los navegadores no emitirá más de una solicitud HTTP para una única dirección URL en una sola sesión, si el recurso es cacheable, por lo que también ahorran adicionales de ida y vuelta de los tiempos. Es especialmente importante asegurarse de que el mismo recurso no se sirve a partir de un nombre de equipo diferente, para evitar la penalización en el rendimiento de las búsquedas de DNS adicionales.

Tenga en cuenta que una dirección URL relativa y una dirección URL absoluta son consistentes si el nombre de host de los partidos de la dirección URL absoluta que el documento que contiene. Por ejemplo, si la página principal en las referencias de los recursos ingresan www.example.com / images / example.gif y www.example.com / images / example.gif, las direcciones URL son consistentes. Sin embargo, si esa página hace referencia o imágenes / example.gif y mysite.example.com / images / example.gif, estas URL no son consistentes.

Recomendaciones

Servir los recursos compartidos desde una dirección URL coherente en todas las páginas de un sitio.

Para los recursos que se comparten entre varias páginas, asegúrese de que cada referencia a un mismo recurso utiliza un URL idénticos. Si un recurso es compartido por varias páginas y sitios que enlazan el uno al otro, pero están alojados en diferentes dominios o nombres de host, que es mejor para servir al archivo de un nombre de host única de volver a servirlo en el nombre de host de cada documento de nivel superior. En este caso, los beneficios pueden ser mayores que el almacenamiento en caché de la sobrecarga de búsqueda de DNS. Por ejemplo, si tanto mysite.example.com yoursite.example.com y utilizar el mismo archivo JS, y enlaces a mysite.example.com yoursite.example.com (lo que requerirá una búsqueda de DNS de todos modos), tiene sentido sólo servir el archivo JS de mysite.example.com. De esta manera, el archivo es probable que sea ya en la memoria caché del navegador cuando el usuario va a yoursite.example.com.

Volver arriba