Técnicas de Optimización de Código
-
Upload
david-manning -
Category
Documents
-
view
41 -
download
2
description
Transcript of Técnicas de Optimización de Código
-1-Critical Cloud & Hosting
Técnicas de Optimización de Código
Más de 15 años de experiencia administrando aplicaciones críticas
-2-Critical Cloud & Hosting
Innovación tecnológica Enfoque personal Soporte activo
Especialistas en Virtualización y Cloud Computing. Habilitamos y gestionamos las TIC de tu empresa, adaptando la solución a tu negocio y te acompañamos personalmente durante el ciclo de vida del servicio.
Sep 2012Lanzamiento Cloud Manager (desarrollo propio)
Feb 2012Actualización modalidades Cloud (Hosting, OnDemand, Pool)
Nov 2011Lanzamiento Cloud
Elastic (Orquestador)
Jun 2011Renovación marca (apuesta clara hacia Cloud)
2010Diseño e
implantación de Nexica Cloud
1996
2008Inauguración CPD
Actual (BCN)
Ago 2012Adjudicación contrato
externalización Cloud de la Generalitat de Cataluña
May 2013Lanzamiento BackUp
OnDemand
-3-Critical Cloud & Hosting
Mejorar la productividad
Mejor gestión financiera• Disminución de los costes de adquisición de
infraestructura (OPEX vs CAPEX) • Control del sobredimensionamiento de recursos• Facturación adaptada al consumo.• Acceso a recursos compartidos con economías
de escala.
• Expertos en tecnologías de cloud• Acceso a tecnología de primer nivel
perfectamente integrada y probada• Adaptación continua al cambio tecnológico:
o Innovación tecnológicao Seguridado Procesos
• Canalizamos tus actividades y tareas TIC no estratégicas:
o Gestión de activos TICo Adquisición de conocimiento de nuevas
tecnologíaso Gestión de la complejidad tecnológicao Procesos repetitivos
• Te ayudamos a mantener un ritmo de despliegue de tus TIC según las necesidades del negocio:
o Plataformas de test/conceptoo Rápida adaptación al crecimiento o
decrecimiento departamental.o Servicios disponibles en minutos.
Reducir el riesgo de obsolescencia tecnológica
¿En qué podemos ayudarte?
-4-Critical Cloud & Hosting
• Capacidad de adaptación• Potencia• Arquitectura• Modelo facturación (Cuota fija / Consumo)
• Rapidez de despliegue• OPEX vs CAPEX• Sin compromiso de permanencia
Desde un servidor, hasta una arquitectura de múltiples capas
• Cloud Hosting• Cloud On Demand• Cloud elements:
o Panel online (Cloud Manager)
o Redes y direccionamiento
o Balanceo y aceleración
o Storage o BackUpo Seguridado Elasticidado Conectividad
Nexica Cloud
Nuestros servicios
• Proyectos de virtualización• Clouds Privados• Clouds Híbridos• SaaS Cloud Manager
Cloud Expertise
Complements
• Control del entorno• Aceleración en la implantación
tecnológica• Ejecución experta y metodología
probada
Experiencia Cloud a disposición del cliente
• Email, Pruebas de Stress, Seguridad, Firewall de aplicaciones, etc.
Aplicaciones y servicios 100% gestionados
-5-Critical Cloud & Hosting
• Datacenter eficiente• CPD propio en edificio Carrier House BCN (225 m2). Características Tier3.• CPD en Interxion MAD. Enlace directo con CPD Principal. Características Tier4.• Alta eficiencia energética. PUE 1,4.• Homologación APC “Blade Ready”.• Sistemas gestionados globalmente (tecnología InfraStruXure de APC).• Seguridad y cumplimiento normativo.
• La mejor conectividad• Emplazamiento con la mejor conectividad de Barcelona.
Conectividad BGP4 a Internet.• Miembros de CATNIX y ESPANIX.• Direccionamiento dual-stack IPv4 e IPv6.
Centro de datos propio
Innovación tecnológica Enfoque personal Soporte activo
CPD PropioAlta eficiencia energética con la mejor conectividad y seguridad
-6-Critical Cloud & Hosting
VirtualizaciónPrincipal proveedor mundial de software de virtualización disponible para ordenadores compatibles
Computación y comunicaciones Comunicaciones y Arquitecturas de Virtualización CISCO. La calidad en comunicaciones también en nuestra infraestructura de virtualización.
StorageDesarrolladora de hardware, software y servicios profesionales
Cloud diseñado siempre con la mejor tecnología
• Nexica Cloud
Aceleración y balanceoAceleración para aplicaciones. Monitoriza, controla y optimiza el tráfico de usuario final, gestionando su enrutamiento y priorización.
BackUp & RecoverySolución sin agente de BackUp y recuperación de Máquinas Virtuales.
• Otros fabricantes del entorno de la solución Cloud
SeguridadSistemas perfectamente integrados en el entorno Cloud, para garantizar la seguridad de los diferentes elementos de servicio.
Especialización Cloud
Innovación tecnológica Enfoque personal Soporte activo
-7-Critical Cloud & Hosting
• Cloud Manager
• Acceso autenticado.• Gestión basada en roles.• Monitorización de
servidores.• Reinicios de servidores.• Control del consumo.• Administración de la
elasticidad.• Planificación automática de
eventos.
• Integrable sobre Cloud Privado.
Desarrollos propios
Innovación tecnológica Enfoque personal Soporte activo
Panel Cloud de desarrollo interno definido desde la base de clientes
-8-Critical Cloud & Hosting
• Te ayudamos en el diseño de la solucióno Tecnología baseo Capacidado Arquitecturao Modelo de servicioo Procesos de gestión
• Catálogo mixto de servicioso Cloud Público → Enfoque modular y adaptableo Cloud Expertise → 100% personal
• Consultoría postventao Optimización del código o Rediseño del servicio
Ingeniería de Sistemas
Ingeniería de Software
Ingeniería de Red
Ingeniería de Preventa
Soporte N1, N2
Cercanía
Innovación tecnológica Enfoque personal Soporte activo
Adaptación del servicio al negocio
-9-Critical Cloud & Hosting
Gente de acción
Más del 75% del personal está especializado en gestión TI.
Más del 40% está certificado.
Personas atendiendo personas. Conocimiento 100% integrado en la cadena de valor.
o Ingeniería de SWo Ingeniería de Redeso Arquitectos e Ingenieros de Sistemas
Flexibilidad
Innovación tecnológica Enfoque personal Soporte activo
Personas capaces, transmitiendo valores
Solventes EntusiastasMetódicosSolucionadoresOptimistas
-10-Critical Cloud & Hosting
• Esquema habitual de soporteOrientado a procedimiento y automatización
• Soporte ActivoPensado para generar implicación
o Orientados a “soltar el ticket”.o Atención subcontratada en algunos casos.o Interlocución con cliente poco especializada (Nivel1)
Ingeniería de Sistemas
Ingeniería de Software
Ingeniería de Red
CLIENTE
Soporte N2 Área comercialSoporte N1-coordinación y priorización-
o Interlocución con cliente de Nivel 1 o Nivel 2o N1 de mayor cualificación técnica.o Atención con personal propio.o Orientación a respuesta (ticket en 1er nivel)
Diseñado para tu tranquilidad
Innovación tecnológica Enfoque personal Soporte activo
Modelamos nuestro soporte para buscar soluciones
Ingeniería de Sistemas
Ingeniería de Software
Ingeniería de Red
Soporte N1
Soporte N2
Soporte N3
CLIENTE
-11-Critical Cloud & Hosting
• El servicio de atención al cliente propio resuelve el 70% de las incidencias en el primer nivel de soporte (N1).
• La satisfacción con nuestro servicio de gestión y soporte es de un 9,1 sobre 10.
• El 95% de las empresas valoradas con NiceReply se encuentran por debajo de la valoración recibida por nexica.
1
2
3
ACTITUD: enfocada a escuchar y buscar una solución de forma eficiente.
RESPUESTA: ante cualquier solicitud relacionada con los servicios.
COBERTURA: cualquier servicio bajo el paraguas de soporte activo
Diseñado para tu tranquilidad
Innovación tecnológica Enfoque personal Soporte activo
Nuestros clientes valoran nuestro soporte
-12-Critical Cloud & Hosting
Más referencias
-13-Critical Cloud & Hosting
Técnicas de Optimización de Código
-14-Critical Cloud & Hosting
Optimización de Código
Perseguimos mejorar el tiempo de respuesta
• Mejorar la percepción y experiencia de usuario• Mejora en el posicionamiento• Mayor número de páginas por segundo (ads / ventas)• Optimizar el ancho de banda consumido (menor transferencia)• Optimizar el consumo de recursos (reducir plataforma)• Reducción del consumo energético
-15-Critical Cloud & Hosting
(Fecha)
¿Qué afecta a la velocidad de carga de una página web?
-16-Critical Cloud & Hosting
Velocidad de una página web
Código
Código que se envía al cliente:• HTML• JavaScript• CSS
Código que genera el código que se envía al cliente:• PHP, Java (Servlets, JSP, JSF), .NET• Librerías, APIs, Frameworks• SQL• …
-17-Critical Cloud & Hosting
Velocidad de una página web
Medios
• Imágenes• Sonido• Video• Documentos• Otros
Metadatos
• Cabeceras HTTP• Cookies
-18-Critical Cloud & Hosting
Infraestructura
• Arquitectura de Servidores• Balanceadores• Elasticidad• Elementos de Cacheo estático y dinámico• Hardware• Software y su parametrización
Velocidad de acceso
• No podemos controlar la velocidad de acceso• Sí podemos tomar decisiones en función del tipo de conexión
Velocidad de una página web
-19-Critical Cloud & Hosting
Interpretación y Renderizado
• Navegador (y versión)• Dispositivo
• Ordenador• Móvil• Tablets, Consolas, Televisores….
• Podemos tomar decisiones en función de estos parámetros
Velocidad de una página web
-20-Critical Cloud & Hosting
¿Qué vamos a ver en este seminario?
Web Performance Optimization (WPO)
• Conjunto de “Best Practices” relativas al rendimiento web• Basadas en reglas• Herramientas
• Desde el punto de vista del cliente• Medida: Tiempo de carga de la página (W3C, Navigation Timing)• Sobre cualquier elemento que afecte al rendimiento
-21-Critical Cloud & Hosting
Web Performance Best Practices
Categorías
• Optimización del Cacheo• Minimizar el número de peticiones / respuestas• Minimizar el tamaño de las peticiones• Minimizar el tamaño de las respuestas• Optimizar el renderizado
-22-Critical Cloud & Hosting
Optimización del Cacheo
-23-Critical Cloud & Hosting
Optimización del Cacheo
Elementos de las páginas web que cambian con poca frecuencia pueden ser cacheados para evitar solicitarlos y descargarlos en cada petición.
- Principalmente: - HTML- CSS- JavaScript- Imágenes
- Pero también:- Medios- Flash- …
Introducción
-24-Critical Cloud & Hosting
Optimización del Cacheo
Cacheando estos contenidos se reduce:
- Número de peticiones- Volumen de descarga (reducción de costes)
Podemos cachear en:
- Navegador- Proxy Caché- Content Delivery Network (CDN)
Introducción
-25-Critical Cloud & Hosting
Optimización del Cacheo
Podemos configurar nuestro servidor web para incluir cabeceras de cacheo al servir nuestros contenidos.
HTTP/1.1 ofrece las siguientes cabeceras:
- Expires y Cache-Control: max-age Fecha de expiración del recurso y tiempo máximo de almacenaje en caché.- Last-Modified y Etag Fecha de modificación del recurso y UID (inode-size-timestamp)
En principio deberíamos utilizar sólo un mecanismo de cada par, puesto que son redundantes.
Cacheo en Navegador
-26-Critical Cloud & Hosting
Optimización del Cacheo
Ejemplo de cabecera devuelta por el servidor:
HTTP/1.1 200 OK Last-Modified: Tue, 22 May 2012 02:02:15 GMT ETag: "10c24bc-4ab-457e1c1f" Content-Length: 12195
En la siguiente petición al mismo recurso, se envía esta información en la cabecera HTTP:
GET /img/logo.png HTTP/1.1 Host: www.nexica.com If-Modified-Since: Tue, 22 May 2012 02:02:15 GMT If-None-Match: "10c24bc-4ab-457e1c1f“
HTTP/1.1 304 Not Modified
Cacheo en Navegador
-27-Critical Cloud & Hosting
Optimización del Cacheo
Si tenemos la necesidad de forzar la recarga de un recurso antes de la fecha que especificamos, podemos cambiar su URL o parte de ella. (URL fingerprinting)
Cacheo en Navegador
-28-Critical Cloud & Hosting
Optimización del Cacheo
Existen otras consideraciones a tener en cuenta en función del navegador o dispositivo:
- En función de la implementación, puede que el navegador decida borrar elementos de la caché antes de su fecha de expiración, normalmente los menos utilizados.
- En Firefox, la URL del recurso ha de variar en como mínimo 8 caracteres para evitar colisiones en el algoritmo de hasheo de recursos.
- Firefox sólo cachea contenido servido bajo HTTPS si existe la cabecera Cache Control: public
- Los dispositivos móviles, por espacio, suelen no cachear elementos que superen un determinado tamaño.
Cacheo en Navegador
-29-Critical Cloud & Hosting
Optimización del Cacheo
Cacheo en Navegador - Móviles
-30-Critical Cloud & Hosting
Optimización del Cacheo
Podemos indicar que un recurso sea cacheable en los proxies a través de la cabecera HTTP Cache Control: public
Recomendaciones:No incluir parámetros en la URL de acceso al recurso que queremos cachear, ya que ciertos proxies no cachearán este recurso independientemente del valor de la cabecera Cache Control.
<img src=“http://www.nexica.com/images/logo.png?v=1” />
No cachear recursos que generen cookies (Cache Control: private), o mejor aún, utilizar un dominio sin cookies para servir contenidos que queramos cachear.
Cacheo en Proxy
-31-Critical Cloud & Hosting
Optimización del Cacheo
Servidores de contenido estático distribuidos geográficamente que sirven el contenido desde el servidor más cercano de la CDN.
El contenido que se quiere servir desde la CDN es accedido a través de un subdominio del estilo static.example.com , que resuelve a una IP diferente en función de la localización del cliente.
Recomendado para grandes sitios con acceso internacional.
Favorece el Domain Sharding.
Content Delivery Network (CDN)
-32-Critical Cloud & Hosting
Optimización del Cacheo
En función de la implementación, los navegadores están limitados a cierto número de conexiones simultaneas por dominio. Por ejemplo 2 en IE7.
Esto provoca la serialización de peticiones HTTP a una página.
www.example.com/resource1www.example.com/resource2www.example.com/resource3www.example.com/resource4www.example.com/resource5www.example.com/resource6
Mediante la técnica de Domain Sharding podemos aumentar el número de conexiones simultaneas desde un navegador a nuestra web.
Domain Sharding
-33-Critical Cloud & Hosting
Optimización del Cacheo
www.example.com/resource1www.example.com/resource2ww1.example.com/resource3ww1.example.com/resource4static.example.com/resource5 (CDN)static.example.com/resource6 (CDN)
- Aumenta el tiempo de resolución de DNS.- Puede tener implicaciones en el SEO de nuestro sitio si no limitamos la
indexación de contenidos a un único dominio. Contenidos duplicados.- Si servimos contenidos bajo HTTPS, debemos securizar cada uno de los
subdominios adecuadamente.
Domain Sharding
-34-Critical Cloud & Hosting
Minimizar el número de Peticiones / Repuestas
-35-Critical Cloud & Hosting
Minimizar Peticiones / Respuestas
El número de peticiones necesario para descargar todos los recursos de una página afecta directamente al tiempo de carga de la misma.
Minimizar el número de Peticiones / Respuestas
Introducción (1)
¿Qué podemos hacer para reducir el número de peticiones y el tiempo de establecimiento de las mismas?
-36-Critical Cloud & Hosting
Introducción (2)
- Combinar ficheros JavaScript- Combinar ficheros CSS- Combinar imágenes usando CSS Sprites- Reducir el número de resoluciones de DNS- Reducir el número de redirecciones- Eliminar peticiones que acaban en 404- Eliminar imágenes sin src- Optimizar el orden de CSS y JS- Evitar document.write y @import- Cargar recursos de forma asíncrona- Paralelizar descargas- Cachear llamadas AJAX
Minimizar Peticiones / Respuestas
-37-Critical Cloud & Hosting
Combinar ficheros JSSi combinamos varios ficheros JS en una, sólo es necesario realizar una conexión para descargar todo el código incluido en dichos ficheros.
¿Es buena idea combinar todo el código JavaScript de una aplicación en un único fichero?
Idealmente sólo deberíamos descargar el código necesario para el contenido que estamos visualizando.
Minimizar Peticiones / Respuestas
-38-Critical Cloud & Hosting
Combinar ficheros JSRecomendaciones:
- Crear dos ficheros JS: Uno que tenga el código mínimo necesario para la renderización inicial de la página y otro con el código que no necesitaremos hasta una vez la página haya cargado.
- Incluir el menor número posible de ficheros JS en el <head>- Minimizar el tamaño de estos ficheros.- Si tenemos código correspondiente a páginas con pocas visitas, dedicarles un fichero
propio y descargarlo sólo cuando un usuario acceda a dicho contenido.- Si sólo hemos de incluir pequeños trozos de código, evaluar la posibilidad de
incrustarlo en el propio HTML.- Evitar el uso de document.write, ya que impide la descarga asíncrona- Posicionar correctamente la carga de JS en el código para maximizar las descargas en
paralelo.
Minimizar Peticiones / Respuestas
-39-Critical Cloud & Hosting
Combinar ficheros CSSEl caso de los ficheros CSS es similar al de los JS y por lo tanto también las recomendaciones en este aspecto.
Recomendaciones:
- Crear dos ficheros CSS: Uno que tenga los estilos necesarios para la renderización inicial de la página y con los estilos que no necesitaremos hasta una vez la página haya cargado.
- Servir el CSS de contenidos con pocas visitas en un fichero independiente.- Evaluar la posibilidad de incrustar el CSS en el propio HTML.- Evitar el uso de @import- Posicionar correctamente la carga de los CSS respecto a los JS en el código para
maximizar las descargas en paralelo.
Minimizar Peticiones / Respuestas
-40-Critical Cloud & Hosting
Optimizar el orden de CSS y JSDado que el contenido de ficheros JS puede alterar el contenido y disposición de elementos en la página, el navegador bloquea el renderizado, e incluso la descarga, del contenido que sigue a un script hasta que éste se ha descargado, parseado y ejecutado.
<head><link rel="stylesheet" type="text/css" href="stylesheet1.css" /><script type="text/javascript" src="scriptfile1.js" /><script type="text/javascript" src="scriptfile2.js" /><link rel="stylesheet" type="text/css" href="stylesheet2.css" /><link rel="stylesheet" type="text/css" href="stylesheet3.css" /></head>
Minimizar Peticiones / Respuestas
-41-Critical Cloud & Hosting
Optimizar el orden de CSS y JSEn cambio, si comienza a descargarse un JS cuando ya hay otros recursos en descarga, éste se descarga en paralelo.
<head><link rel="stylesheet" type="text/css" href="stylesheet1.css" /><link rel="stylesheet" type="text/css" href="stylesheet2.css" /><link rel="stylesheet" type="text/css" href="stylesheet3.css" /><script type="text/javascript" src="scriptfile1.js" /><script type="text/javascript" src="scriptfile2.js" /></head>
Minimizar Peticiones / Respuestas
-42-Critical Cloud & Hosting
Optimizar el orden de CSS y JSPor lo general deberíamos cargar los CSS lo antes posible (<head>) y los JS al final y si es posible, de forma asíncrona.
async y defer
Gracias a estos “hints” podemos indicar al navegador cómo queremos que se comporte ante los ficheros JS:
- async == true: El Script se ejecuta de forma asíncrona tan pronto como está disponible.
- async == false, defer == true: El script se ejecuta cuando la página se ha acabado de parsear.
- async == defer == false: El script se ejecuta de forma inmediata, antes de continuar parseando la página.
Minimizar Peticiones / Respuestas
-43-Critical Cloud & Hosting
Optimizar el orden de CSS y JSPodemos usar defer, por ejemplo, sobre un código JS que se encargue de cargar otros fichero JS que no son necesarios en la carga inicial de la página.
<script type="text/javascript"> var element = document.createElement("script"); element.src = "moreJavaScriptCode.js"; document.body.appendChild(element); </script>
Minimizar Peticiones / Respuestas
-44-Critical Cloud & Hosting
Combinar imágenes usando CSS SpritesDe forma similar a los JS y CSS, descargar múltiples imágenes implica realizar muchas peticiones.
Una buena alternativa es combinar en una única imagen aquellas que suelan aparecer juntas con frecuencia y mostrarlas de forma individual usando CSS.
Recomendaciones:
- Utilizar formatos de imagen para iconos (GIF, PNG8)- Minimizar el espacio vacío entre imágenes- Evaluar la posibilidad de incrustar imágenes directamente en el HTML
<img src="data:image/gif;base64,”TEXTOBASE64” />
Minimizar Peticiones / Respuestas
-45-Critical Cloud & Hosting
Eliminar imágenes sin srcUna imagen sin src puede ocasionar diferentes problemas en función de la implementación en el navegador y la configuración del servidor:
- No devolver nada.- Devolver toda la página completa.- Devolver el listado de ficheros del servidor para la ruta actual.
Se genera un tráfico innecesario y en el peor de los casos pueden sobrescribirse cookies que impliquen pérdida de información.
Podemos encontrar imágenes sin src:
- Directamente en el código HTML: <img src=“”>- Como parte de un código JavaScript:
var img = new Image();img.src = “”;
Minimizar Peticiones / Respuestas
-46-Critical Cloud & Hosting
Minimizar el tamaño de las Peticiones
-47-Critical Cloud & Hosting
Minimizar tamaño Peticiones
Minimizar el tamaño de la PeticionesCada vez que nuestro navegador realiza una petición HTTP envía todas las cookies que tenga par dicho dominio y path.
Dado que muchos usuarios tienen conexiones asimétricas, la velocidad de subida es muy inferior a la de descarga.
En un ADSL de 10Mb/500Kb una petición de 20KB equivale a una descarga de 400KB.
Recomendaciones:
- Reducir el tamaño de las cookies al mínimo. (UID)- Servir el contenido estático desde un dominio sin cookies.- Si servimos el contenido desde un CDN, solicitar que sea sin cookies.- Aplicar correctamente la fecha de expiración de las cookies.- Intentar reducir la longitud de las URLs.
-48-Critical Cloud & Hosting
Reducir el tiempo de resolución DNSLa resolución de dominios que ha de realizar el navegador para transformar los dominios en direcciones IP implica un tiempo de consulta a los servidores DNS.
Aún teniendo en cuenta técnicas como el Domain Sharding, deberíamos intentar servir los contenidos de nuestra página desde el menor número posible de dominios.
Los navegadores más modernos implementan DNS Prefetching. Esta técnica consiste en resolver los dominios de los enlaces de la página actual de forma automática antes de que el usuario pulse sobre ellos.
Minimizar tamaño Peticiones
-49-Critical Cloud & Hosting
Minimizar el número de redireccionesLas redirecciones añaden latencia a las peticiones , ya que han de hacer la petición tanto a la URL antigua como a la redireccionada.
Es importante añadir cabeceras de expiración en la respuesta que acompaña a una redirección para que estas puedan ser cacheadas.
Una redirección muy frecuente ocurre cuando se especifican URLs que no terminan en ‘/’, que puede evitarse fácilmente configurando el servidor web para añadirlas automáticamente.
El peor de los casos es realizar la redirección por código, en lugar de cabeceras HTTP:
<script type="text/javascript">
window.location = "http://www.google.com/"
</script>
Minimizar tamaño Peticiones
-50-Critical Cloud & Hosting
Minimizar el tamaño de las Respuestas
-51-Critical Cloud & Hosting
Minimizar tamaño Respuestas
Minimizar el tamaño de las Respuestas
IntroducciónEl peso de los recursos que devuelve nuestra aplicación tiene un impacto directo en el tiempo que éstos tardan en descargarse y por lo tanto en el tiempo de respuesta de nuestra web.
Recomendaciones:
- Evitar comentarios o código muerto en el HTML, JS y CSS- Hacer que el código JavaScript y CSS sea cacheable externalizándolo- Minimizar el tamaño de los JS- Minimizar el tamaño de los CSS- Optimizar las imágenes
-52-Critical Cloud & Hosting
Activar la compresiónConfigurando nuestro servidor para comprimir ciertos recursos, podemos reducir drásticamente el tiempo de descarga de los mismos.
“Every day, more than 99 human years are wasted because of uncompressed content”
Comprimir / descomprimir consume cierto tiempo, pero suele ser menor que el ahorro conseguido por enviar la información comprimida.
Recomendaciones:
- La compresión ha de ser selectiva:- HTML, JS, CSS y Ficheros de texto (xml, txt, …)
- No conviene comprimir ficheros de imágenes ni binarios- Tampoco ficheros de menos de 150 bytes
Minimizar tamaño Respuestas
-53-Critical Cloud & Hosting
Minimizar el tamaño de los JSEliminando los caracteres innecesarios de los ficheros JS podemos reducir su tamaño y por lo tanto acelerar su descarga y tiempo de parseo:
- Espacios- Retornos de carro- Tabulaciones- Comentarios y código obsoleto o pruebas- Duplicidades
Esto es aplicable al propio HTML.
Programamos sobre una versión “normal” del código, pero la “condensamos” antes de publicarla.
Se ha estimado que la mejora es notable en ficheros JS a partir de 4KB.
Minimizar tamaño Respuestas
-54-Critical Cloud & Hosting
Minimizar el tamaño de los JSTambién es posible reemplazar el nombre de funciones o variables por literales más cortos:
function add(firstNumber, secondNumber) { var sum = firstNumber + secondNumber; return sum;} function add(a, b) { var c = a + b; return c; }
Lo cual añade cierto grado de ofuscación al código.
Minimizar tamaño Respuestas
-55-Critical Cloud & Hosting
Minimizar el tamaño de los CSSDe forma análoga a los JS, es posible reducir el tamaño de los CSS.
- Eliminado caracteres innecesarios- Eliminando comentarios- Eliminando estilos que no se utilizan- Usando la variante de colores en su notación más corta:
- Rojo:- #ff0000- #ff0- red
Minimizar tamaño Respuestas
-56-Critical Cloud & Hosting
Optimizar ImágenesEs importante seleccionar un formato adecuado en función del uso que daremos a la imagen.
- PNG suele dar mejores resultados que GIF para iconos y logos.- Utilizar JPG para fotografías.- Evitar el uso del formato BMP y TIFF a no ser que nuestra aplicación los requiera.
Es interesante realizar pruebas con los ratios de compresión de las imágenes, ya que se pueden conseguir grandes reducciones de peso con una pérdida de calidad a penas perceptible.
Minimizar tamaño Respuestas
-57-Critical Cloud & Hosting
Optimizar ImágenesRecomendaciones:
- Especificar siempre el height y width de las imágenes en el HTML o CSS.- No escalar imágenes por código. Es mejor servir un thumbnail y una imagen de
mayor resolución de forma asíncrona.- Servir una imagen siempre por la misma URL para maximizar el rendimiento de la
caché.
Es útil disponer de un favicon o como mínimo un favicon.ico vacío para evitar devolver códigos 404.
- Cacheable- Ligero- Susceptible de tener una fecha de expiración en caché elevada.
Minimizar tamaño Respuestas
-58-Critical Cloud & Hosting
Optimizar el Renderizado
-59-Critical Cloud & Hosting
Optimizar el Renderizado
Optimizar el RenderizadoUna vez los recursos han llegado al cliente, éste ha de interpretarlo y renderizarlo.
Hay una serie de pautas que nos pueden ayudar a optimizar esta parte del proceso:
- Evitar el uso de expresiones en CSS (Obsoletas IE5 -> IE7)- Poner el CSS en el <head>- Programación eficiente de JavaScript- Reducir el número de elementos de DOM- Reducir el número de iFrames- Especificar el alto y ancho de las imágenes- Especificar el ancho de las tablas- Generar HTML bien formado
-60-Critical Cloud & Hosting
-61-
c/ de l’Acer, 30-32. Barcelona902 20 22 [email protected]
¿Podemos ayudarte?Más de 15 años de experiencia
administrando aplicaciones críticas.