optimizar wordpress sin plugins

Yepalei! David Zamora por aquí. En esta ocasión quiero hablar sobre un tema que interesa a todo el mundo, por lo menos a todas esas personas que tengan una página web en WordPress o trabajen con este CMS.

En este artículo veremos como hacer que nuestro WordPress cargue más rápido y lo vamos a hacer sin instalar ni un plugin.

A mi personalmente me gusta hacer todas las modificaciones posibles a través de código e instalando el mínimo de plugins posibles.

Algunas de las formas de optimización que veremos a continuación son a través de archivos, como htaccess y functions.php. Así que primero, veremos un poco por encima que son estos archivos.

Antes de ponernos manos a la obra, voy a comentar algunas cosas que deberías saber antes de empezar a optimizar tu wordpress.

Para realizar estos cambios, deberías saber un poco de diseño web en WordPress.

¿Qué es htaccess?

El fichero htaccess es un fichero especial que permite definir directivas de configuración específicas de cada directorio en Apache Server.

archivo htaccess

En nuestro caso, cuando instalamos WordPress, ya se crea automáticamente, así que no hará falta crear este archivo manualmente.

¿Qué es functions.php?

El archivo functions.php es un archivo que se encuentra dentro de nuestra plantilla de WordPress y sirve para dotar de funciones específicas nuestro tema.

archivo function php

Se suele utilizar para crear, cambiar y modificar cosas específicas de nuestro theme. 

Cómo Optimizar WordPress sin plugins

En esta pequeña guía he puesto algunos trucos que son relativamente fáciles de implementar. Se que hay muchas otras maneras de optimizar WordPress sin plugins. A continuación he puesto las que yo sé, las que considero más fáciles de hacer y que no requieren tocar muchas cosas.

Y bueno, una vez hecha esta pequeña clausula para cubrirme un poco las espaldas, empecemos con la optimización.

Optimizar imágenes en WordPress

Vamos a empezar con una facilita. A estas altura ya deberíamos saber que las imágenes son un punto crítico en la carga de nuestro WordPress y es indispensable que las sirvamos comprimidas para aligerar la carga de la web.

Además de reducir el tamaño de las imágenes, es conveniente que tengan el mismo tamaño que el que se va a mostrar en la web.

la importancia del tamaño

Sí, el tamaño si importa (o al menos eso dice Google)

Existen varias maneras de comprimir las imágenes, vamos a verlas a continuación.

Plugins para optimizar imágenes en WordPress

Encuentro bastante cómodo el hecho de automatizar este proceso mediante un plugin. Pero para ser sinceros, esta opción es la que menos me gusta, ya que prefiero subir las imágenes comprimidas directamente al servidor.

Los plugins más conocidos para comprimir imágenes son:

  • Compress JPEG & PNG images (de Tinypng)
  • Optimus
  • Smush
  • Imsanity
  • Imagify
Aunque estos plugins no son santo de mi devoción, los encuentro especialmente útiles especialmente a la hora de trabajar con varios redactores.

Comprimir imágenes con aplicaciones online

Con este tipo de aplicaciones no hace falta descargar nada y son gratuitas. Dejo una lista de las más comunes.

  • Tinypng
  • Compressor.io
  • Kraken
  • imagecompressor.com

Comprimir imágenes con Photoshop

Podemos comprimir nuestras imágenes con Photoshop. Esta es la forma que utilizo yo normalmente para comprimir las imágenes. Es un poco más manual que las demás maneras, pero me gusta afinar yo mismo la calidad de las imágenes en relación a la compresión.

como comprimir imágenes en photoshop

Y por si alguien está pensando que esta es una forma demasiado manual de hacerlo y que nos puede llevar mucho rato, os dejo aquí una forma de hacerlo en modo “bulk” y comprimir todas las imágenes que quieras de forma automática.

Comprimir imágenes en Photoshop en lote

Si queremos optimizar muchas imágenes y no queremos hacerlo una por una, podemos hacerlo de la siguiente manera.

  1. Grabamos una acción en Photoshop cambiando el tamaño de la imagen(Ctrl + I) y luego hacemos la compresión (Alt + Ctrl + Mayus + S).

accion photoshop 1

  1. A continuación, realizaremos la acción que hemos grabado en lote. Para hacer esto deberemos ir a Archivo > Automatizar > Lote.
Antes de realizar esta acción en lote, es recomendable revisar que todas las imágenes sean del mismo formato (png o jpeg).

Desactivar emojis de WordPress

Los emojis son esos símbolos que google enseña cuando le da la gana en las SERPS (parece que ya se ha aburrido de mostrarlos) y que si no utilizas en tu wordpress, puedes desactivarlos de manera sencilla.

El propio WordPress carga un script en el head de tu página o mejor dicho… carga el script en cada p**** (puñetera) página, para dar soporte a estos iconitos.

