Saltar al contenido
Experiencias en Red

Optimización web con plugins en WordPress (I)

Ahora que el acceso a páginas web a través de dispositivos móviles se ha multiplicado tanto, una de nuestras obligaciones es mejorar la carga de nuestra página web, acelerar su velocidad para evitar que nuestros usuarios nos den la espantada. La optimización web con plugins en WordPress es una de las principales preocupaciones de todo blogger.

Para conseguir que una página hecha con WordPress cargue más rápido, podemos usar plugins o modificar manualmente código de nuestra web a través del archivo .htaccess de nuestro WordPress. En este post vamos hablar de cómo realizar una optimización web con plugins.

Herramientas para medir la velocidad web

Vamos a empezar hablando de cómo medir la velocidad de nuestro sitio en ordenadores y dispositivos móviles, y para ello echaremos mano de distintas herramientas:

>> Thinkwithgoogle.com

Esta herramienta de google te dice el tiempo de carga de tu web en dispositivos móviles y te evalúa cuánto tarda en cargar en conexión 3G y 4G.

>> Gtmetrix.com

Evalúa una serie de parámetros de 0 a 100 y te propone cómo mejorar. Además, otorga una puntuación de velocidad a la web.

>> Pingdom.com

Parecido al anterior, no sólo te puntúa la página e indica tiempo de carga, peticiones al servidor, peso de la página, etc, sino que te analiza lo que necesita mejoras y te propone medidas.

>> PageSpeedInsights.com

Esta herramienta puntúa la versión ordenador y la versión móvil. Realiza un diagnóstico de la página y te propone qué ha de mejorar.

Hay más herramientas parecidas a todas éstas, pero con cuatro me parece suficiente para que cada uno elija la que más le guste, la que mejores resultados le aporte, y si no está satisfecho que pruebe otras.

Todas estas herramientas miden el peso de nuestra web, el tiempo de carga, el número de peticiones que se realizan al servidor, etc. Además, también nos dan pistas de cómo podemos mejorar nuestro sitio para incrementar los parámetros de velocidad.

Mejorar la velocidad web con plugins

Hay muchas maneras de mejorar la carga de una web. Lo podemos hacer por medio de plugins, aunque no hay ninguno perfecto. De los que he probado, ninguno aporta una solución integral a todas y cada una de las medidas que las herramientas de análisis proponen mejorar. En la mayoría de los casos se necesitan varios plugins para que los resultados sean tirando a buenos.

Si decidimos usar plugins, habremos de decidirnos por diferentes herramientas que mejorarán nuestra velocidad web en función de distintos aspectos en los que hay que centrarse. Pero hay que tener en cuenta que su funcionamiento y resultados variará dependiendo de la web que tengamos y de la plantilla.

Vamos con algunos plugins. Hay más, pero voy a mencionar únicamente tres de cada tipo:

>> Activar la caché y compresión Gzip.

** WP-Rocket

Considerado uno de los más completos plugins de caché, reduce el tiempo de carga de la web, mejora en optimización con compresión de archivos y carga diferida de imágenes. Es de pago.

** W3 Total Cache

Popular y semi gratuito. A mí no me gusta, porque poniendo en la balanza lo que ocupa en el sitio no soluciona ni mucho menos la optimización de WordPress. Además es incompatible con algunos themes.

** WP Super cache

Gratuito. Tampoco es la panacea, pero tiene millones de instalaciones es otro ejemplo de un plugin de caché open source con millones de instalaciones. Su configuración es muy sencilla.

>>Para optimizar la carga de imágenes.

** Smush.it

Si lo instalamos, cada vez que carguemos una imagen, el plugin la optimizará automáticamente. Además, nos permite optimizar las imágenes en bloques que ya tenemos instaladas.

** CW Image Optimizer

Es muy parecido al anterior en cuanto a mejora del tamaño de imágenes. Los he probado ambos, y aunque éste no me disgusta, me quedo con el anterior.

** ShortPixel

https://shortpixel.com/pricing-one-time

De pago, permite comprimir automáticamente todas las imágenes, pero también las que tienes ya en el sitio web instaladas.

>> Eliminar recursos que bloqueen el renderizado

