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.
Prólogo
Tabla de contenidos
¿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.
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.
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.
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
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.
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.
- 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).
- A continuación, realizaremos la acción que hemos grabado en lote. Para hacer esto deberemos ir a Archivo > Automatizar > Lote.
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.
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)
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.
Una vez lo tengas minificado, sustitúyelo en tu hoja de estilos.
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.
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!
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.
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.