script de emoji en wordpress

Entonces, para desactivar estos emojis y aligerar la carga de nuestro WordPress podemos agregar el siguiente código en nuestro functions.php:

// Remover Emojis de WordPress

remove_action('wp_head', 'print_emoji_detection_script', 7);

remove_action('wp_print_styles', 'print_emoji_styles');

remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );

remove_action( 'admin_print_styles', 'print_emoji_styles' );

(simplemente copia y pégalo debajo del todo de tu archivo functions.php)

Recomiendo hacer esto a través de FTP o desde nuestro panel de administración (Cpanel/Plesk), donde tengas acceso a los archivos de WordPress, concretamente, en el archivo functions.php de nuestro theme*.

Minimizar el código CSS

Nuestro theme de WordPress tiene una hoja de estilos (style.css) que sirve para determinar la apariencia de nuestro sitio. La estructura de CSS se compone de reglas y estas se componen de un selector, una propiedad y un valor:

Un selector {

Una propiedad: Y un valor;

}

Cómo ves, consta de 3 líneas de código por cada selector, como mínimo. Y si además, utilizamos una plantilla multipropósito, es probable que tengamos miles de líneas de código en nuestra hoja de estilos styles.css.

Así que lo mejor, es comprimir estas líneas de código para que ocupe menos espacio.

Puedes comprimir tu código CSS con cualquier minificador de CSS online como cssminifier.com o cualquier otro.

ejemplo de css minificado

Una vez lo tengas minificado, sustitúyelo en tu hoja de estilos.

Antes de comprimir el código CSS de tu hoja de estilos es muy importante que hagas una copia de seguridad (cópialo en un block de notas mismo). De esta manera, si algo sale mal, siempre tendrás el código original a mano.

Especificar la Caché del navegador

La caché de navegador es un sistema de caché que está en el navegador y se activa cuando el visitante accede a tu página web.

Este sistema guarda información de la página en el navegador, como por ejemplo las imágenes y cuando el usuario vuelve a tu página web no hace falta que descargue estos archivos otra vez.

De esta manera, tu página irá más rápida. Tus visitantes y tu hosting te lo agradecerán.

Este sistema de cache se puede implementar fácilmente con un plugin de gestión de cache como W3 Total Cache, WP Rocket, Wp Fastes Cache, etc. pero si lo hiciera con un plugin, tendría que cambiar el titulo del post, así que vamos a hacerlo de forma “manual”, especificando la caché del navegador mediante htaccess.

foto de archivo htaccess via plesk

Para ello nos dirigiremos al directorio principal de tu WordPress y abriremos el archivo htaccess (en un bloc de notas normalmente) y copiaremos y pegaremos el código que aparece a continuación.

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 week"

ExpiresByType text/css "access plus 1 month"

ExpiresByType application/atom+xml "access plus 1 hour"
ExpiresByType application/rdf+xml "access plus 1 hour"
ExpiresByType application/rss+xml "access plus 1 hour"

ExpiresByType application/json "access plus 0 seconds"
ExpiresByType application/ld+json "access plus 0 seconds"
ExpiresByType application/schema+json "access plus 0 seconds"
ExpiresByType application/vnd.geo+json "access plus 0 seconds"
ExpiresByType application/xml "access plus 0 seconds"
ExpiresByType text/xml "access plus 0 seconds"

ExpiresByType image/x-icon "access plus 1 month"
ExpiresByType image/vnd.microsoft.icon "access plus 1 month"

ExpiresByType text/html "access plus 1 minute"

ExpiresByType text/javascript "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 months"
ExpiresByType application/x-javascript "access plus 1 months"

ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/svg+xml "access plus 1 month"
ExpiresByType image/bmp "access plus 1 month"
ExpiresByType image/webp "access plus 1 month"

ExpiresByType audio/ogg "access plus 1 month"

ExpiresByType video/mp4 "access plus 1 month"
ExpiresByType video/ogg "access plus 1 month"
ExpiresByType video/webm "access plus 1 month"

ExpiresByType text/plain "access plus 1 month"
ExpiresByType text/x-component "access plus 1 month"

ExpiresByType application/manifest+json "access plus 1 week"
ExpiresByType application/x-web-app-manifest+json "access plus 0 seconds"
ExpiresByType text/cache-manifest "access plus 0 seconds"

ExpiresByType application/pdf "access plus 1 month"

ExpiresByType application/x-shockwave-flash "access plus 1 month"

ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
ExpiresByType font/eot "access plus 1 month"
ExpiresByType font/opentype "access plus 1 month"
ExpiresByType application/x-font-ttf "access plus 1 month"
ExpiresByType application/font-woff "access plus 1 month"
ExpiresByType application/font-woff2 "access plus 1 month"
ExpiresByType application/x-font-woff "access plus 1 month"
ExpiresByType font/woff "access plus 1 month"

