High performance Web Sites
•Download as PPT, PDF•
1 like•807 views
Resumen de las 14 reglas para tener un alto rendimiento en sitios web
![[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],MOTIVACIÓN](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
Recommended
More Related Content
What's hot
What's hot (17)
Similar to High performance Web Sites
Similar to High performance Web Sites (20)
Recently uploaded
Recently uploaded (13)
High performance Web Sites
- 3. Regla 1: Reducir HTTP Requests
- 8. Regla 2: Content Delivery Network
- 10. Regla 3: Añadir Expires Header
- 12. Regla 4: Componentes Gzip
- 16. Regla 5: CSS en la cabecera
- 18. Regla 6: Scripts al final de la página
- 20. 2 descargas paralelas por host. 4 descargas paralelas por host. 8 descargas paralelas por host.
- 21. Utilizar CNAMEs (alias DNS) para dividir sus componentes en múltiples hostnames.
- 22. JavaScripts bloquean la descarga paralela.
- 23. http://stevesouders.com/hpws/move-scripts.php Diferencia de tiempo entre scripts en parte superior a la parte inferior. http://stevesouders.com/hpws/js-blocking.php Ejemplo de cómo el script bloquea las descargas de los componentes.
- 24. Regla 7: Evitar expresiones CSS
- 28. Ejemplo de CSS Expression. http://stevesouders.com/hpws/expression-counter.php Ejemplo de One-Time Expression. http://stevesouders.com/hpws/onetime-expressions.php
- 29. Regla 8: Hacer Javascript y CSS externos
- 33. POST-ONLOAD DOWNLOAD La home utiliza JavaScripts / CSS internos pero al cargarse esta. Con el evento OnLoad() descarga los archivos externos para las sucesivas páginas.
- 35. INTERNO / EXTERNO DINÁMICAMENTE
- 36. Ejemplo de Post-onload. http://stevesouders.com/hpws/post-onload.php Ejemplo de Dynamic Inlining . http://stevesouders.com/hpws/dynamic-inlining.php
- 37. Regla 9: Reducir búsquedas DNS
- 41. Reducir el número de hostnames incluidos en el site.
- 42. Regla 10: Minimizar JavaScripts y CSS
- 45. Resultados: reglas 6 - 10
- 46. Regla 11: Evitar redirecciones
- 51. Regla 12: Eliminar Scripts duplicados
- 55. Regla 13: Configurar ETags
- 60. ETag’s en el mundo real
- 61. Regla 14: Hacer el Ajax Cacheable
- 65. ¿Preguntas?
Editor's Notes
- - Moviendo los scripts al final permite una renderización progresiva y consigue una mayor ejecución de la descarga paralela.
- - Moviendo los scripts al final permite una renderización progresiva y consigue una mayor ejecución de la descarga paralela.
- El mayor impacto en el tiempo de respuesta viene dado por el número de componentes. Cada componente genera una HTTP request (cuando la cache está vacía o incluso cuando no está completamente llena).
- - En lugar de dejar en las manos del usuario que tenga que modificar el atributo network.http.max-persistent-connections-per-server del cliente navegador, es mejor que los ingenieros utilicen alias DNS. - Un estudio hecho para Yahoo! Muestra que si se utilizan más de dos alias el rendimiento es peor.
- Una razón es pq el script puede utilizar document.write para modificar la página. Por esta razón el navegador se espera a que la página esté compuesta adecuadamente. También para garantizar que los scripts se ejecuten en el orden correcto. Solución: ponerlos al final de la página.
- - La primera vez que se evalúa la expresión CSS, el javascript establece la propiedad explícitamente. De esta manera aunque se haga scroll o se mueva el ratón no se vuelve a evaluar.
- Evita la evaluación de la CSS expression durante eventos que no están relacionados. Interner Explorer no soporta la propiedad CSS min-width. Esta solución arregla el ancho de la página en el evento onresize.
- Las llamadas internas pueden ser más rápidas para ciertos casos ya que el estilo interno hace un http request por 3 (html, css, javascript) del externo. Pero si se cachea el css/js externos, el html será mucho más ligero y no habrá tantas http request.
- A menos archivos mejor. Un solo archivo hace solo una http request pero la primera vez que entra el usuario se descargará mucha información. Categorizar el site y hacer un archivo para cada categoría.
- - Casos en los que la home va a ser la primera página de muchas visitas a otras páginas. - Mezcla la interna con la externa. - La interna para la home y al cargar la home descarga los externos para posteriores páginas.
- Si el navegador supiera si un componente está en caché o no podría tomar la decisión de incluirlo interno o externo. Si está en caché sería externo sino sería interno. Esto lo hace inicializando la cookie en el estilo anterior. En el doOnload.
- time-to-live (TTL) Mientras el navegador tenga en caché lo que busca no va a preguntar al SO. Si el SO no puede satisfacer la petición del navegador, mandará una petición al servidor ISP, y aquí es donde se puede producir el aumento de tiempos. Por desgracia, las ips cambian, asi que hay que establacer una tiempo periódico donde se vacíe esta caché.
- El servidor devuelve junto con el registro DNS solicitido un TTL para esa petición, para indicar al cliente el periodo que la petición debe estar en caché. El sistema operativo toma este valor, pero el cada navegador establece sus propios TTL. Además de esto la propiedad Keep-Alive del protocolo HTTP puede sobre escribir los valores tanto del servidor como del navegador. Debido al alto número de usuarios de estos sites, estas compañías han decido poner unos TTL bajos para que en caso de fallo se redirija rápidamente a un servidor dns alternativo.
- IE: -Keep-Alive viene dado por el protocolo HTTP 1.0 donde se incluyó para poder realizar conexiones persistentes. Se puede indicar en el navegador o en el servidor. Tecnicamente en HTTP 1.1 Connection: Keep-Alive no es necesario. -ServerInfoTimeOut: indica que incluso sin el keep-alive, si el usuario hace una petición del mismo dns cada 2 minutos (sin ningún fallo en la petición), no hara falta de volver a enviar una dns lookup, incluso si has estado realizando peticiones cada 2 minutos durante más de 30 minutos tampoco hará falta. Esto es peligroso, pq si alguien actualiza su ip y el usuario sigue haciendo peticiones cada 2 minutos no refrescará al nuevo DNS. Firefox: -Al poner que la cache expire en un minuto incrementará el número de peticiones dns. -Poniendo solo 20 entradas en la cache perjudicará a los usuarios que hagan muchas visitas.
- Si la caché está vacía en el cliente, tendrá tantas peticiones DNS como hostnames tenga la web que solicita. Reducir el número de hostnames aumenta el número de descargas paralelas. Reducir las peticiones DNS reduce el tiempo de respuesta pero aumentando el número de descargas paralelas incrementa el tiempo.
- Es la práctica de eliminar caracteres innecesarios del código. Eliminar comentarios, espacios, nuevas líneas,tabs,etc. Al eliminar caracteres el peso de la descarga se reduce y por tanto el tiempo de descarga también.
- Problemas: - Al ser más complejo es más sensible a que se produzcan errores. - A veces elimina simbolos del javascript que deben permanecer. - Al ser más complejo es difícil de hacerle un debug.
- JSMin utiliza minimización y el Dojo Compressor ofuscación. Lo mejor es combinar la técnica de Gzip de la regla 4 y la minimización. Aplicar minimización a CSS es más fácil ya que no suelen llevar tantos comentarios ni espacios.