En esta mega guía de como optimizar WordPress (Actualizada el día 22/11/2019 ) encontraremos los tutoriales, herramientas y consejos de los servicios de optimización profesionales que un usuario casual de WordPress puede llevar a cabo de forma relativamente sencilla y aprender a:

Este artículo es muy largo ya que explica la mayoría de técnicas profesionales de optimización que se implementan en WordPress, para ayudar a organizarte puedes descargarte una check list al final del post y seguir los pasos de la guía sin que te explote la cabeza.

CONSEJO ANTES DE EMPEZAR A SEGUIR ESTA GUÍA

Haz una copia de seguridad de WordPress y de la base de datos, por que aunque las opciones de esta guía no son peligrosas, es conveniente tener una copia de seguridad por si algo sale mal.

Elección de un buen Hosting

Todo proyecto web basado en WordPress pasa por la elección de un buen hosting que se adecue a las necesidades de dicho proyecto.

No es lo mismo tener una página estática corporativa, tener un blog, una tienda online o un membership site.

Todos estos tipos de página web necesitan un hosting a su medida que se adecuen a los recursos que necesitamos.

Límites de tráfico, cantidad de bases de datos, espacio disponible son los recursos en los que nos fijamos cuando contratamos un hosting pero también debe de ser rápido y estar adaptado a WordPress.

Infórmate de que utilicen últimas tecnologías como discos SSD, certificados SSL, servidores repartidos estratégicamente y otras tecnologias como NGINX, HTTP/2, PHP7 y CDN.

También algo a tener en cuenta son los servicios que ofrece el proveedor, si solo ofrece hosting compartido y en un futuro quieres pasarte a un servidor dedicado y tu proveedor no lo ofrece tendrás que cambiar de hosting con la consecuente migración.

Hoy en día la mayoría de los Hosting ofrecen alojamiento para WordPress ya que se ha popularizado entre los desarrolladores web.

Quiero destacar como hosting SiteGround, no solo por su rapidez sino que además están especializados en WordPress y es que saber que el soporte técnico está especializado en este CMS es clave para su elección.

También tengo que mencionar que siempre son los primeros en incorporar las nuevas tecnologías y me refiero a que son los primeros en tener disponible las versiones nuevas de PHP y son colaboradores de Let’s Encrypt, una maravilla vamos.

Por último quiero decir sobre este Hosting que no solo ofrecen hosting compartido que podemos ampliar según necesitemos, si no que también ofrecen Hosting en la nube y servidores dedicados que nos da la posibilidad de ampliar mucho nuestros recursos sin necesidad de hacer una migración a otro hosting en caso de que sea necesario.

Existen otros hosting que son rápidos, seguros y fiables como Webempresa y Raiola que también son unos cracks de WordPress y CDMON que tiene un servicio técnico muy bueno.

PHP 7 mejora la velocidad de WordPress

PHP es el software base de nuestro servidor con el que trabaja WordPress para generar el contenido y afecta mucho a la velocidad del procesamiento del servidor.

El problema es que muchos de los servidores que contratamos para el hosting están usando aún versiones antiguas de PHP como PHP 5.4, PHP 5.5 y PHP 5.6.

Para mejorar la velocidad de WordPress lo mejor es tener activada la última versión PHP 7 o PHP 7.1 según esté disponible en nuestro hosting.

La versión PHP 7 duplica la velocidad respecto a las versiones anteriores de PHP.

Por lo tanto para optimizar WordPress ves al menú de administración de tu hosting o Cpanel y busca la opción PHP y activa la última versión PHP.

Simplemente es un par de clics dentro de nuestro Cpanel y los cambios son automáticos nada más guardarlos, es un cambio sencillo rápido y eficaz.

Cambiar la versión php para mejorar la velocidad

Certificado SSL y protocolos HTTPS y HTTP/2.

Sé que cada vez que ves siglas y nombres raros de protocolos tu cabeza empieza a sobrecalentarse por eso voy a intentar explicártelo primero de una forma muy sencilla.

El certificado SSL sirve para crear las webs seguras con el icono verde en la URL, necesitas tener eso para que tu proveedor de hosting te active o migre tu web a HTTP/2 y esto optimiza cómo se comporta el servidor y aumenta la velocidad de WordPress.

Y aquí una explicación más larga.

