Optimizar una página web con WordPress

A lo largo de la entrada voy a mostrar como optimizar una página web con WordPress. Pero no vengo a descubrir el fuego ni a escribir nada sobre lo que no se haya escrito ya. Existen multitud de sitios especializados en WordPress de donde he sacado la mayoría de la información que he utilizado para optimizar mi propio blog. Mismos métodos que he utilizado para mejorar otra página web distinta, que será la protagonista de esta entrada.

Optimizar una página web con WordPress

Pero tampoco escribiría si no tuviese nada nuevo que ofrecer. Tengo algún que otro consejo que no figura en medios especializados. O al menos no que yo haya visto. Y también tengo en mis manos la manera de demostrar que, aunque resulte más duro, se puede rescatar una vieja instalación de WordPress, con contenido y potencial de visitas, pero con las cosas muy mal hechas en ella.

Es recomendable llevar buenas prácticas y buenos hábitos desde la instalación inicial del WordPress. Pero se pueden obtener buenos resultados aplicándolos a un WordPress desvencijado, sin actualizar y con una plantilla obsoleta.

Además, tampoco me he topado con el desarrollo de la optimización completa de un WordPress. Tan solo con una lista de consejos, más corta o más larga según la fuente que consultemos. Pero de nuevo quiero insistir, que yo no lo haya visto no significa que no exista. Puede que esté escribiendo “más de lo mismo”, pero si le resulto de utilidad a alguien me daré por satisfecho.

Os presento a la página web protagonista

Dicen que una imagen vale más que mil palabras. Pero también dicen que la primera impresión no siempre es la correcta. Aquí tenemos a la página web antigua del Periódico Entrerios, un proyecto en el que colaboro:

Optimizar una página web con WordPress

Las puntuaciones de GTMetrix lo dicen todo. Pero pese a ello, y pese a estar inactiva durante largos meses, la web era capaz de reunir unas 1000 visitas mensuales.

Detalles de la criatura

  • Hosting: 1&1 básico.
  • Plantilla de diseño: Newscast de Kriesi. Plantilla premium obsoleta desde WordPress 3.X y sin soporte.
  • Plugins: Desactualizados.
  • Optimización: Nula
  • Certificado SSL: Inexistente.

Obviaré otros detalles como la ausencia de sitemap en Google Search Console. Aunque a decir verdad, la página web no figuraba en Google Search Console asociada a ninguna cuenta. En definitiva, es un claro ejemplo de una página web creada sin una planificación.

Antes de pasarse casi un año criando polvo, la página recibió una leve optimización por mi parte. Cuando me dieron las llaves de la web el index era inmenso (7-8 MB) pero no contaba con los conocimientos que tengo ahora. No fui su creador, pero no pude ponerle remedio en un primer momento. Ahora que de nuevo me han dado las llaves, si que he podido hacerlo y os voy a contar como lo he hecho.

Optimizar una página web con WordPress: Pasos a seguir

Si la web ya está creada y el WordPress montado, como es el caso, hay que identificar lo que hay que cambiar.

  • Informarnos del plan de hosting vigente.
  • Comprobar versiones de PHP y MySQL del servidor.
  • Comprobar indexación en buscadores (Sitemap, Google Search Console, Google Analytics…)
  • Identificar plantilla y plugins instalados.
  • Realizar mediciones en Google PageSpeed Insight, GTMetrix y Pingdom Tools. Si se va a hacer un cambio de plantilla es mejor no centrarnos mucho en las alertas. Todavía.

Una vez que tengamos todos los detalles sabremos donde tendremos que actuar. En el caso que nos ocupa:

  • Mejora del plan de hosting.
  • Instalación del certificado SSL.
  • Cambio de plantilla premium.
  • Medición de valores y toma de apuntes de las alertas en Google PageSpeed Insights, GTMetrix y Pingdom Tools.
  • Actualización de plugins.
  • Desinstalación de plugins que no se vayan a utilizar o estén obsoletos/sin soporte.
  • Instalación de plugins necesarios para la funcionalidad del site y para la optimización de la web (caché, html, css, js…).
  • Optimización de imágenes
  • Habilitar compresión gzip.
  • Otras optimizaciones.
  • Medición de nuevos valores en Google PageSpeed Insights, GTMetrix y Pingdom Tools.

Optimizar una página web con WordPress: Mediciones previas

Sin tocar nada ni implementar ninguna mejora, la antigua web del Periódico Entreríos arrojaba los siguientes datos:

