Como veo que han surgido unas cuantas dudas al respecto de como mejorar si o si la velocidad de carga voy a poner - más o menos - los cambios más significativos que he realizado:
Habilitar compresión / Especificar caché de navegador
Aquí es posiblemente donde nos vamos a entretener más, principalmente porque dependiendo de los modulos activos en nuestro servidor podremos o no emplear algunos para mejorar el tratamiento del cache.
Yo como soy hombre de campo y me gustan las cosas sencillas y no darle la razón a todo a Google en vez de emplear expires.c he usado headers.c, principalmente por costumbre:
Código:
#Compresión de archivos js,css,html y php en la entrega
<IfModule mod_deflate.c>
<filesMatch "\.(js|css|html|php)$">
SetOutputFilter DEFLATE
</filesMatch>
</IfModule>
#Especificar cache y tiempo por tipo de archivos
<IfModule mod_headers.c>
Header set Connection keep-alive
# Cache-control headers
# 2 HOURS
#<filesMatch "*">
Header set Cache-Control "max-age=7200, must-revalidate"
#</filesMatch>
# 480 weeks - 290304000
# 2 WEEKS
<filesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|swf|css)$">
Header set Cache-Control "max-age=1209600, public"
</filesMatch>
# 2 DAYS
<filesMatch "\.(xml|txt)$">
Header set Cache-Control "max-age=172800, public, must-revalidate"
</filesMatch>
# 2 HOURS
<filesMatch "\.(html|htm)$">
Header set Cache-Control "max-age=7200, must-revalidate"
</filesMatch>
<FilesMatch "\.(gif|jpg|png|ico|css|js|pdf|txt)$">
Header append Cache-Control "public"
</FilesMatch>
</IfModule>
Se puede mejorar mucho más el código, pero la verdad es que en mi caso particular no ha sido necesario darle muchas más vueltas.
2. Prioriza el contenido visible
En este punto es cuando nos adentramos en lo que realmente podemos considerar una optimización onsite o una auditoria WPO interna de los diferentes elementos que requiere nuestro sitio para cargar, maquetar y mostrar nuestros páginas.
En mi caso, he reducido considerablemente el número de JS empleados y de CSS, hasta donde he podido sin perder los nervios, principalmente porque el uso extendido de librerías comunes como jQuery o estilos como Bootstrap me obligan - que suerte - a tirar de CDN muy rápidos y divertidos.
No obstante, para mejorar notablemente los tiempos de carga y priorizar el contenido visible podemos hacer - en rasgos generales y sin analizar cada caso concreto - las siguientes actividades:
- Posponer entrega de CSS: Incluirlos al final de nuestro código, justo después del cierre de la etiqueta <HTML>
- Posponer carga de JS: Más de lo mismo que lo anterior
- Apunta a los archivos minificados CSS / JS: Cuando tenemos dependencias de librerias externas, enlazar la versión .MIN es una buen alternativa, en caso de que trabajemos con librerias locales (CSS / JS) MEJOR AÚN! Dado que tendremos la posibilidad de unificar todos los ficheros
- Retrasar la carga de imágenes: indispensable en mi caso de ejemplo. Hay plugins muy buenos que pueden solventarte el problema como LAZYLOAD.
Estas, obviamente, son las recomendaciones que nos hace Google... yo en lo particular si tengo archivos CSS grandes y vitales para la presentación de mis contenidos NO DUDO en colocarlos en el HEAD, principalmente porque demorar la entrega de este tipo de archivos si bien nos dará buenas puntuaciones en el PageSpeed de Google en cuestiones pertinentes a la presentación de los contenidos en pantalla puede causar problemas amén de que por norma general - en mis pruebas - en PINGDOM obtendremos mejores respuestas / tiempos de carga si los colocamos en el HEAD.
Así pues, que en vuestra mano lo dejo.
3. Optimizar imágenes
Si o si, este es uno de los elementos que yo personalmente he obviado totalmente. Por otro lado si vuestro sitio tiene imágenes estáticas y las mismas no sufren alteraciones os recomiendo que echéis un vistazo a esta herramienta online:
La verdad, hace maravillas a nivel de compresión y la perdida de calidad es de baja a nula completamente. En lo personal he llegado a comprimir imágenes grandes de más de 2 Mb en poco más de 35 / 40Kb casi sin apreciarse perdidas de calidad.
4. Minificar JS / CSS
Hay miles, pero miles de verdad, de servicios online que te permiten minificar al máximo tus archivos JS y CSS sin que los mismos dejen de funcionar, así que si no estás tirando ya de un servicio CDN ya estás tardando en hacer los deberes y comprimir lo máximo posible todos los ficheros CSS y JS que tengas.
Puede que una diferencia de 1Kb o 4Kb te parezcan absurdas para tu superconexión de FIBRA 300Mb, pero cuando andas por la calle con la cobertura por los suelos y quieres acceder a una página web, agradecerás que hayan hecho los deberes ¿verdad? pues nosotros no podemos ser menos.
Obviamente, para
minificar no necesitas NINGÚN PLUGIN!!!! Si no conoces las dependencias de tu sitio, la ubicación de todas sus hojas de estilos y para terminar de redondearlo trabajas con WORDPRESS... pues si, ale... tira y bájate WP MINIFY y ponte a configurarlo como Dios manda! En caso contrario, te recomiendo que lo hagas con tus propias manos
tardarás más, pero no tendrás dependencias externas y/o no cargarás un nuevo JS para mejorar los existentes.
5. Unificar JS / CSS
El sentido común llama a nuestras puertas cuando en todas nuestras páginas cargamos siempre las mismas 5 hojas de estilos y los mismos 3 archivos JS, digo que llama a nuestras puertas porque sería de sentido común convertir esos 5 archivos CSS en un único archivo y esos 3 archivos JS en uno único ¿verdad?
¿Parece una chorrada? Puede, pero en vez de realizar 8 peticiones al servidor solo hacemos 2, imagínate si se notará la diferencia cuando vayas andando por la calle con la cobertura por los suelos... bueno, ¡ya sabes!
6. Si no llegas a un 85 / 100 repasa todo de nuevo
Si tras poner en práctica estos 5 puntos de optimización no llegas a tener mediciones de entorno al 85 / 100 en cualquier escenario, toca mirar muy detenidamente que ha pasado con nuestro sentido común, pues seguramente alguna cosa se nos habrá escapado.
Errores que pasan desapercibidos:
- Tiempo de respuesta del servidor: analiza si tu página esta cargando más cosas de las estrictamente necesarias y si las mismas están realmente optimizadas al 100%
- Librerias JS y CSS enlazadas de forma incorrecta: más de lo comentado anteriormente, si por ejemplo usas jquery, fijo, pero de verdad, que el servicio CDN donde estas enlazando esa librería también tiene la versión minificada y con los CSS pasa exactamente lo mismo
- Tu servidor no da para más: también es posible, para que nos vamos a engañar, pero por muy malo que sea el servidor si haces bien los deberes tu página o carga en milisegundos o en menos de 3 segundos... Si no es ese el caso, toca mirar un nuevo alojamiento
- Aléjate de Wordpress: esta mañana temprano he terminado de efectuar una auditoria de WPO a un portal basado en este CMS con ni más ni menos que 59 peticiones ha archivos JS... En serio, de verdad, no es broma... OLVIDATE DE ESE CMS!!!
Poco más que añadir... si eres de los que han caído en las fauces del CMS preferido por los SEOs (o sea, WP xD) no dudes en plantearse seriamente si un desarrollo personalizado podría cubrir tus necesidades, porque con total seguridad la inversión que efectúes te quitará muchos quebraderos de cabeza.
Saludos