WordPress es un sistema de blog que también sirve como sistema de gestión de contenido. WordPress es muy popular porque es más o menos fácil de manejar, existe mucha información sobre este sistema en la web, es fácil optimizarlo para los motores de búsqueda y existen miles de plugins gratuitos, entre otros. Pero un problema de este sistema puede ser la velocidad en que se cargan las páginas. A veces el Wordpres se vuelve medio lento.
A los usuarios no les gustan páginas web que se cargan lentamente. Además, la baja velocidad puede tener una influencia negativa en el SEO. Entonces voy a presentar algunos consejos para mejor el Pagespeed de WordPress.
¿Cómo medir la velocidad en que un sitio web se carga?
Existen muchas herramientas para medir la velocidad de un sitio web. Aquí algunos ejemplos:
- A mi gusta mucho YSlow (extensión para navegadores) que puedo ejecutar desde mi navegador. Te presenta mucha información sobre una página web y sus problemas con la velocidad.
- Pingdom Website Speed Test es perfecto para ver cuánto pesa cualquier archivo que se carga con una página web (imágenes, javascript, css, entre otros). Además, Pingdom te muestra el orden en que los elementos distintos de una página se cargan.
- Google Page Speed Insights es muy práctico porque te muestra la velocidad de tu página en ordenadores y dispositivo móviles. También te ofrece consejos para optimizar el contenido y mejorar el Pagespeed.
- Interesante es Gtmetrix que combina herramientas distintas (tiene una herramienta que se llama PageSpeed pero también te muestra datos de Yslow y otros datos parecidos a los de Pingdom).
- Web Page Test es otra herramienta. Puedes elegir el lugar de donde quieres hacer la prueba de la velocidad y también el tipo de navegador.
Servidor/Hosting
Lo primero es elegir un hosting rápido, entonces un hosting en un servidor que responde rápidamente. Si buscas por algo como “fast server for hosting” encuentras páginas web en donde se muestra resultados de pruebas de velocidad de los servidores de distintas empresas (de los EEUU) que ofrecen alojamiento de sitios web. De la misma manera puedes buscar por “fast hosting for wordpress”. En el sitio oficial de WordPress también puedes encontrar una página con recomendaciones sobre empresas que ofrecen hosting para este sistema.
Un aspecto de interés es que el servidor del hosting ofrece la compresión de los datos con gzip. Otro aspecto que influye en la velocidad en que el WordPress se carga es la configuración del “Cache Control Header” o de la expiración de distintos archivos en tu web (por ejemplo archivos css, imágenes, entre otros). Puedes decidir cuándo “caducan” estos archivos. Esto ayuda a mejora la velocidad porque si un internauta abre una página por segunda vez y un archivo no ha “caducado” no se carga este archivo nuevamente del servidor sino del cache de navegador (a través e “.httaccess, más información aquí).
Plantilla
Principalmente es posible optimizar cualquier plantilla para que el sistema se cargue más rápido. Pero una plantilla sencilla (como para un blog) seguramente tiene – al respecto del tema velocidad- ventajas sobre un tema para un sitio web grande o una tienda en línea.
Es porque los temas para sitios grandes normalmente contienen 5 banners distintas, muchos espacios para widgets, entre otros. Todo esto significa más código con una estructura más complicada que puede frenar tu WordPress.
Código
No importa que plantilla estás utilizando, seguramente contiene código que puedes mejorar. Por ejemplo puedes reemplazar código de php por código de html (php requiere la base de datos): por ejemplo en el header de Worpdress hay un código php que dice: muestra nombre de sitio como título de la página. Esto puedes hacer fácilmente a través de html.
Además, te recomiendo buscar y corregir errores de tu código html y css (aquí encuentras herramientas para hacerlo).
Plugins
Seguramente es uno de los temas más importantes para el Pagespeed de un sitio en WordPress. Plugins pueden frenar tu sitio, pero no todos los plugins lo hacen.
Hay plugins que insertan código de css y javascript al código de Worpdress (o peor, cargan archivos adicionales de javascript o css). Esto puede bajar la velocidad en que tu Worpdress se carga. Más información sobre este tema abajo en la sección “código de css y javascript” de este artículo.
Plugins que aumentan y utilizan la base de datos también pueden frenar la velocidad en que se cargar tu WordPress. Otros plugins que pueden bajar la velocidad son los que ejecutan trabajos complejos, por ejemplo plugins que indexan el contenido de tu sitio o blog. Plugins que necesitan información de otros sitios web (por ejemplo los plugins que muestran contenidos de las redes sociales) tampoco son buenos para la velocidad. Estos plugins causan HTTP requests adicionales.
Por eso la reacomodación siempre es solo utilizar los plugins de WordPress que realmente necesitas y borrar plugins que no estás usando. Pero no existe una recomendación de cuántos plugins deberías utilizar. Hay sitios que contienen 50 o más plugins que se cargan rápidamente.
Un problema de la mayoría de los plugins es que se cargan en cualquier página de tu WordPress, también en las páginas donde no los necesitas (por ejemplo el código para un banner en el “home” también se carga en la página “contacto”). Existen plugins para optimizar WordPress que puedes instalar en tu sistema para configurar en cuáles páginas se ejecutan los demás plugins, por ejemplo Autoptimize.
Hay muchos plugins para mejorar la velociad en que se carga el Wodpress, por ejemplo pluins para el cache: WP Super Cache, W3 Total Cache, entre otros.
Código css y javascript
Un problema de los plugins es que la mayoría viene con sus propios códigos de css y javascript. Algunos plugins insertan estos códigos directamente en el código de WordPress pero la mayoría tiene propios archivos (algo como: “wp-content/plugins/pluginxxx/xxx/xxx.js”) que se debe carga para ejecutar el plugin.
Los archivos de css y javascript aumentan el número de los HTTP requests (solicitudes que debe enviar el navegador al servidor para pedir información) – cada archivo/script que se debe descargar para mostrar una página crea un HTTP request.
Un navegador puede descargar varios archivos al mismo tiempo, pero normalmente no todos y por eso se demora en mostrar una página si hay muchos archivos/scripts (y por eso muchos HTTP requests) para descarga. Esto es una causa para que el sistema se cargar más lento.
Primero se cargan los archivos de css y javascript, luego se cargan los otros elementos de la página (Pingdom Page Speed)
El problema más grande con los archivos de javascript y css es que cuando el navegador empieza a cargarlos no puede cargar otros archivos (por ejemplo imágenes) hasta que ha terminado de cargar los estilos y códigos de js.
Por eso se puede demorar hasta que se carga una página web, especialmente si el javascript está ubicado en el header del código html o al inicio del “body”. Además, muchas veces los archivos de css o javascript son (muy) pesados y demoran en cargarse.
Existen principalmente dos opciones para optimizar estos archivos de css y javascript de tu WordPress:
- Hacerlo a través de plugins
- Hacerlo manualmente
1. Existen varios plugins que te ayudan a optimizar archivos de css y javascript (por ejemplo WP Total Cache), que ponen todos los archivos de javascript y css en el footer (o css en el header y js en el footer) –por ejemplo Autoptimize- o que cargan los archivos de javascript de forma asincrónica (luego de haber cargado los otros elementos de la página), por ejemplo Async JS and CSS.
Importante es –si utilizas estos plugins- revisar si todos los javascript/plugins que utilizan estos javascript siguen funcionado. Si no, algunos de estos plugins te ofrecen la posibilidad de crear excepciones de la optimización (algo como: optimizar todos el javascript menos archivo “XXX,js”).
2. Existen programas y servicios web para optimizar archivos de css y javascript (por ejemplo CSSTidy para css y para javascript). Estos programas especialmente quitan espacios en blanco y comentarios dentro de los archivos.
«Plugin.php»: borrar la parte del código que dice «carga css/javascript» y insertarlo manualmente a tu WordPress (por ejemplo en el footer o en un archivo css).
Si no quieres que un plugin cargue su propio css o javascript en cualquier lugar dentro de tus páginas tienes que –generalmente- abrir el archivo general del plugin (“nombreplugin.php” o algo parecido en la carpeta “wp-content/plugins/carpeta-del-plugin”) y borrar la parte del código que dice “carga css/javascript”. Luego puedes insertar los archivos de javascript que el plugin necesita manualmente en el footer de tu WordPress. El código de los archivos de css de los plugins puedes insertar en el archivo general de css.
Otra forma de impedir que se carguen archivos de los plugins es insertar el código
“<?php remove_action(‘XXX.css’, 30); ?>”
en el archivo “functions.php” (cambiar XXX.css por el nombre del archivo que no quieres cargar, parece que ni funciona con todos lo temas de WordPress).
CSS Sprites:
Distintas imágenes de fondo unidas en una sola imagen
Utiliza CSS Sprites significa combinar varias imágenes de fondo del código css en una imagen grande para reducir el número de los HTTP requests. Si utilizas en tu WordPress distintos iconos no hace falta carga cada icono sino un archivo que contiene todos. En tu página puedes mostrar las imágenes correctas a través de “background-position”. También existen programas que te ayuda a crear CSS Sprites.
Imágenes de WordPress
Claro, es importante optimizar las imágenes antes de subirlas a tu WordPress. Puedes hacerlo con programas como Photoshop. Es mejor subir las imágenes en el tamaño en que las necesitas y no más grande para que tu navegador no deba disminuir su tamaño. La herramienta Google Page Speed te dice cuáles son las imágenes en las se puede bajar el peso sin perder la calidad, YSlow te enseñar cuáles son las imágenes que fueron disminuidas por el navegador para mostrarlas correctamente.
Image Sprites
¿5 imágenes o una sola?
Parecido a los CSS Sprites también existen image Sprites. La idea es combinar varias imágenes que están lado a lado en tu página a una imagen grande. Recomendado es hacerlo si las imágenes no son tan importantes para el diseño y/o el SEO. Un ejemplo son los iconos de las distintas redes sociales (si no las insertaste como imágenes de fondo).
Lazy Load
Existen varios plugins para WordPress que cargan las imágenes del contenido solamente si el internauta que visita una página “llega” a la imagen, entonces se cargan imágenes en el footer solamente si el internauta que abre una página hace scroll hasta llegar al footer pero no cuando solamente abre la página. Esto puede mejor la velocidad de tu blog o sitio (buscar en Wordpess Plugins por image lazy load, hay varios plugins, por ejemplo BJ Lazy Load).
Content Delivery Networks
Content Delivery Networks (CDN) son otra forma de mejorar la velocidad en que tu Worpdress se cargar. CDN tienen servidores en distintas partes del mundo y mandan el contenido de una página web desde el servidor más cercano a un internauta. Además, los datos de los CDN normalmente no contienen cookies, entonces son menos pesados.
CDN sirven especialmente para sitios web internacionales (visitantes de todo el mundo). Si tienes un negocio local y la gran mayoría de los internautas que visitan tu sitio vienen de un solo país/región/ciudad no (siempre) hace falta utilizar un CDN. En todo caso tienes que ver dónde están ubicados los servidores. No sirve mucho un CDN con servidores en China y Europa si tus clientes viven en Argentina, Perú y Colombia.
Existen plugins en WordPress que trabajan muy bien con algunos CDN (por ejemplo WP Super Cache con MaxCDN).
Base de datos
La base de datos de tu Worpdress también influye en la velocidad porque la mayoría de la información está guardada en esta base. Especialmente en sitios grandes donde se sube y borra muchos datos y también blogs que ya existen por algunos años pueden tener una base muy grande que –aparte de la información útil- contiene mucha basura (datos no correctamente borrados, entre otros). La consecuencia es que la información se puede cargar cada vez más lenta, por ejemplo en el caso de búsquedas. Entonces es importante limpiar la base de datos. Aquí encuentras un artículo interesante sobre este tema.
Con plugins como WP Revisions Control puedes controlar cuántas revisiones de un post o una página se guardan en la base de datos. Normalmente Worpdress guarda un número infinitivo que se queda en la base y la hace más pesada.
Soy Robert Korntheuer y este es mi blog. Aquí escribo sobre temas relacionados con el SEO (Search Engine Optimization) como tendencias en la búsqueda local, el posicionamiento para el comercio electrónico o la relación entre las redes sociales y los principales motores de búsqueda.
Ofrezco posicionamiento web.
Contacto: 0995972104 / robert.korntheuer@webservicio-quito.com