Para seguir con la optimización web con plugins, hay recursos que bloquean el primer renderizado de la página. Es uno de los avisos que señala Page Speed Insights, que nos recomienda mostrar los elementos JS/CSS críticos insertados y pospongamos todos los JS/styles que no sean críticos. 

Page Speed Insights nos recomienda algunos plugins para solucionar este problema que retrasa la carga de nuestra web. Vamos a ver varios de ellos:

*** Autoptimize

Autoptimize puede agregar, minimizar y guardar en caché scripts y estilos, inyecta CSS en el encabezado de la página de forma predeterminada, elimina el CSS crítico y difiere los scripts al pie de página. Minimiza también los códigos javascript y CSS, puede optimizar y cargar de forma lenta imágenes, optimizar Google Fonts, async JavaScript no agregado, eliminar el emoji cruft del núcleo de WordPress y más.

*** Fast Velocity Minify

Este plugin reduce las solicitudes http, combina archivos CSS y Javascript en grupos de archivos, mientras utiliza el menor número de archivos posible. Reduce los archivos CSS y JS en el frontend durante la primera solicitud. Una vez ha procesado la primera petición, el resto de páginas recibirán el mismo archivo estático.

*** Lite Speed Cache

Este es un complemento con distintas funciones de optimización que, además, es compatible con WordPress Multisitio.

>> Codifica las imágenes de forma eficaz

Lo que se pide en este caso es que las imágenes tengan el tamaño adecuado para que, en el momento de cargar la página web, el servidor pueda entregarlas rápidamente.

*** Tratamiento previo y Ajustes WordPress

Es muy importante que realicemos un tratamiento previo de las imágenes, antes de subirlas a nuestra página web. Si las tenemos en tamaño muy grande, de varios megas, lo mejor es que las reduzcamos de tamaño con cualquier programa de retoque, por ejemplo Photoshop.

Las podemos dejar en un tamaño de 700 u 800 pixels, en función del tamaño máximo que tengamos configurado nuestro WordPress.

Por otra parte, hay que tener en cuenta que WordPress transforma cada una de las imágenes que subimos a la web en tres tamaños: grande, mediano y pequeño.

Por lo tanto, cada imagen subida la vamos a tener por triplicado en nuestro sitio. Si queremos evitarlo, podemos realizar unos ajustes en la Configuración de nuestro WordPress.

Los tamaños de nuestras imágenes los podemos consultar y modificar a través de la pestaña AJUSTES y dentro de ella, en MEDIOS. En mi caso suelo dejar solamente el tamaño de Miniatura en 150 y el tamaño Medio y tamaño Grande en 0.

*** Squosh.app

Esta aplicación nos ayudará a reducir los tamaños de nuestras imágenes antes de subirlas a nuestro sitio web. Es fácil de usar y muy intuitiva. Además de que tienen la ventaja de que es una herramienta online que no necesitamos descargar en nuestro ordenador.

Simplemente selecciona la imagen, súbela y verás como automáticamente queda reducida a más de la mitad del tamaño. Puedes continuar reduciendo el tamaño de la imagen usando la barra derecha que aparece en pantalla.

es bueno que cada imagen subida a la web no tenga más de 30 ks

Cuando tengas la imagen reducida a las dimensiones que te interesan, descárgatela y súbela a tu sitio web. Es bueno que cada imagen subida a la web no tenga más de 30 ks.

También podemos compaginar este trabajo previo con lo siguientes plugins.

  1. Smush.
  2. www Image Optimizer.
  3. WP-Optimize.
  4. Short Pixel Adaptative.

Mejorar la velocidad modificando el archivo htaccess

Hemos visto como hacer una optimización web plugins, pero también podemos acelerar la carga de nuestra web sin usar ninguno de estos plugins, pero para ello necesitaremos unos conocimientos mayores de programación web. Lo haremos modificando el archivo htaccess.

No es nada complicado, aunque es recomendable saber lo que se está haciendo y, sobre todo, hacer una copia de seguridad de nuestra web antes de introducir ningún cambio. Lo vamos a explicar en otro post, el II de la serie de optimización web en WordPress que empezamos en éste.

Si te ha gustado o te ha servido este artículo, te pido que lo compartas y lo valores para ayudar a otros usuarios.

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (3 votos, promedio: 3,67 de 5)
Cargando...