Optimización de la web de Foto DNG (parte IV)
CSS y JavaScript
En esta ocasión vamos a intentar optimizar el tamaño de los archivos externos de javascript y CSS, nuestro mayor cuello de botella es el javascript, que como vimos en el anterior post es el que mayor tamaño aporta a la página y el que más la ralentiza.
Vamos a intentar eliminar código innecesario, utilizar una herramienta para adelgazar nuestros archivos y posteriormente servirlos desde Google APP Engine ™ estableciendo una caché para dichos archivos (además de que GAP servirá los archivos comprimidos como gzip).
En primer lugar, después de analizar un poco los archivos servidos, vemos que todas las páginas requieren un javascript externo cuya única misión es redondear las esquinas inferiores de la página y redondear las esquinas de los formularios y la parte superior de las cajas de fotos y de los enlaces de descarga.
Después de mirar diversas opciones para redondear esquinas y no convencernos ninguna (aunque quizás la más óptima serían imágenes optimizadas para las esquinas redondeadas), hemos optado por una solución que sin ser la ideal nos ha convencido.
Hemos eliminado las esquinas redondeadas, pero mediante CSS los usuarios tanto de Firefox como de Safari, seguirán viéndolas y los usuarios de los demás navegadores también una vez establecido y soportado plenamente CSS3.
Con esto hemos eliminado los más de 25 Kb. cargados en cada página para crear dichas esquinas, manteniendo la apariencia igual para los usuarios de los navegadores mencionados. Según nuestras estadísticas de Google Analytics ™, estamos cubriendo únicamente al 44% de nuestros usuarios, aunque todos siguen teniendo la misma funcionalidad, creemos que la apariencia sigue siendo correcta y la velocidad de carga es superior.
La apariencia de por ejemplo la página del concurso de este año en tres navegadores con el soporte para los bordes redondeados y sin dicho soporte es la siguiente:
Internet Explorer:
Safari:
Firefox:
Pero como decíamos, el CSS necesario para redondear las esquinas es el siguiente:
-moz-border-radius: 1em; /* Para Firefox */
-webkit-border-radius: 1em; /* Para Safari */
border-radius: 1em; /* en CSS3 */
o si deseamos redondear solo alguna de las esquinas (por ejemplo la izquierda superior):
-moz-border-radius-topleft: 1em; /* Para Firefox */
-webkit-border-top-left-radius: 1em; /* Para Safari */
border-top-left-radius: 1em; /* en CSS3 */
Con esto evitamos que redondee las esquinas a posteriori una vez cargada la página (el efecto se ve al principio), evitamos carga al navegador y nos ahorramos mucho javascript. Repetimos que no es la solución idónea, pero nos ha convencido.
Antes tanto los javascript como,o los css, eran un archivo (en php) que mediante unos parámetros incluían un determinado código u otro. Ahora hemos modificado nuestros php para que incluyan js y css estáticos según la página de la que se trate, para una posterior ocasión dejo pendiente el optimizar el css para adelgazarlo, pues he incluido siempre el mismo (menos en la parte de administración).
Ahora copio el código css y lo pego en http://iceyboard.no-ip.org/projects/css_compressor para eliminar bytes, suprimiendo espacios, juntando algunas reglas, etc. y lo guardo como general_v1.css manteniendo el archivo original para futuras modificaciones (el que contiene indentaciones, comentarios, etc.).
Creo los diferentes archivos javascript según las funciones necesarias en cada página (posponiéndole al nombre _v1 que es la versión de nuestro archivo) y los comprimo con jsmin (http://crockford.com/javascript/jsmin) escribiendo en la consola:
jsmin archivo_v1.js
generando así los diferentes archivos js adelgazados.
Ahora sólo me queda subirlos a Google App Engine ™ y que GAP se ocupe de servirlos comprimidos con gzip y enviar las cabeceras oportunas para que se realice caché durante un mes de los archivos (por lo que los visitantes recurrentes no necesitarán volver a solicitar estos archivos).
Como podemos ver en la captura anterior de Yslow (http://developer.yahoo.com/yslow/) el javascript de la página principal ocupa 0.5K y 0.3K comprimido (305 bytes) y lleva una cabecera de caducidad de un mes.
Lo mismo ocurre con el css, aunque ahora la compresión gzip reduce el tamaño del archivo desde los 13.1K hasta 3.2K (3269 bytes).
Al posponerle a nuestros archivos las versión, forzamos al navegador a que si realizamos un cambio en los mismos (reflejado en el nombre de archivo), este evite la caché al tratarse de un archivo distinto y vuelva a solicitarlo. Para controlar dichas versiones, utilizamos una constante en nuestro archivo de configuración php que añadimos al nombre de archivo al solicitarlo.
Realizados estos cambios, sólo nos queda volver a probar la velocidad de carga de nuestra página utilizando la misma página que en la ocasión anterior http://tools.pingdom.com/fpt/
Hemos reducido el tiempo de carga desde los anteriores 1,6 segundos hasta los 0,8 segundos (hemos mejorado los tiempos en un 100% reduciéndolos hasta la mitad) y hemos pasado de un total de 65,9K a los actuales 57,5K.
Para un posterior post dejamos las optimizaciones del php, html resultante, caché del mismo y accesos a la Base de Datos, además de opciones de CDN’s para asegurar la alta disponibilidad de nuestra página y la mayor rapidez posible de la misma.