Optimizar una página web con WordPressPuntuación para móviles en Google PageSpeed Insight.

Optimizar una página web con WordPressValores para ordenadores en Google PageSpeed Insight.

Optimizar una página web con WordPressPuntuación en GTMetrix.

Optimizar una página web con WordPressPuntuación en Pingdom Tools.

Como podemos apreciar, la web pedía una remodelación completa a gritos.

Optimizar una página web con WordPress: Hosting

El hosting es un elemento clave para el buen funcionamiento de una página web. Y como tal, pedí a la dueña de la página web que mejorase, al menos, el plan de hosting. No quise meterle en berenjenales de migraciones, a pesar de la existencia de hostings mejores.

Como comenté en otra entrada, pese a migrar este blog de 1and1 a Raiola Networks, en general estaba contento con el desempeño de mi antiguo hosting, aunque hubiese acertado con el cambio.

A día de hoy, tiempo después, he visto acentuadas las diferencias entre ambos. Raiola Networks es muy superior a 1and1, mucho más de lo que percibí en un principio. No es de recibo que el pack “Unlimited plus” mantenga la base de datos sin actualizar (MySQL 5.1). Ni siquiera cuando cambias la versión de PHP a la versión 7.0.

En Raiola Networks, al actualizar a PHP 7.1 migraron mis bases de datos a la última versión estable de MariaDB (fork de MySQL). La última versión estable de MySQL es la 5.7 y en 1and1 usan la 5.5, manteniendo la versión 5.1 para bases de datos antiguas creadas bajo dicha versión.

No se trata de tener siempre lo último de lo último, pero tampoco versiones con tanta antigüedad. Pueden comprometer no solo el rendimiento, también la seguridad del site.

En cualquier caso, para relanzar un proyecto es suficiente. Y si es necesario, para realizar una migración hay tiempo de sobra. Por suerte, hostings buenos no faltan en el mercado.

Optimizar una página web con WordPress: Certificado SSL

El certificado SSL, más conocido como “el candadito“, ya es casi de obligatorio uso en cualquier página web seria que se precie. Las últimas versiones de los navegadores Firefox y Google Chrome pegan el chivatazo si una web no es segura. Es decir, cataloga la conexión con la web como no segura si ésta no exhibe un certificado SSL.

Además, Google ha hecho constar que, si una web es segura, el buscador la mira con buenos ojos. Así que si instalamos este certificado tendremos dos ventajas:

  • Aumento de la seguridad gracias al cifrado de la conexión entre usuario y página web. Los planes de hosting ya empiezan a llevar incorporados certificados SSL para un dominio.
  • Mejora del posicionamiento en el buscador de Google, ya que éste mira con buenos ojos a las páginas web portadoras del candadito.

Una vez aplicado el certificado es posible que nos encontremos algún pequeño problema. A pesar de su correcta instalación tendremos que tener en cuenta una serie de cosas para que no nos salga el mensajito de: “Algunas partes de esta web no son seguras“.

  • En ajustes generales de WordPress cambiaremos donde pone “http://www.miweb.com/” a “https://www.miweb.com/”.

  • Añadir la nueva dirección con https en Google Search Console. De este modo Google Analytics detectará el tráfico que llega a la nueva dirección segura.
  • Hacer uso del plugin Better Search Replace para forzar las direcciones http a https. De este modo arreglaremos el mensajito de las partes no seguras, como las imágenes. Raiola Networks, en su blog, explican los pasos a seguir a la hora de usar este plugin. Una maravilla.

    Optimizar una página web con WordPress

Optimizar una página web con WordPress: Cambio de plantilla

Como comenté anteriormente, la versión anterior de la web contaba con la plantilla Newscast. Una plantilla muy vistosa pero bastante pesada, en especial si se hacía uso del slider. Además estaba optimizada para versiones 3.X de WordPress, aunque funcionaba correctamente incluso con la 4.7.3 actual.

No contaba con soporte desde hace años, y para colmo no era responsive. Es decir, no estaba adaptada para dispositivos móviles.

Aquí la solución fue sencilla. Instalar la plantilla Generatepress Premium que descubrí en el blog de Arturo García.

Optimizar una página web con WordPress

Para no alargar demasiado la entrada, justo encima está una screenshot con toda la información de esta plantilla. En cualquier caso, quien dice Generatepress dice Génesis Framework o dice Divi. O cualquier theme específico comprado que cuente con una gran optimización y un buen soporte. Para gustos los colores.

