Hola gente, hace tiempo que no publico, así que hoy les dejo unas modificaciones para mejorar la carga de sus webs. Probé varios codigos y finalmente los que mejor resultado me dieron son los que voy a poner a continuación, espero que les de el mismo resultado que a mi.
La herramienta con la que comprobaremos las modificaciones es Google Pagespeed. Es una herramiento de google en la que nos da varios consejos para mejorar la carga de una web y así ya que va muy de la mano también el posicionamiento.
Usar cache de navegadores
Una de las mejoras que propone en mi caso y como » mejora a realizar » es usar del cache de los navegadores indicando el tiempo que lo deben de almacenar. En mi caso, despues de probar varios códigos me quede con este:
En .htacces en la raiz de su web al final agregar:
Header unset Pragma FileETag None Header unset ETag # 1 YEAR <FilesMatch ".(ico|pdf|flv|jpg|JPG|jpeg|png|gif|swf|mp3|mp4)$"> Header set Cache-Control "public" Header set Expires "Thu, 15 Apr 2010 20:00:00 GMT" Header unset Last-Modified </FilesMatch> # 2 HOURS <FilesMatch ".(html|htm|xml|txt|xsl)$"> Header set Cache-Control "max-age=7200, must-revalidate" </FilesMatch> # CACHED FOREVER # MOD_REWRITE TO RENAME EVERY CHANGE <FilesMatch ".(js|css)$"> Header set Cache-Control "public" Header set Expires "Thu, 15 Apr 2010 20:00:00 GMT" Header unset Last-Modified </FilesMatch>
Esta bastante detallado en el código así que creo que no hace falta explicarlo.
Carga asincrona de los archivos javascript
La segunda mejora y como » mejoras que nos podemos plantear » según google, es la carga asincrona de los archivos javascript. El proceso habitual del navegador cuando entra a la web es: Primero descargar los archivos js y css y luego el codigo html que es el que muestra la web. Con este cambio los archivos .js se descargarán simultaneamente al resto del archivos, por lo que también se mejora la carga.
Para realizar este cambio debemos ir a nuestro head /head y en donde incrustamos los archivos javascript debemos agregarles la palabra async del siguiente modo:
Este es el codigo que ordena cargar un archivo .js
<script src="{$tsConfig.js}/acciones.js" type="text/javascript"></script>
y debe quedar asi:
<script async src="{$tsConfig.js}/acciones.js" type="text/javascript"></script>
o así:
<script async type="text/javascript" src="{$tsConfig.js}/acciones.js"></script>
El orden de los factores no altera el producto.
Tenemos también otras opciones que es que cargue los javascript a posterior del resto del contenido cambiando async por defer eso ya probais cual os anda mejor.
Por ejemplo:
<script defer type="text/javascript" src="{$tsConfig.js}/acciones.js"></script>
Lamentablemente cargar los javascript de forma asincronica no siempre se puede hacer, ya que en muchos casos como en el mio que actualmente estoy usando Phpost RIsus es necesario cargar antes los archivos .js. Creo que pasa algo similar con Templates Responsive para otras plataformas como wordpress también, como es lógico es necesario cargar antes los archivos js que son los que le dan su forma dinámica. Así que ojo con esto porque pueden dejar de funcionar partes de vuestras webs.
Unificación de los archivos css
Otra mejora que se nota bastante es la unificación de los archivos .css. Esto todavía no lo llegue a implantar como definitivo en mi sitio pero si estube haciendo algunas pruebas con la herramienta de test de carga http://tools.pingdom.com/fpt/ que nos indica cuanto tiempo tarda en descargarse, tiempo de espera del servidor, ect, de cada archivo. Dependiendo del tiempo de respuesta de servidor puede ser una mejora importante. Cuando el navegador solicita la descarga del archivo css el servidor tiene un tiempo de respuesta, dependiendo de varios factores como por ejemplo si en ese momento el servidor esta muy saturado. En mi caso tengo actualmente tengo como 4 o 5 archivos css que se cargan siempre. Si por cada solicitud mi servidor tiene un tiempo de respuesta de 132ms (que es lo que tenia ayer) suman un total de 660ms. Poco más de medio segundo que se podria dejar en solo 132ms con un solo archivo. En este caso mejoraríamos medio segundo la velocidad de carga del sitio. ¿Facil no?
OJO, esto de debe hacer solo con los css del header principal, es decir, los css que se cargan siempre en todas las páginas.
Compresión de archivos con gzip y DEFLATE
Otro método que podemos realizar es la compresión de archivos. El hosting puede tener o no la opción de gzip habilitada (depende de vuestro servidor). En este caso cuando el navegador solicita los archivos, el servidor automaticamente se los envia comprimidos para mejorar la velocidad. El que mejor resultado me ha dado es el siguiente, pero hay otros sistemas de compresión y teneis que saber cual esta usando vuestro servidor.
En .htacces al final agregamos:
# compress text, HTML, JavaScript, CSS, and XML AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/x-javascript # remove browser bugs BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4.0[678] no-gzip BrowserMatch bMSIE !no-gzip !gzip-only-text/html Header append Vary User-Agent
Minificar JavaScript y CSS
Otra mejora es la optimización de los archivos css y js por ejemplo en un codigo css así:
.codigo a {
background: url(to-up/register.png);
display: block;
width: 143px;
height: 45px;
}
Se dejan muchos espacios en blanco que en archivos grandes se puede reducir su tamaño yo diaría hasta un 20%. La mejor forma para tener este codigo sería así:
.codigo a{background:url(to-up/register.png);display:block;width:143px;height:45px}
No hace falta ser muy listo para ver la diferencia, de 6 lineas pasamos a media. Existen herramientas para realizar esto. En una breve busqueda para los archivos css encontré http://cssminifier.com/ pero seguro existen otras y también para archivos .js. Aunque es tediosa la tarea de trabajar con archivos tan comprimidos solo hace falta un poco de organización, tener los archivos de trabajo en tu pc y a la hora de subirlos comprimirlos antes con estas herramientas, pero recordar no eliminarlos, sinooo uff no me quiero imaginar trabajar con los archivos así. Este paso, tampoco lo realice aún. Pero me planteo realizarlo en todos los css del cms.
Con estos sencillos pasos yo mejore para google de 67 sobre 100 a 82 sobre 100 mi sitio web sin realizar algunos de los cambios en todos los archivos que debería y mejoré el tiempo de carga en algo más de 1 seg.
Espero que os sirva de utilidad este aporte. Un saludo