Optimizar una web en WordPress

Ezequiel Piñero 3 comentarios

¿Sabías que en Nicalia dispones de Hosting con Litespeed + Caché y Cloudlinux para tu blog en WordPress? Con backups cada 12 horas y soporte 24/7. Consigue el hosting más rápido del mercado para tu sitio web haciendo clic aquí

En la actualidad la inteligencia artificial de los buscadores en general y Google en concreto nos hace trabajar mucho sobre la optimización de las páginas o portales web orientándolo todo hacia la mejora de la experiencia de navegación de los usuarios.

Hace casi un año Google anunciaba que las web que no pudieran ver visionadas amigablemente desde dispositivos móviles serían penalizadas arriesgándonos a que otras que fueran mobile friendly o responsivas estarían mejor posicionadas incluso aunque las nuestras tuvieran un contenido de calidad superior. Ojo que el aviso se correspondía para búsquedas que se realizaran desde dispositivos móviles y no para todas las búsquedas.

Si tenemos en cuenta que el número de visionados desde terminales móviles en general y smartphones en particular supera el 70% de los equipamientos comprenderemos el por qué de estas medidas por parte del buscador por antonomasia.

Para eso Google nos sirve cientos de herramientas, unas de medición, otras de ayuda a la optimización.

Para hacer que nuestras web en wordpress sean responsives o mobile friendly observaremos siempre las características de las plantillas que instalamos, ya no solo basta que tengan actualizaciones continuas, si no que indique claramente que lo son.