Hasta ahora solo he tenido tiempo de probar Generatepress y estoy muy contento con los resultados. Llegado a este punto, si estás en la tesitura de cambiar plantilla, te aconsejo que busques información sobre otros frameworks y/o plantillas específicas. Antes de lanzarte toca todos los palos y lee opiniones o reviews de los frameworks/plantillas más usados.

Optimizar una página web con WordPress: Plugins

Existen plugins específicamente diseñados para hacer algo más que aportar funcionalidades extras a nuestra instalación de WordPress. Hablamos de los plugins que han sido concebidos para mejorar las prestaciones de nuestra página web.

Por un lado tenemos los plugins de caché, destinados a aumentar la velocidad de carga. Existen varios plugins de esta índole, pero el más completo, y también el más complicado de configurar, es W3 Total Cache. También existen multitud de guías que nos ayudan en el proceso de configuración.

Por otro lado tenemos plugins de optimización de código (HTML, CSS y Javascript). He utilizado con éxito el plugin Autoptimize, descubierto en esta entrada del blog de Jose Antonio Carreño, en la que nos explica como configurarlo. Además, en dicha entrada encontraréis otro plugin optimizador que, por motivos obvios, no voy a enlazar ni a mencionar aquí. Leyendo su entrada -recomiendo su lectura y el uso del plugin- lo comprenderéis.

Antes de pasar al siguiente punto, debemos tener en cuenta un apunte sobre Autoptimize. Es una opción que puede empeorar la optimización de nuestro WordPress. En este blog tuve un aumento de puntuación cuando desactivé la siguiente opción. Desconozco si será a causa de un posible conflicto con el plugin de la caché o si será cosa de mi hosting:

autoptimize

Por suerte la solución es sencilla: realizar mediciones con esta casilla activada y con la misma desactivada.

Optimizar una página web con WordPress: Optimización de imágenes

Este es, quizá, uno de los pasos más importantes y que más se notan a nivel de rendimiento. Claro está, dependerá de la construcción de nuestra página web y del papel que tengan las imágenes en ella.

Una correcta optimización de las imágenes disminuye el tamaño de la página, disminuye el uso de recursos (espacio y transferencia) y aumenta nuestra puntuación a ojos de los buscadores. Una mejora en el SEO de nuestra web con tantas ventajas a sus espaldas merece mucho la pena.

Yo siempre sigo dos pasos:

  • Manipulación de la imagen con Adobe Photoshop. Guardando la imagen en JPG con calidad 6 (media) y unas dimensiones acordes que no necesiten redimensión por parte de la propia web. Penaliza mucho meter en un widget una imagen de 1000×1000 píxeles que se tiene que ver sí o sí a 200×200 píxeles, siendo la propia página la que ofrece el reescalado. Eso hará que salte el chivato de los medidores por falta de optimización. La solución es tener dos imágenes subidas, la original en 1000×1000 y la redimensionada en 200×200. En el widget pondremos la redimensionada y la enlazaremos con un “target=_blank” a la de 1000×1000. De este modo quien quiera verla en grande solo tendrá que pinchar en ella.
  • Uso de un plugin optimizador de imágenes: Aquí tenemos dos opciones que funcionan muy bien. Smush y EWWW Image Optimizer. Tiene más fama el primero, pero yo uso y recomiendo el segundo. Smush solo optimiza imágenes en bloques de 50, haciendo insufrible su uso, mientras que EWWW Image Optimizer puede optimizar del tirón todas las imágenes que tengas alojadas en el hosting. Además, ambos optimizan las imágenes nuevas que subas a partir de su instalación. De este modo no tendrás que preocuparte de optimizar nuevas imágenes.

Optimización de una página web con WordPress

Optimizar una página web con WordPress: Habilitar compresión GZip

Habilitar la compresión GZip de nuestro hosting tiene un pro y un contra. Por un lado reducimos el tamaño de nuestra página web debido a la compresión. Pero, por otro lado, aumentamos el uso de recursos de nuestra página web.

La ganancia en rendimiento bien merece el aumento de uso de CPU y RAM de nuestro hosting. Pero tendremos que pensárnoslo si las prestaciones de nuestro hosting son limitadas. El hosting que tengo contratado, pese a ser básico, no nota la compresión GZip con 1000 visitas mensuales.