</IfModule>
## EXPIRES CACHING ##

¡Recuerda guardar los cambios!

ℹ️ Si no lo encuentras es porque el documento htaccess suele estar oculto por motivos de seguridad, así que deberás ir a las opciones de la carpeta y seleccionar mostrar los archivos ocultos.

Utilizar imágenes en formato vectorial (SVG)

Las imágenes en formato vectorial o SVG son archivos de imágenes que se componen de líneas y formas independientes definidos por atributos matemáticos. Sí, he hecho un remix de la definición de Wikipedia.

Este tipo de archivo (.svg) no está soportado por WordPress, así que dependeremos de agregar una función en nuestro functions.php (muy simple) o usar un Plugin para así poder usar este tipo de imagen.

Habilizar SVG mediante functions.php

Para habilitar las imágenes SVG en WordPress deberemos agregar un pequeño trozo de código PHP en nuestro archivo functions.php (de nuestro theme). De esta manera se podrán subir y ver en nuestra página web.

Código:

function add_file_types_to_uploads($file_types){

$new_filetypes = array();

$new_filetypes['svg'] = 'image/svg+xml';

$file_types = array_merge($file_types, $new_filetypes );

return $file_types;

}

add_filter('upload_mimes', 'add_file_types_to_uploads');

Copiar y pegar el código al final de tu hoja functions.php.

Habilitar SVG mediante plugin

Si he de ser sincero, creo que habilitar las imágenes SVG mediante un plugin es la mejor opción si usamos este tipo de archivos con regularidad, ya que nos permite visualizar en la biblioteca de medios, entre otras cosas útiles.

Los dos plugins más usados para esta función son:

Bonus: Optimizar Contact Form 7

Si utilizas el plugin de Contact Form 7 te voy a enseñar un truco para que tu WordPress vaya un pelín más rápido.

Me encanta este plugin, es fácil de configurar y “bastante liviano”. Además es muy versátil, ya que lo puedes integrar muy fácilmente en cualquier sitio de tu página web.

El problema de Contact Form 7 es que carga los propios scripts y archivos CSS del plugin en todas y cada una de las páginas de nuestro WordPress. Esto no es necesario, ya que solamente debería cargar estos archivos en las páginas de tu WordPress donde haya un formulario.

estilo de contact form 7

Para no cargar en todas las páginas los archivos de Contact Form 7 podemos escribir esta función en nuestro archivo functions.php de nuestra plantilla:

// Cargar archivos contactf7 solo en páginas que tengan el formulario

function rjs_lwp_contactform_css_js() {

    global $post;

    if( is_a( $post, 'WP_Post' ) && has_shortcode( $post->post_content, 'contact-form-7') ) {

        wp_enqueue_script('contact-form-7');

         wp_enqueue_style('contact-form-7');

    }else{

        wp_dequeue_script( 'contact-form-7' );

        wp_dequeue_style( 'contact-form-7' );

    }

}

Si utilizas reCAPTCHA de Google te puede interesar artículo sobre como optimizar contact form 7, te lo explico todo aquí.

Ventajas y desventajas de Optimizar WordPress sin plugins

Hacer las cosas sin plugins puede parecer muy «guay» pero como todo en esta vida, tiene su parte buena y su parte mala.

A continuación, un pequeño análisis sobre las ventajas y desventajas que supone optimizar WordPress sin plugins.

Ventajas de Optimizar WordPress sin plugins

  • Tu WordPress cargará un poquito más rápido, ya que no contendrá tanto código sobrante.
  • Es una buena manera de empezar a aprender desarrollo web.
  • No requiere actualizaciones.
  • Menos riesgo de vulnerabilidades (sobre todo si utilizas plugins que no se actualizan constantemente).

Desventajas de Optimizar WordPress sin plugins

  • No es tan fácil como instalar un plugin.
  • Necesitas conocimientos en diseño y desarrollo web.
  • Si no sabes lo que estás haciendo puedes causar errores graves en tu WordPress.

Conclusiones sobre Optimizar WordPress sin plugins

Como ya he comentado en alguna ocasión, a mi no me gusta cargar WordPress con muchos plugins y procuro instalar los menos posibles.

Me gusta hacer mis propios plugins yo mismo, mediante código o por lo menos intentarlo.

Pero he de admitir, que esto de hacer tus propios plugins queda muy bien, pero no siempre es lo más recomendable.

A veces es mejor utilizar un plugin, especialmente si es alguna funcionalidad un poco compleja.

Así que si no lo ves claro, ¡No te líes! Y recuerda, antes de hacer cualquier cambio… ¡Haz una copia de seguridad!

Y hasta aquí este artículo sobre cómo optimizar WordPress sin plugins. Espero que te haya sido de utilidad y ya sabes, nos vemos en los comentarios de abajo.

Deja una respuesta