Si nos empeñamos en usar una plantilla que permanece sin actualizaciones no solo nos arriesgamos a ser penalizados por Google, si no que el riesgo de que contenga código vulnerable es muy alto. En cualquier caso con el superplugin Jetpack disponéis de una opción que vuelve responsive una plantilla que no lo es, no lo he probado y por tanto no puedo comentar resultados (aunque me temo que en la actualidad puede generar cierta sensación de falsa seguridad.

Para ilustrar este manual voy a usar mi propia web http://desmarcateya.net, construida sobre wordpress y con plantilla premium Stockholm (no vamos a incluir ningún enlace de afiliación)

Los plugins instalados y operativos son:

Procedimiento y herramientas para la optimización de la web

Lo primero, si no tenemos capacitaciones avanzadas es tomarlo con calma, saber todo lo que hacemos (incluso anotarlo en alguna especie de documento) y sentirnos tranquilos de todo.

Antes de empezar la recomendación siempre partirá por hacer copia de seguridad tanto de los ficheros como de la propia base de datos. (ver en artículos relacionados)

Las herramientas necesarias:

  • Blog de notas (windows) Gedit (Linux) (normalmente preinstalados en vuestros SO)
  • Clinte FTP (Filezilla.org) https://filezilla-project.org/ (versiones Windows o GNU/Linux)
  • Por supuesto todos estos pasos los realizaremos con una conexión a Internet 😛
  • Para disponer de los datos de acceso por FTP deberemos acceder a nuestro panel de control (cPanel) si no los tenemos ya.

Os paso alguna captura de pantalla de la web y de algunos procesos.

01- Web DSYA

Comprobar el estado de una web

Podemos visitar la web https://developers.google.com/speed/pagespeed/insights/ para ver la optimización de nuestra página web. También nos indicarán los cambios necesarios para mejorar la puntuación.

pagespeed-dmy

Como se puede observar existen bastantes deficiencias en el concepto de la web, son temas de optimización de cara al cliente, pero sin duda merece que las observemos y corrijamos.

4- experiencia del usuario

De todas maneras si observamos la valoración sobre la experiencia del usuario veremos que tampoco está tan mal, pero podemos mejorar mucho sobre los tiempos de carga y por tanto conseguir una puntuación mejor.

Acciones a realizar

Si desplegamos las recomendaciones a corregir veremos que nos ofrece la de habilitar la compresión mediante gzip o deflate.

Si observamos el siguiente post encontraremos dos maneras para habilitar la compresión gzip, personalmente no he encontrado la opción de la inclusión en options.php por lo que he tenido que tocar el .htacess. https://ayudawp.com/gzip-sin-plugins/

Al tocar ficheros del sistema como el .htacess ya que gestiona las partes importantes de la web, si no estás seguro no toques y pide ayuda. En este caso es algo muy sencillo, pero no te confíes. Descargamos el fichero con Filezilla y lo editamos con gedit o el blog de notas.

Nota: Importantísimo usar ficheros de edición en ASCII ya que si usamos office u Open/LibreOffice incluimos codificación que no va a comprender nuestro servidor y podría provocar que se corrompa toda nuestra web.

Nota2: Antes de descargar el fichero podemos hacer una copia de seguridad en el mismo servidor, bien cambiándole el nombre (Por ejemplo htaccess_original (o lo que os apetezca))

Nota3: Como podéis observar el .htaccess tiene un punto delante, esto hace que sea invisible para algunos sistemas operativos al descargarlo, por lo que deberemos pulsar [ctrl] H para habilitar el visionado de ficheros ocultos. (en windows no se si funciona con este comando (demasiado tiempo en el lado del mal).

5- captura FTP

Descargamos el fichero .htaccess (de la columna izquierda a la derecha, sabiendo donde lo colocamos por lo que comentaba que podía estar invisible) También podemos quitarle el punto para hacerlo visible (siempre después de haber hecho una copia de seguridad en el mismo servidor.

 Incluir GZIP de todo el contenido.

Escribir en el .htacess este código:

# BEGIN GZIP

<ifmodule mod_deflate.c>

AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript

</ifmodule>

# END GZIP

Podemos comprobar su optimización pasando antes y después por: http://www.gidnetwork.com/tools/gzip-test.php y este es el resultado después de la compresión.

6- comprobación de Gzip

Y si repetimos el proceso en Google PageSpeed Insights

resultados-page-speed-dmy

Vemos que la puntuación ha mejorado sensiblemente y comprobamos que funcione perfectamente la web usando el navegador. La puntuación sobre la experiencia del usuario no se ha visto aumentada, ya que probablemente la compresión no produzca un verdadero cambio en la percepción, pero si en la carga y visionado de los contenidos.

Si queremos mejorar debemos tener muy en cuenta cómo gestionar la caché del navegador y por tanto volveremos a “manejar” el .htaccess ¿Quién ha dicho miedo?

Una entrada en blog que lo explica bastante bien aunque os hará que reviséis parámetros en el servidor APACHE que si tenéis contratado un hosting compartido que no vais a poder revisar… http://www.fluceando.com/optimizando-wordpress/

En esta entrada podréis observar muchas optimizaciones, pero ojo que el nivel es alto, pero como he dicho antes ¿Quién ha dicho miedo?

Especificar caché de navegador

Podemos establecer una fecha de caducidad o una edad máxima en las cabeceras HTTP de los recursos estáticos, indicamos al navegador que cargue los recursos descargados previamente del disco local en lugar de hacerlo a través de la red.
El almacenamiento en caché del navegador para recursos estáticos puede ahorrarle tiempo al usuario si este visita tu sitio en más de una ocasión.

El almacenamiento en caché de las cabeceras debería aplicarse a todos los recursos estáticos que puedan almacenarse en caché, no solo a un pequeño conjunto (como imágenes). Entre los recursos que se pueden almacenar en caché se incluyen los archivos JS y CSS, archivos de imágenes y otros archivos de objetos binarios (archivos multimedia, archivos PDF, etc.).

En general, el código HTML no es estático y no debería considerarse apto para almacenarse en caché de forma predeterminada. Debes tener en cuenta qué política de almacenamiento en caché sería la más adecuada para el código HTML de tu sitio. Ponemos expiración en un mes para que visitantes reincidentes tarden menos en disponer del contenido.

Escribir en el .htacess este código:

# turns cache on for 1 month

<IfModule mod_expires.c>

ExpiresActive On

ExpiresByType text/css «access plus 1 month»

ExpiresByType text/javascript «access plus 1 month»

ExpiresByType text/html «access plus 1 month»

ExpiresByType application/javascript «access plus 1 month»

ExpiresByType application/x-javascript «access plus 1 month»

ExpiresByType application/xhtml-xml «access plus 600 seconds»

ExpiresByType image/gif «access plus 1 month»

ExpiresByType image/jpeg «access plus 1 month»

ExpiresByType image/png «access plus 1 month»

ExpiresByType image/x-icon «access plus 1 month»

</IfModule>

<ifmodule mod_headers.c>

<filesmatch «\\.(ico|jpe?g|png|gif|swf)$»>

Header set Cache-Control «max-age=2592000, public»

</filesmatch>

<filesmatch «\\.(css)$»>

Header set Cache-Control «max-age=604800, public»

</filesmatch>

<filesmatch «\\.(js)$»>

Header set Cache-Control «max-age=216000, private»

</filesmatch>

<filesmatch «\\.(x?html?|php)$»>

Header set Cache-Control «max-age=600, private, must-revalidate»

</filesmatch>

</ifmodule>

# turns cache on for 1 month

Una vez incluido el código en el .htaccess verificamos que la web se ve correctamente en el navegador. Y si repetimos el proceso en Google PageSpeed Insights. Puede ser que no se detecten cambios en la puntuación general pero os aseguro que en el tiempo podréis observar que la experiencia de usuario es mucho más satisfactoria (sobre todo los visitantes recurrentes).
Uno de los principales problemas en wordpress puede verse en que quiere mostrar todos los contenidos a la misma vez, haciendo que nuestra web sea más atractiva, solo que algunas veces y gracias a ser visionados desde terminales móviles y con tarifas de datos que no soportan un gran volumen de tráfico puede hacer que el usuario abandona antes de completar la descarga. Para mejorar eso podemos hacer que algunos procesos de .js y .css se carguen después de la mitad superior del contenido.

Eliminar el JavaScript que bloquea la visualización y el CSS del contenido de la mitad superior de la página

Para esto usaremos un plugin: https://wordpress.org/plugins/js-css-script-optimizer/ Si añadimos las url de los *,js veremos que mejora la carga (en algunas ocasiones).

Podremos incluir procesos. js y hojas de estilo .css en una carga posterior a la mitad superior de la página, por lo que la experiencia y los tiempos de espera se verán mejorados sensiblemente.

También puede ser que no se aprecien cambios, las plantillas como las usadas por nosotros en este caso precisan de la carga de esos complementos en la mitad superior para garantizar que el visitante lo recibe todo tal y como nosotros lo tenemos programado.

Nota adiccional: Debo reconocer que en la web que os he mostrado como ejemplo no todos los cambios han sido eficientes, dado que por ejemplo para que funcione correctamente debemos hacer muchas llamadas jquery en la cabecera y que nuestro principal problema se encuentra en la optimización de las imágenes, proceso que empezamos manualmente y que por tanto se sale de la razón de este tutorial.

Ultimas optimizaciones: Si consideramos nuestra web está terminada (si alguna vez lo está) o que no vamos a tocar estructura en un tiempo, recomendamos la implantación de un plugin de mejora de la caché que hará que los tiempos de espera de nuestros clientes se reduzcan considerablemente.

Se puede mejorar la carga de las web usando un plugin de optimización de caché https://wordpress.org/plugins/wp-super-cache/

Artículo enviado por Miguel Pujante, de DesmarcateYA.net, distribuidores de Nicalia y sherpas en Social Media Marketing.

3 respuestas a “Optimizar una web en WordPress”

  1. Muchas gracias por publicarlo ninjas.

    Espero que pueda servir a muchas instalaciones que necesitan un empujoncito para mejorar su experiencia al usuario.

  2. susana dice:

    Buenos días,
    He modificado mediante FTP en .htaccess para Especificar caché de navegador y al poner el código que indicas me da error Interval Server Error. Supongo que será algún bloqueo por parte de mi FTP, ¿cómo puedo permitir que me deje poner el código?

    Gracias.

  3. Jaime dice:

    he ave maria pero es que ninguno de los blogs que encuentro sobre este tema no tiene ni el plugin ni buena calificación en page speed el tuyo es el peor calificado de todos los que he visto y la pagina de ejemplo ni se diga…

    Porque aplicaste tanto esfuerzo en hacer este articulo si tu mismo NO haces lo que dices???? No entiendo

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.


Calle Sant Marc 35, 08360, Canet de Mar, Barcelona, España|Desarrollada por Eenda Works | Diseñado por Denox