Introducción
Mi necesidad de mejorar la velocidad de carga de mi página de WordPress (esta página que estás visitando) surgió de la lamentable experiencia de usuario que pude observar y de los altos porcentajes de rebote que mes a mes media Google.
Indagando en Internet pude encontrar numerosos artículos donde se describían técnicas para mejorar la velocidad de carga para las páginas desarrolladas con Word Press org. La conclusión que saqué después de leer varios de estos artículos fue que este asunto no es nada sencillo tratado en profundidad, pero que no resulta tan complicado el realizar cambios e instalar algunos plugins que mejoran sustancialmente la experiencia de navegación que nuestros visitantes experimentan.
Yo no soy ningún experto sobre este asunto, pero voy a describir de la forma mas sencilla posible lo que yo hice. Si navegando por esta página no experimentas una velocidad de carga de las diferentes páginas y post aceptable, quizá deberías dejar de leer aquí…
Consejos Generales
En lo que coincidían casi todos los expertos en SEO, Diseño Web, y Desarrollo en WP era que la forma de mejorar la velocidad de carga de nuestras páginas es disminuyendo el tamaño de los ficheros que se cargan en el navegador desde nuestro servidor. Esto que parece una verdad de «perogrullo» tiene mas complejidad a la hora de llevarlo a la práctica de lo que os pueda parecer.
Parece lógico pensar que un post de solo texto se cargará con mayor velocidad que uno que incluya fotografias. Esto nos da la pista de que dependerá de nuestro tipo de página el que podamos obtener mejor velocidad de carga.
Luego el primer consejo es que el tamaño de datos que se transfieren en la carga de tu página no supere los 500Kb. Dicho tamaño es totalmente relativo y no una «frontera» fija que asegure mas velocidad por debajo, ni menos por encima. Pero puede servirnos de referencia,
Lo primero que yo cambie fue el fondo de la página. Cuantos menos bytes tenga mejor. Luego y en orden: mejor un color plano, un mosaico de patterns ligeros, o una textura o imagen lo menos «pesada» posible.
De igual forma reducir al máximo los comentarios, interlineados innecesarios en vuestros ficheros de estilo (CSS), JavaS, etc. Para esto me ayudé de unos de los plugins que veremos después.
Utilizar la menor cantidad de imágenes (fotos) posible, y en todo caso comprimir su tamaño y profundidad al máximo. En esto nos ayuda un plugin que después comentaré. Esto último es otro ejemplo de lo relativo de todas estas recomendaciones porque un Blog para un profesional de la fotografía no podrá reducir mucho por este lado si necesita de la máxima calidad para mostrar su trabajo.
Otro punto importante a la hora de reducir el tamaño es utilizar solo los plugins que de verdad necesitemos y que sean los menos posible. Por ejemplo, el plugin Jetpack de wordpress.com es un complemento muy bueno y que es muy utilizado. Sin embargo tiene el inconveniente de que incluye muchas funciones que en muchos casos no se utilizan y no pueden ser desactivadas de manera independiente, lo que sobre carga nuestro código, y por tanto relentiza la carga de nuestra página. También tenemos otro plugin que nos ayudará si estamos utilizando este complemento.
Yo quité unos cuantos plugins que realmente no necesitaba o podia sustituir con un poco de HTML y teclado…
Herramientas para evaluar nuestro sitio web
Existen una serie de herramientas que nos ayudan a determinar la velocidad nuestras webs, nos dan información sobre los elementos que merecen ser optimizados. Por ejemplo:
Todas se utilizan de una forma parecida: introducimos una URL y la aplicación realiza un análisis de los elementos que componen la web, ofreciendo a continuación una serie de resultados que debemos interpretar. Algunas de ellas incluso nos dan algunas recomendaciones para mejorar estos tiempos, destacando los elementos más problemáticos.
Por defecto, quedaos con la idea que mejor cuanto mas cerca este de 100 (en una escala numérica) y/o de la clase A (en una escala alfabética).
Sergio Redondo explica, por ejemplo, como interpretar los resultados en «PageSpeed» en este enlace.
Plugins
Yo he utilizado tres:
Se instalan de manera independiente. Puedes instalar cualquiera o todas. Se complementan y son compatibles entre si, pero son independientes en su funcionamiento sin ninguna interdependencia.
Jetpack Lite
Dicho por su creador, Samuel Aguilera:
Así que aprovechando las ventajas del software libre y la licencia GPL, me tomado la libertad de crear un fork al que he llamado Jetpack Lite y que sólo contiene el módulo de estadísticas y del enlaces cortos con WP.me. O dicho de otro modo las mismas funciones que estaban disponibles en WordPress.com Stats.
Eliminando el resto de funcionalidades, tanto el código relacionado con ellas como los archivos de las mismas. Así puedo seguir usando las estadísticas de WordPress.com (con la nueva interfaz que proporciona Jetpack) pero sin tener que ir desactivando módulos que no quiero usar en cada instalación de WordPress a la que le añado el Jetpack. Por lo demás, el resto de la extensión está intacta, no le he añadido ni quitado nada más (por lo que esta versión debería funcionarte igual de bien o mal que el Jetpack original).
Esto quiere decir que debes tener instalado Jetpack y añadir la instalación de Jetpack Lite. No hay nada que configurar, así que más fácil imposible.
También queda claro que si lo que utilizas de Jetpack es alguna de las funcionalidades que elimina Jetpack Lite, esta solución no te valdrá.
WP Smush.it
Fernando Tellado en Ayuda WordPress lo describe perfectamente:
Smush.it es un servicio gratuito de Yahoo de compresión “sin pérdida”. Smush.it usa técnicas de optimización específicas para imágenes que no cambian su aspecto o calidad visual. Si lo usas en la versión web lo que no recomienda es usar la imagen alojada “temporalmente” en Smush.it sino descargarla y usar la nueva, y optimizada, en lugar de la original.
Bueno, pues hechas las presentaciones, resulta que, como no, hay un plugin para WordPress que usa este genial servicio para reducir el tamaño, y en consecuencia los tiempos de carga, de nuestro sitio.
Esta pequeña maravilla (y van) se llama WP Smush.it y su uso es más que sencillo,tenemos 3 modos de utilizarlo una vez instalado y activo, a saber:
- Una vez activo el plugin procesa a través de Smush.it todas las imágenes que subamos, por lo que siempre usaremos una versión optimizada de las mismas. No hay que hacer nada, trabaja por nosotros el solito.
- Además, en la Librería Multimedia del Escritorio de WordPress podemos enviar manualmente a Smush.it cualquier imagen que hayamos subido previamente y, en consecuencia, no esté optimizada.
- Pero en la última versión se ha incorporado una herramienta de optimizado en masa, que encontrarás como submenú de la Librería Multimedia y llamado “Bulk Smush.it” que hace precisamente eso, procesar todas las imágenes de tu sitio para optimizarlas de un tirón. Por supuesto, si tienes muchas tardará lo suyo. Es una funcionalidad aún experimental, así que úsala con precaución.
Por si te surge la duda, este servicio no depende de si mañana le da por cerrar Smush.it a Yahoo pues lo que hace el plugin es procesar nuestras imágenes gracias a la API de Smush.it, descarga la versión nueva y sustituye la anterior.
En mis primeras pruebas ha reducido en porcentajes de más del 30% imágenes en png de tamaño mediano y más del 50% en imágenes de más resolución.
Creo que no hace falta que yo añada mas. Solo decir que funciona.
W3 Total Cache
Este es el plugin mas complejo de configurar y sin duda el que marca las diferencias de forma más radical. Es un plugin que permite realizar WPO (Web Performance Optimization) de manera más sencilla para el común de los mortales que no somos grandes expertos. Sin embargo ya os anticipo que no es fácil saber configurarlo, y que para muchas de sus opciones tendréis que utilizar el sistema de prueba y error para ver si en vuestro caso merece la pena o interesa activar ciertas funcionalidades.
Su principal función es almacenar en cache las páginas, objetos y consultas a la base de datos para dar una respuesta mas rápida cuando alguien busca tu sitio web. Además se integra a la perfección con servicios CDN (Content Distribution Networks) como CloudFront de Amazon y MaxCDN.
Ahora os dejo las imágenes con los «pantallazos» de como he dejado mi configuración. Podéis utilizar las herramientas de evaluación que os comenté antes para ir viendo como varian los resultados en vuestro caso según activéis o no las diferentes opciones.
Una vez instalado el plugin, en el menú de la izquierda del escritorio de WP os aparecerá una opción «Performance». Clickando en esa opción, el menú a la izquierda quedará de la siguiente forma:
Comenzamos y recorrerlo y a configurar.
General Settings
Opciones en Page Cache
Opciones en Minify
Opciones data Base Cache
Opciones de Object Cache
Opciones de Browser Cache
El resto se deja por defecto.
Y eso es todo lo que he aplicado (de momento) para mejorar la velocidad de carga de esta página.
Otras técnicas
Una forma de que tus visitantes no reboten a otros sitios si tu página tarda en cargar es hacer que la cabecera se cargue antes que el resto de la página. Se ha demostrado que si al acceder a una página aparece la cabecera, el visitante tiende a esperar la carga del resto de la página sin desistir en su intento.
Para conseguir esto, tienes que ir a la sección: “Apariencia > Editor” y ahí selecciona la Plantilla “Cabecera o Header” (header.php), ahí colocas el siguiente código entre las etiqueta y:
<!-- flush comienzo --> <?php flush(); ?> <!-- flush fin -->
No olvides presionar el botón: “Actualizar archivo”.
Otra técnica es Alojar las imágenes en un Subdominio.
Por defecto, un navegador tiene limitaciones sobre el total de elementos que puede descargar al mismo tiempo de una página (imágenes, hojas de estilo, etc.). De media, el máximo de descargas permitidas por los navegadores está sobre las 6 conexiones.
Es decir que si nuestra página web tiene 18 imágenes el navegador las descargará en bloques de 6. Pongamos que cada bloque de 6 imágenes tarda un segundo en descargarse, pues bien, al tratarse de 3 bloques el navegador tardaría 3 segundos en obtenerlas todas.
¿Cómo evitar esta limitación?
Esta limitación del tiempo de descarga viene determinada por el dominio. Por tanto, si conseguimos distribuir los elementos en subdominios podremos mejorar la velocidad de descarga. Esta técnica es conocida como Domain Sharding y es muy recomendable para todas aquellas páginas que contengan una gran cantidad de material gráfico.
Deja una respuesta