Internet utiliza el protocolo HTTP (esas letritas que hay antes de la URL en el navegador «http://») este protocolo se ha quedado obsoleto y se ha creado el protocolo HTTP/2.

El protocolo HTTP/2 es mucho más rápido y eficaz, comprime el contenido, genera menos peticiones al servir el contenido y sus conexiones están siempre abiertas y como resultado mejora la velocidad de carga de nuestra página web.

El protocolo HTTP/2 lo tiene que activar en tu servidor tu proveedor de hosting.

Pero normalmente para que tu proveedor de hosting pueda activar el https/2 en tu servidor tu página web primero necesita un certificado SSL.

El certificado SSL cifra las conexiones de tu web y las hace seguras, seguro que has visto en algunas páginas web la URL marcada con verde el protocolo HTTPS.

Pues es eso lo que necesitas para que tu proveedor de hosting te active el protocolo HTTP/2

¿Y cómo creamos un certificado SSL?

Pues mediante el proyecto Lets Encrypt podemos crear un certificado SSL gratuito para nuestro dominio.

Puedes instalar certificados Let’s Encrypt gratis a través del cPanel

La mayoría de los hosting están implementando aplicaciones dentro de su panel de administración para instalar este certificado SSL . En Siteground es muy fácil generarlo, y en otros Hosting tienes que buscar en el Cpanel > Seguridad > SSL.

Si esto te está sonando a chino o te parece engorroso la mejor opción para hace esto correctamente es llamar al servicio técnico y que te ayuden si tienes dudas, que para eso es el servicio técnico ¿no?.

Y después tenemos que configurar las URL en las opciones generales de WordPress y forzar el cambio de URL de http a https mediante redirecciones o ayudándonos con el Plugin Really Simple SSL (este plugin no crea el certificado solo las redirecciones).

Y cuando tengamos generado y configurado el certificado SSL llamamos al proveedor de hosting para que nos active el protocolo http/2.

En resumen, para optimizar WordPress con HTTP/2:

Para activar el protocolo HTTP/2 primero genera el certificado SSL en Lets Encrypt en el Cpanel.

Cambia las URL de WordPress y con el Plugin Really Simple SSL fuerza las redirecciones.

Y llama a tu proveedor de hosting para que te active el protocolo HTTP/2 si no se hace automáticamente.

Si quieres saber más información sobre cómo trabaja y gestiona los datos puedes ver la entrada ¿Que es http/2?

Elegir un Tema de WordPress optimizado

Debemos elegir con cuidado los temas que utilizamos en WordPress. Esta frase te la han dicho 1000 veces, lo sé, pero es la mayor verdad del universo.

Los temas multipropósito suelen ser espectaculares en el diseño, que es algo a tener muy en cuenta cuando creamos un proyecto, pero debemos saber que si tienen demasiadas opciones visuales van a ser más pesados.

Para elegir el tema hay que pensar siempre cuántas opciones tiene y cuantas realmente voy a utilizar.

Cuando compramos un tema ya sea para nosotros o para nuestros clientes caemos en el error de fijarnos únicamente en los plugin que vienen incluidos y en la cantidad de elementos visuales que tienen para visual composer y pensamos que en cuanto más tengan mejor.

Y no nos centramos en cuántos se van a utilizar realmente.

Muchos temas utilizan 2 o 3 plugin de sliders (Layer slider y Revolution Slider) y tienen hasta 80 secciones de elementos para visual composer.

Siempre me he preguntado ¿porqué tener 3 plugins que hacen lo mismo en un mismo tema? Nunca lo sabré.

Pero no te preocupes, no soy ningún extremista que te va a recomendar que no utilices plantillas multipropósito llenas de opciones.

La mayoría de estas plantillas suelen ser más pesadas y lentas, es verdad, pero no suelen ser nada catastrófico y se pueden usar perfectamente con una buena velocidad de carga y peticiones aceptables si aplicamos técnicas de optimización.

Por lo tanto se puede decir que para optimizar WordPress también incluye elegir sabiamente el tema a utilizar.

Así que lo que te voy a recomendar es que elijas el tema de WordPress pensando en tus necesidades de diseño y funcionalidades necesarias y no te compres una plantilla que tenga más opciones de las que jamás pensarías utilizar.

No utilices el contenido demo de las plantillas

Muchas plantillas Premium utilizan demos de contenido que prometen tener una página web con un diseño increíble en pocos clics.

Sé que es una tentación y puede ahorrar mucho trabajo sobre todo si no puedes invertir mucho tiempo en un proyecto.

Pero normalmente es una carnicería de la optimización de WordPress ya que se cargan decenas de imágenes con tamaños enormes y sin comprimir además de vídeos e incluso configuraciones de plugins.

Personalmente las demos solo se deberían utilizar para comprender cómo trabaja el tema y para aprender a hacer la estructura de una página web fijándote en la configuración de los elementos de la plantilla.

Y para esto deberías utilizar un entorno de pruebas y no un proyecto real.

Elegir los Plugin de WordPress

La pregunta más frecuente sobre los plugin en WordPress suele ser…

¿Cuántos plugin puedo instalar para tener WordPress optimizado?

Y la respuesta es siempre la misma, no es la cantidad de los plugin si no la calidad.

Puedes tener una instalación en WordPress con 30 plugin y que funcione correctamente y otra instalación de WordPress con 2 plugin que sea un caracol digital.

La clave está en:

Utilizar plugin de calidad: tenemos que tener en cuenta lo que los usuarios dicen de un plugin ya sea fijándonos en las votaciones del repositorio de WordPress o en artículos de blog de profesionales y decidir en consecuencia.

Utilizar plugin que se actualicen: Fíjate en la actualización de los plugin y averigua si los desarrolladores lo actualizan cuando sea necesario.

Plugins con muchas instalaciones activas: las instalaciones activas suelen ser un indicador de que el plugin en cuestión tiene la confianza de miles de usuarios.

Utiliza los plugin que se ajusten a tus necesidades: jetpack o sumome son suites de plugin que tienen muchas herramientas para configurar.

¿Realmente utilizas la mayoría de sus opciones o solo unas pocas? Seguramente puedas encontrar 2 plugin que realicen el mismo trabajo que esa pesada suite de plugin que tienes instalada usando la mitad de los recursos web.

Ocurre exactamente lo mismo que con los temas, utiliza los que se ajusten bien a tus necesidades.

Plugin con desarrolladores activos en los foros: siempre da seguridad que te atiendan los desarrolladores en los foros de WordPress o en los soportes técnicos de los plugin para resolver tus dudas y problemas.

Desinstala todos los plugin que no utilices: Los plugin desactivados siguen ahí, ocupando espacio y recursos del hosting, desinstalarlos, que no te den pena, siempre lo podrás volver a instalar, no se van a escapar del repositorio de WordPress.

Plugins que no creen incompatibilidades: La mayoría de los plugin son compatibles con los temas y plugin más populares del mercado de WordPress pero puede ocurrir que un plugin cree errores al interactuar con otros temas o plugin, sobre todo si los plugin se utilizan para necesidades similares.

Externaliza la necesidad: Si una herramienta externa ya hace el trabajo ¿necesitas instalar el plugin?

Aunque es verdad que muchos plugin nos ahorran tiempo de trabajo también es cierto que muchas funciones las podemos hacer con programas de ordenador y herramientas de internet.

Hay multitud de plugin que puedes ahorrarte usando las herramientas que hay en internet, como por ejemplo, puedes ver los datos de Google Analytics en el propio Google Analytics (¿Qué locura verdad?) sin tener que utilizar un plugin para que muestre los datos en WordPress.

Mide el rendimiento y compara los plugin: Gracias al plugin P3 Performance Profiler podemos medir el rendimiento de los plugin que tengamos instalados en nuestro WordPress, ver cuales están ralentizando nuestra instalación, comparar nuestros plugin y obtener datos para elegir con cuál nos quedamos.

Puedes ver el tutorial P3 Performance Profiler para más información.

Carga selectiva de los plugin para optimizar WordPress

Los diferentes plugin que utilizamos en WordPress ya sean maquetadores, botones sociales, sliders y demás, se cargan todos a la vez cuando un usuario accede a nuestra página web.

Además de cargarse todos a la vez se cargan incluso en las páginas donde no están activas sus funcionalidades.

Esto crea un problema de rendimiento cuando utilizamos muchos plugin.

Para que imagines lo que ocurre es como si todos los miembros de una familia intentan entrar en la casa a la vez y se quedarán atascados en la puerta dándose codazos hasta que entran como pueden.

Bueno pues para optimizar WordPress y solucionar este problema existe un plugin que nos permite elegir el orden de carga de los plugin y deshabilitarlos donde no deben cargarse.

El plugin se llama Plugin Organizer y próximamente podrás seguir un Tutorial completo en esta web.

Limpia WordPress y Optimiza la base de datos.

Cuando trabajamos con WordPress pueden acumularse multitud de archivos que ocupan mucho espacio y recursos de nuestro servidor y de WordPress. Para optimizar WordPress debemos borrarlos con frecuencia.

Estos archivos se crean automáticamente cuando borramos algún contenido o se acumulan comentarios no aprobados y spam.

También cada vez que hacemos cambios en una página o post se crea una revisión de la entrada para volver atrás en caso de error.

Y estos archivos con el tiempo empiezan a pesar más de lo debido afectando a la velocidad y salud de nuestro WordPress.

Por lo tanto tenemos que poner el ojo y limpiar esta serie de elementos de vez en cuando para optimizar WordPress:

• Papelera, borradores, y revisiones de páginas y entradas.
• Comentarios no aprobados, spam y papelera de comentarios.
• Metadatos en los comentarios.
• Opciones transitorias de plugins y temas
• Datos huérfanos de la base de datos

También ocurre con la base de datos.

La base de datos de WordPress acaba llenándose de elementos temporales de WordPress y elementos huérfanos que se crean cuando desinstalamos algunos plugins.

Estos datos basura también engordan nuestra base de datos haciéndola lenta por lo tanto tienes que optimizar la base de datos de WordPress cada cierto tiempo.

Te recomiendo que para limpiar WordPress y optimizar la base de datos rápidamente con Wp-optimize puedes seguir este tutorial de Wp-optimize para limpiar WordPress y la Base de datos.

Medir el espacio de las imágenes en WordPress

Antes de subir cualquier imagen tenemos que saber qué espacio exacto va a ocupar en la pantalla cuando se muestre la imagen a un usuario.

Si no medimos el espacio que ocupa la imagen seguramente subiremos imágenes más grandes de lo debido lo que nos penalizará la optimización de WordPress

Para averiguar cuánto espacio ocupará una imagen simplemente sube una imagen al lugar deseado de tu plantilla y mide lo que se muestra con la extensión de navegador Page Ruler.

Modifica el tamaño de las Imágenes para acelerar la carga de WordPress

Una vez hemos medido el tamaño que va a ocupar en la pantalla, modificamos el tamaño de la imagen en Photoshop o en nuestro editor de imágenes favorito, para ajustar la imagen lo máximo posible al espacio donde se va a mostrar.

Así que para optimizar WordPress también debemos modificar las imágenes y subirlas a WordPress en el tamaño exacto que ocuparán.

Photoshop > Guardar para Web

De esta forma ahorraremos espacio en el servidor y no obligamos a que WordPress redimensione la imagen cada vez que la muestra.

Si queremos modificar el tamaño de varias imágenes al mismo tamaño y formato lo podemos hacer con el programa RIOT.

Formato de imágenes

Elegir el formato correcto para las imágenes es crucial para que se guarden con un tamaño adecuado a sus necesidades y que sea optima para la web.

Debemos elegir el formato según el tipo de imagen, por lo que generalmente utilizamos:

Formato JPG: Para guardar las imágenes fotográficas y con muchos colores.

Formato PNG: Para las imágenes planas, las capturas de pantalla y logos o imágenes con espacios en blanco.

Formato WebP: un nuevo formato de imagen para la web con una compresión altísima sin pérdida. Las imágenes pueden pesar hasta un 80% menos.

Asegúrate de que tus imágenes están guardadas con el formato correcto para optimizar WordPress.

Opciones de carga de las imágenes

Además de modificar el tamaño de las imágenes y guardarlas en su correcto formato con Photoshop podemos modificar el comportamiento de las imágenes cuando se cargan en la web.

Photoshop > Guardar para Web

Con la opción “Progresiva” en JPG o “Entrelazada” en PNG las imágenes tendrán varias capas y se cargaran primero con baja calidad y después se volverán nítidas.

Con esta técnica las imágenes cargan más rápidamente y no suele notarse el cambio a menos que la conexión del usuario será muy lenta.

Y de esta manera aceleramos la carga de las imágenes y mejoramos el tiempo de carga de WordPress.

Usar Iconos y Vectores en vez de imágenes

Las tipografías de iconos pesan menos y como consecuencia cargan más rápido que las imágenes.

Así que intenta cambiar las imágenes por iconos donde sea posible como por ejemplo los logos de las redes sociales.

También puedes utilizar imágenes vectoriales para los iconos o imágenes creadas con estilo Flat Design.

Las imágenes vectoriales SVG son también más rápidas pero la librería de medios de WordPress no es compatible por defecto con este tipo de archivo.

Para usar archivos SVG puedes instalar el plugin Scalable Vector Graphics Svg que hace compatible este tipo de archivo con WordPress.

Comprime las imágenes para optimizar la carga de WordPress

Las imágenes son archivos que debido a su tamaño ocupan mucho espacio en nuestro servidor y tardan en cargarse en nuestra pagina web.

Y para optimizar WordPress tenemos que comprimir las imágenes.

Podemos reducir su tamaño significativamente si las comprimimos antes de subirlas al servidor y obtendremos un ahorro en la cuota del tamaño del servidor y velocidades de carga más rápidas.

Son compresiones de imágenes sin pérdidas perceptibles y el tamaño de las imágenes puede reducirse hasta un 80%.

Si no tuvieras tiempo para realizar todas las optimizaciones de imágenes haz esta al menos.

Así que antes de subir las imágenes a WordPress pásalas por un compresor de imágenes.

Compresores de imágenes online:

• Tiny JPG
• Compressor.io

Compresión y optimización de imágenes automáticas con Plugin

Podemos modificar el tamaño de las imágenes al tamaño que se muestran en pantalla y comprimirlas automáticamente con plugins de WordPress.

Automatizar este proceso nos quita cierto control sobre la optimización de nuestras imágenes pero ganamos muchísimo tiempo que si tuviéramos que hacer a mano la optimización de todas nuestras imágenes.

Estos plugin comprimen y optimizan las imágenes que ya están subidas en nuestro servidor y las que subiremos a partir de su instalación.

Wp smush es un plugin sencillo, es uno de los más utilizados y el que utilizo yo.

Y aquí te dejo otras alternativas a este plugin.

• Ewww Image Optimizer
• Shortpixel image optimiser
• Tiny Compress images

Nota: Si instalamos uno de estos plugin cuando subimos una imagen a WordPress la imagen tardará más en subirse al servidor ya que el plugin está trabajando en la imagen durante su subida, si la subida de tu servidor es demasiado lenta puede dar errores, así que en este caso puedes desactivar el plugin, subir las imágenes y volver a activar el plugin para comprimirlas una vez subidas.

Configura los tamaños de las imágenes de la biblioteca de WordPress

Una de las primeras configuraciones que debes hacer en WordPress es ajustar el tamaño de las imágenes de la librería multimedia respecto al ancho máximo de tu plantilla.

Estas opciones se configuran en el menú de WordPress Ajustes > Medios

Esto es muy útil cuando tienes un blog, ya que ajustando el tamaño grande al ancho de los post podemos tener una copia generada por WordPress de las imágenes ya adaptada a nuestras necesidades.

Cambia el slider por una imagen

Si tenemos que crear una cabecera con un diseño espectacular no queda otra que utilizar plugin de slider como Revolution Slider.

Pero no hace falta utilizar un plugin de Slider para crear una cabecera que únicamente tiene una imagen de fondo a ancho completo, un texto y un botón.

Si utilizamos algún constructor o maquetador en WordPress como Visual Composer, Divi Builder o Beaver Builder podemos crear una fila con un fondo de imagen a ancho completo y después añadirle un texto y un botón por encima.

Para la mayoría de las cabeceras creadas con sliders el resultado será el mismo pero además nos ahorramos todo ese código JavaScript que utilizan los plugin de sliders.

Muestra extractos de los post

Si en tu página principal muestras los post de tu blog configura tu tema para que muestre los extractos en vez de la publicación completa y limita cuantos post muestras en la página principal.

Opción en Menú de WordPress > Ajustes > Lectura

En el caso de que tu tema no tenga esta opción debes de utilizar la etiqueta “Leer Más” en el editor de texto de WordPress.

Mostrar los artículos completos en la página principal o en la página de entradas no solo es carne de contenido duplicado sino que además lastra la carga de la web.

Alojar los archivos multimedia en plataformas externas

Los archivos multimedia como imágenes y videos son archivos muy pesados que vamos introduciendo en nuestro servidor.

Estos elementos hacen que nuestra página web se ralentice porque cuesta muchos cargarlos y crean muchas peticiones a la base de datos si están alojados en nuestro propio servidor.

Por eso podemos apoyarnos en servicios externos y redes sociales para cargar nuestro contenido desde ellas.

Alojamiento externo para Imágenes

Las imágenes no suelen crear problemas si tienen el tamaño adecuado y están comprimidas pero si eres un fotógrafo que quiere mostrar al 100% la calidad de tu trabajo lo mejor es que cargues las imágenes desde redes sociales.

Flickr, Printerest, Instagram, Imgur, Photobucket son algunas redes sociales y servicios que puedes utilizar para subir tus imágenes e insertarlas después en WordPress.

Alojamiento externo para Videos

En cuanto los videos ya nadie suele alojarlos en su propio servidor debido a su peso y a que tardan mucho en cargarse cuando se reproducen y se producen cortes durante su reproducción.

Para tener una buena calidad de video y reproducción lo ideal es subir el video a plataformas como YouTube o Vimeo e insertarlos en WordPress desde un iframe que generamos en YouTube o simplemente pegando la dirección URL del video en el editor de texto.

En el único caso donde podemos alojar un video en nuestro servidor es cuando vamos a utilizar en la cabecera un video corto de menos de 30 segundos ya que la integración y la carga automática del video en plugin de slider como Revolution Slider es más fluida.

Y en este caso te recomiendo que guardes el video en el formato correcto y en un tamaño ajustado a la cabecera.

Alojamiento externo para Audios

Si queremos mostrar audios o podcast en nuestro WordPress existen plataformas como YouTube pero solo para audios como SoundCloud, Ivoox o Spreaker.

Mostrar documentos desde servicios externos

Si tienes una revista o catálogo digital puedes compartirla en Issuu ahorras espacio en el servidor y los catálogos y revistas quedan con un estilo muy visual.

Para las presentaciones y documentos podemos utilizar SlideShare.

Descarga de archivos desde servicios externos

Si quieres almacenar en WordPress archivos que sean descargables puedes optar por servicios de almacenamiento en la nube como Google Drive, Dropbox, Mega.

Cache en WordPress

WordPress es un gestor de contenidos que genera el contenido cada vez que un usuario visita nuestra página web.

Pero que WordPress genere todo el contenido cada vez que un usuario visite nuestra página web no es demasiado eficaz y podemos tener problemas de velocidad como colapsar nuestro ancho de banda.

Para ayudar a WordPress y que no tenga que generar todo el contenido hay utilizar una caché.

Una caché es simplemente una copia de la estática de nuestra página web que está precargada y lista para mostrar a los visitantes y se regenera cuando hacemos un cambio en nuestra web para tener siempre el contenido actualizado.

Como consecuencia mostramos mucho más rápido el contenido de nuestra web y conseguimos una mejor velocidad de carga.

Podemos instalar una cache en WordPress mediante un plugin de cache como:

• WP Super Cache
• W3 Total Cache

Sigue el tutorial de WP Super Cache para instalarla en tu WordPress.

Si tu página web creada con WordPress está alojada con SiteGround te recomiendo usar el plugin de Caché de SiteGround SG Cachepress que incluye caché dinámica y Memcached, es muy fácil de configurar y tendrás una caché perfectamente optimizada.

Tutorial en ingles de SG Cachepress

WP Rocket

Wp Rocket es un plugin de caché, que además, incluye un montón de opciones adicionales para optimizar nuestra página web, podemos decir que es una suite de optimización.

Aparte de una rápida caché, este plugin analizará tu servidor en busca de módulos de optimización, como la compresión Gzip y creará las reglas necesarias en el archivo .htaccess automáticamente.

Y es muy sencillo de configurar ya que la cache funcionará automáticamente al activar el plugin.

Además de la memoria en caché típica, este plugin incluye:

• Precarga de caché
• Gestión de los headers (expires, etags…)
• Compresión Gzip
• Lazy load
• Minificación y concatenación de HTML CSS JS y Google Fonts
• Precarga de peticiones de DNS
• Eliminación de los query string de los recursos estáticos
• Limpieza y optimización de la base de datos

Con estas técnicas de optimización web conseguiremos:

• Acelerar la carga de nuestra página web.
• Reducir las peticiones HTTP.
• Disminuir el uso de ancho de banda del servidor.

Puedes ver el tutorial Como configurar WP Rocket

Utiliza una Red CDN

Una red CDN es una red de servidores repartidos estratégicamente por el mundo que podemos utilizar para tener una copia de nuestra página web y que se distribuya más rápidamente dependiendo de la localización del usuario que visite nuestra web.

Esta técnica de optimización tiene muchos beneficios directos, reparte la carga y las peticiones de tu página web en varios servidores.

Además el contenido que se sirve desde la red CDN también está cacheado y comprimido e incluso puede tener su propio firewall para aumentar la seguridad.

CloudFlare ofrece un servicio de red CDN profesional y gratuito y es el más utilizado por esta razón.

Si utilizas el plugin Jetpack tienes que saber que también incluye una CDN llamada Photon que se activa con un solo clic y servirás las imágenes desde los servidores de Automattic.

La única pega de photon es que cambia la URL de las imágenes así que el SEO de las imágenes puede verse perjudicado.

Puedes encontrar más información sobre red CDN en la guía para instalar una red CDN gratuita en WordPress donde explico paso a paso como se instala la red CDN de CloudFlare.

Versión AMP Páginas Móviles Aceleradas

Instala la versión AMP para WordPress que crea una versión de tu web específica para móviles, súper optimizada y rápida.

Detrás del proyecto AMP están empresas como Google, WordPress, Twitter, Pinterest, LinkedIn y medios digitales como el Washington Post.

Además Google mostrará primero las páginas con la versión AMP en futuros navegadores móviles, así que también mejorará el SEO.

Este nuevo formato solo muestra el contenido útil, es decir deja el texto, imágenes y vídeos y elimina los códigos que ralentizan la web.

Afecta al diseño de nuestra web en los navegadores móviles pero la velocidad mejora una barbaridad.

No se hacen cambios en tu tema si no que se crea una nueva versión de tu web para móvil y para acceder a ella simplemente añades /amp detrás de la URL de tu web.

Puedes ver la versión AMP de esta pagina para te hagas una idea.

Este nuevo formato para móviles es una auténtica maravilla y puedes conseguir velocidades web increíbles de 0,8 segundos para dispositivos móviles.

Es realmente el futuro próximo de los navegadores móviles.

La versión AMP es muy sencilla de implementar con el Plugin AMP y si utilizas el plugin Yoast SEO también instala el plugin Glue for Yoast Seo AMP para mejorar la integración del Yoast seo con AMP.

Puedes seguir el tutorial de instalación de AMP para WordPress donde se explica cómo instalar esta magnífica versión móvil paso a paso y encontrar mas información al respecto.

Compresión Gzip

La compresión Gzip hace que nuestro servidor comprima los contenidos que envía y se descomprima en el navegador del usuario.

Activar la compresión Gzip es una de las optimizaciones que mejor resultado dan en velocidad web y transferencia de datos.

Activar la compresión Gzip es muy sencillo, solo hay que añadir una sencilla regla a nuestro archivo .htaccess

Puedes seguir el tutorial Como Habilitar la Compresión Gzip en WordPress

Lazy Load

Lazy load significa carga aplazada del contenido y es una técnica de optimización que acelera la carga de nuestra web ya que solo carga el contenido que es visto en la pantalla del navegador.

Esta técnica de optimización es muy útil para páginas web con alto contenido fotográfico y galerías extensas donde la calidad de las imágenes es una prioridad.

El único problema de este tipo de técnica es que aunque la carga principal de la página web se ve mejorada las cargas posteriores pueden crear un efecto de espera cuando el usuario hace scroll sobretodo en dispositivos móviles y empeorar la experiencia de usuario.

Mi recomendación es que antes de aplicar esta técnica debes decidir si necesitas mejorar la carga de tu página web tanto como para poder empeorar la experiencia de usuario en la navegación.

Para aplicar Lazy Load en WordPress existen dos plugins muy recomendables.

• Lazy Load 
• BJ Lazy Load

Puedes seguir el tutorial de Lazy Load para ver más detalles.

Comprime y unifica los códigos HTML CSS JS

Un diseño espectacular de una página web suele tener gran cantidad de código CSS y JavaScript que son necesarios para crear efectos y tener funciones avanzadas.

Para paliar el efecto de tener demasiado código JS CSS y HTML es necesario comprimir esos códigos.

Comprimir los códigos con los que está creada nuestra página web es otra técnica estrella para la optimización de WordPress con magníficos resultados.

Existen muchos plugin con los que podemos comprimir los códigos HTML CSS y JS pero para mí el rey es Autoptimize.

No solo comprime los códigos, elimina códigos innecesarios, añade expires headers, y aplaza la carga del código al final de la web para aumentar la velocidad de carga.

Es muy sencillo de configurar, tiene 3 opciones generales para elegir qué códigos deben comprimir.

La configuración avanzada permite personalizar la compresión de los códigos entre otras opciones.

Personalmente me quede impactado con la eficacia de este plugin, nada más activarlo obtuve una reducción de 1 segundo entero la carga de esta web y la mitad de peticiones a la base de datos.

Y además soluciono el “Remove query strings from static resources” de Gtmetrix.

Es una auténtica joya, funciona a la perfección y además es fácil de configurar.

Otros plugin con los que puedes comprimir y optimizar los códigos HTML CSS y JS de WordPress son:

• Better WordPress Minify 
• Wp Super Minify 

Desactiva los pingbacks y trackbacks

Los pingbacks y trackbacks sirven para notificar a otras páginas web de que has enlazado su contenido y también sirven para que te notifiquen cuando te enlazan a ti.

Estas notificaciones se muestran en forma de comentarios de nuestros post.

WordPress realiza comprobaciones constantemente para saber cuáles son los enlaces entrantes y salientes.

Si nuestra página web es enlazada desde muchos lugares estas comprobaciones requieren de más tiempo de proceso cada vez y puede ser una fuente de ralentización de nuestra web

Podemos desactivar esta función y utilizar una herramienta de seo externa para saber quién nos enlaza.

Para desactivar los pingbacks y trackbacks en WordPress puedes hacerlo desde Ajustes > Comentarios.

Optimización de la barra lateral y footer

El Footer y la barra lateral de las páginas se cargan normalmente en todas las páginas interiores de nuestra página web.

Sirven para redirigir usuarios y mostrar anuncios, post relacionados, formularios, botones sociales, información de contacto e incluso mapas.

Dado el número de elementos del tema, widgets y plugin que trabajan en la barra lateral y el footer estas son las principales zonas que tenemos que tenemos que optimizar WordPress y sobre todo para mejorar la velocidad de las páginas interiores.

Y como con los plugin el problema principal es que no pensamos en que elementos necesitamos realmente e incluirlos todos es otra locura más que se comete muy a menudo.

Y es que los anuncios, los plugin de redes sociales, plugins de artículos nuevos y relacionados crean tiempos de carga altos y numerosas peticiones en la base de datos.

Para optimizar WordPress y la velocidad la barra lateral y el footer puedes seguir estas recomendaciones:

• Decide que funciones quieres y cuales son imprescindibles.
• No dupliques los botones sociales en la barra lateral, en el footer y en la barra flotante, elige un único sitio para ellos.
• No instales un plugin social por cada red social, ¿uno para Facebook, otro para Twitter, otro para LinkedIn? intenta utilizar un único plugin o sustituyelos por imágenes o links a tus redes sociales.
• No muestres un formulario de contacto muestra el teléfono y el email con texto.
• No muestres un mapa interactivo, crea una imagen o muestra solo la dirección.
• Utiliza barras laterales diferentes para las páginas y las entradas ya que normalmente se busca la redirección de usuarios a una zona de contacto en las páginas y la difusión en las redes sociales de las entradas.

Editores de texto de WordPress

El editor de texto por defecto de WordPress no tiene opciones para cambiar el tamaño y el tipo de tipografía y otras opciones que echarás de menos si estás acostumbrado a editores de texto como Word.

La razón de que no tenga estas opciones es que estas deben de aplicarse mediante las hojas de estilo CSS de tu tema para tener todos los estilos en un mismo archivo y optimizar la velocidad de WordPress.

Si has instalado un editor de texto adicional mediante un plugin tienes que saber que se incrusta código HTML que está obsoleto para los cambios en la tipografía que deberían hacerse por CSS en cada página donde lo utilices.

Y se crea demasiado código obsoleto que si lo utilizas comúnmente en tu web acabará por ralentizar la velocidad de WordPress.

Por lo tanto para optimizar WordPress utiliza poco o nada los editores de texto para cambiar la tipografía y utiliza las opciones de tu tema y código CSS.

Sistema externo de gestión de comentarios Disqus

La gestión de los comentarios en WordPress tiene una gran repercusión en las peticiones de la base de datos, sobretodo si tu  blog es popular y tiene cientos de comentarios por artículo.

Disqus es un sistema de gestión de comentarios que remplaza al gestor de comentarios de WordPress, si eres aficionado a leer blogs en internet ya lo habrás visto en multitud de páginas web.

Y la verdad son muchas las ventajas de utilizar este sistema de comentarios.

Si eres dueño de varios blog te permite gestionar los comentarios en un solo lugar de todos tus blogs y ordenar comentarios.

Entre las ventajas para los usuarios están identificarse con perfiles sociales y no perder el hilo de los comentarios escritos en los blogs.

Pero la ventaja que nos interesa para esta guía de optimización de WordPress es la mejora de las peticiones a la base de datos que se reducen al cargar los comentarios externamente reduciendo el uso de ancho de banda y mejorando la carga de la web.

Así que si tu blog recibe muchos comentarios o tienes previsto que los reciba es recomendable que implementes un sistema de comentarios externo como Disqus o IntenseDebate.

HeartBeat de WordPress

La función Heartbeat de WordPress (Latido del corazón de WordPress) sirve para controlar el tiempo en el que WordPress ejecuta algunas funciones.

Por ejemplo, controla cada cuantos segundos se envían los cambios de un archivo del sistema que se actualiza con nueva información o cuando se envían los datos que WordPress recoge a una herramienta externa.

Tienes que imaginar, como si WordPress tuviera un corazón, y con cada latido, se envía o actualiza información.

Podemos controlar el tiempo del latido para ahorrar recursos del servidor, sobre todo si tenemos problemas de optimización en la zona de administración de WordPress o cuando editamos post.

Es especialmente útil, cuando dejamos la zona de administración abierta durante mucho tiempo, por ejemplo cuando estamos editando un post.

Para controlar la función Heartbeat de WordPress utiliza el plugin Heartbeat Control, que te permite desactivar o modificar el intervalo de tiempo de Heartbeat .

Mide la velocidad y compara.

Antes y después de realizar cualquier cambio mide tu página web con herramientas para este propósito.

De esta manera puedes saber si necesitas optimización y que técnicas de optimización tienes ya activadas o cuáles no.

Gtmetrix te indicará la velocidad de carga en segundos y la cantidad de peticiones de la base de datos y también te mostrará detalladamente cada parámetro para saber si tienes activada la compresión Gzip, si tus imágenes están ya optimizadas o si cargas demasiado JavaScript en tu cabecera.

Otra herramienta parecida para realizar test de velocidad de la página web es Pingdom Tools

También puedes utilizar PageSpeed Insights de Google, no te muestra los segundos ni las peticiones a la base de datos pero si una valoración de tu web y las opciones que deberías mejorar.

Con la herramienta Website Speed Test de Dotcom-tools  podemos obtener un informe que muestra la velocidad tanto de la primera visita como de la segunda para ver el efecto de la caché y también podemos ver el resultado de velocidad por países.

WebPageTest es una de las mejores herramientas para analizar nuestra web, tarda un rato en completarse el análisis ya que te pone en una cola de espera, pero muestra datos muy fiables ya que puedes analizar la web con varias visitas y diferenciando entre la primera y la segunda visita.

Dareboost es otra herramienta para medir la optimización de nuestra página web donde podemos ver fácilmente que tipo de contenido de nuestra web es el que más está afectando a la velocidad.

Para saber si tu servidor tiene la compresión Gzip activada puedes utilizar Herramientas para comprobar la compresión Gzip

Para comprobar que la versión AMP está activa utiliza AMP validator 

Conclusión para optimizar WordPress (+ Plantilla Informe)

La velocidad de carga de nuestra página web, la navegación fluida entre las páginas y las peticiones a la base de datos son determinantes para tener una página web de calidad, con una buena experiencia de usuario.

A Google no le gustan las páginas lentas y a los usuarios tampoco.

Si tu página web tarda más de 3 segundos los usuarios que abandonan la web sin ni siquiera entrar aumentan y si pasa de 6 segundos empiezas a tener un problema de optimización.

El hosting y el tema son puntos esenciales para que nuestra página web creada con WordPress sea rápida pero hay muchos factores que también son determinantes y tenemos que tener en cuenta.

Las primeras causas de ralentización de la web que cometen los usuarios son las imágenes enormes y lentas y el uso masivo excesivo de plugins.

No te obsesiones con todas las medidas que puedes tomar para optimizar WordPress y utiliza las que necesites para mejorar los tiempos de carga y reducir las peticiones a la base de datos.

Medir es esencial para ver el efecto de las optimizaciones y recuerda medir tanto la página principal y la de las entradas antes y después de aplicar cada optimización.

He creado una Check List en Excel que puedes utilizar como informe de optimización de la página web o simplemente como lista para organizar tu trabajo.

Espero que esta guía de optimización de WordPress y los tutoriales relacionados te sean de ayuda para tu proyecto.

¿Qué otras medidas y trucos sabes para optimizar WordPress? Déjalas en los comentarios.