Para activar la compresión GZip tendremos que mojarnos con la edición del HTACCESS y el uso de un cliente FTP. Para la edición yo recomiendo el uso de Notepad++ y para el FTP recomiendo el uso de FileZilla. También recomiendo hacer una copia de seguridad de nuestro HTACCESS para evitar el tan temido error 500, y subsanarlo en caso de que nos salga. Las líneas que hay que añadir al archivo .htaccess activan el DEFLATE del servidor Apache y las podéis encontrar en este enlace.

Aunque existe otro método mucho más sencillo que también podéis encontrar en el enlace mencionado. Tan sencillo como activar la compresión GZip en el panel de control cPanel. Se trata de una característica que yo he podido usar en Raiola Networks para mi blog. En cambio, para 1and1 me he tenido que arremangar y hacer uso del método anterior.

Optimizar una página web con WordPressCon cPanel es sencillísimo

Optimizar una página web con WordPress: Otras optimizaciones

Gracias a las alertas de los distintos medidores pude darme cuenta de que, lógicamente, la compresión y la optimización de la web solo afecta a los archivos presentes en nuestro hosting web. Por mucho que optimices, si tienes CSS, JS o imágenes enlazadas de otros sitios, éstos no se verán afectados por toda la retahíla de cambios que hayas realizado. Un ejemplo claro:

Optimizar una página web con WordPress

Algo tan pequeño como ese logo no será muy determinante para la puntuación. De modo que tendremos que elegir entre dejarlo y mostrar la licencia o quitarlo y arriesgarnos al vacío legal. Y si lo metemos en otra página determinaremos negativamente la puntuación para dicha página.

Otro claro ejemplo es el código que podemos generar con formularios como los de Mailchimp. Si vamos a Mailchimp y generamos el código de un formulario para crear un widget (texto) de suscripción, nos encontraremos que genera lo siguiente:

Optimizar una página web con WordPress

Por suerte, ese enlace al CSS externo de Mailchimp lo podemos borrar sin problemas. De este modo, el formulario obtendrá los parámetros de estilo de nuestra página web. Finalmente nos ahorraremos que algo así puntúe, por poco que sea, negativamente.

En definitiva, se trata de revisar las alertas una por una y buscarles soluciones. Algunas serán poco menos que imposibles de solucionar por falta de conocimientos y/o porque no merezca la pena solucionarlo.

También puede ocurrir que encontremos una solución a alguna alerta, como la caducidad de la caché, implementemos la solución en .htaccess y nos encontremos con el hecho de que no nos funciona. Probablemente a causa de un conflicto con el código implementado por W3 Total Caché.

Optimizar una página web con WordPress: El antes y el después

Tras aplicar toda la retahíla de medidas de optimización que he ido detallando, llegó la hora de comprobar si ha surgido efecto y si ha merecido la pena.

Google PageSpeed Insight para móviles antes y después

Optimizar una página web con WordPress

Optimizar una página web con WordPress

Google PageSpeed Insight para ordenadores antes y después

Optimizar una página web con WordPress

Optimizar una página web con WordPress

GTMetrix antes y después

Optimizar una página web con WordPress

Optimizar una página web con WordPress

Pingdom Tools antes y después

Optimizar una página web con WordPress

Optimizar una página web con WordPress

Conclusiones

Las medidas han surtido efecto y el cambio ha sido muy notorio. Las puntuaciones han aumentado, el tamaño del index ha disminuído drásticamente y las peticiones al hosting también han disminuído.

¿Se puede optimizar aún más? Seguro que sí, trataré de seguir aprendiendo y de ir dando una vuelta de tuerca siempre que pueda. Pero no nos debemos obsesionar con las puntuaciones.

Tener unas buenas puntuaciones es más que suficiente, porque no será el factor determinante para nuestro SEO. De nada nos servirá tener una página web con unas puntuaciones que ni la propia Google… si luego nuestro contenido es pésimo. Como tampoco servirá de nada si no atacamos las palabras clave correctamente.

Las visitas llegan a nuestra página web gracias a la suma de muchos factores. Del mismo modo que nuestro posicionamiento web tampoco depende de un único factor. Pero lo que sí está muy claro es que tener una web rápida y bastante bien optimizada ayuda y mucho.

En definitiva, optimizar una página web con wordpress merece muchísimo la pena, pero no conviene obsesionarnos, porque ese esfuerzo aplicado a la optimización debemos aplicarlo también en otras áreas de la página (contenido, difusión, palabras clave, email-marketing, redes sociales…).

Deja un comentario

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

ACEPTAR
Aviso de cookies