¿Has pensado alguna vez en optimizar WordPress? ? ¿y en mejorar tu SEO en Google o la velocidad de tu web? Si la respuesta a cualquiera de estas preguntas es que si, aquí te regalo unos trucos que iré actualizando para que puedas sacar el 1000% de rendimiento de tu pagina diseñada con WordPress.
Cómo cambiar la molesta etiqueta PARRAFO en las imágenes de WordPress
Introduciendo este código en el fichero functions.php de nuestro tema conseguiremos cambiar esa etiqueta, que poco tiene que ver con una imagen por la etiqueta de HTML5 FIGURE. Esto solo uno de los mucho consejos que iré publicando para ayudar a que todos podamos mejorar nuestro posicionamiento en buscadores.
<script>
function cambiar_img_por_figure( $content )
{
$content = preg_replace(
'/<p>\\s*?(<a rel=\"attachment.*?><img.*?><\\/a>|<img.*?>)?\\s*<\\/p>/s',
'<figure>$1</figure>',
$content
);
return $content;
}
add_filter( 'the_content', 'cambiar_img_por_figure', 99 );
</script>
Si te estás preguntando donde está el fichero functions.php, la respuesta es en la raíz de la carpeta de tu tema. Es un fichero obligatorio para cualquier plantilla de WordPress.
Cómo mover ficheros CSS del header al footer de nuestro WordPress
Bien. Para mover los ficheros CSS del header al footer, primero debemos de cortarlos del footer con una función PHP, que deberá de localizarse en el fichero functions.php de tu tema.
/*----------------------------------------MOVER CSS A FOOTER---------------------------------------*/
function remover_css() {
//Entre paréntesis escribiremos entre comillas,
//el ID de la hoja de estilos, sin el "-css" del final si lo tiene.
wp_dequeue_style('layerslider');
wp_deregister_style('layerslider');
wp_dequeue_style('jet-elements');
wp_deregister_style('jet-elements');
wp_dequeue_style('elementor-icons-shared-0');
wp_deregister_style('elementor-icons-shared-0');
wp_dequeue_style('wc-block-style');
wp_deregister_style('wc-block-style');
}
add_action( 'wp_enqueue_scripts', 'remover_css', 9999 );
add_action( 'wp_head', 'remover_css', 9999 );
aquí un buen ejemplo de cómo localizar el ID de los CSS abriendo el inspector de elementos de Firefox o de Google Chrome.
Una vez hecho esto, deberemos de pegar en el footer los estilos CSS previamente cortados de la cabecera de nuestro sitio web.
function cargar_footer_styles() {
wp_enqueue_style( 'layerslider', get_template_directory_uri() . '/css/layerslider.css' );
wp_enqueue_style( 'jet-elements', get_template_directory_uri() . '/css/jet-elements.css' );
wp_enqueue_style( 'elementor-icons-shared-0', get_template_directory_uri() . '/font-awesome/css/fontawesome.min.css' );
wp_enqueue_style( 'wc-block-style', get_template_directory_uri() . '/woocommerce/packages/woocommerce-blocks/build/style.css' );
};
add_action( 'get_footer', 'cargar_footer_styles' );
//Se traduciría así
wp_enqueue_style( ‘id de tu fichero css’, get_template_directory_uri() . ‘/css/HojaDeEstilosACargar.css’ );
Hay que comentar que para hacer esto lo primero y más indispensable, para que las funciones o cualquier otro código php surja efecto, lo primer es abrir el código con <?
Disminuir el tiempo de carga de las imágenes en nuestra página web
Hemos realizado un experimento de carga de imágenes desde un servidor remoto y desde la propia web diseñada con WordPress.
Tal como se puede apreciar en ambas imágenes, en la imagen numero uno ganamos casi tres segundos en su carga, así como dos segundos en la numero 2.
Este experimento ha sido realizado solo con un par de imágenes sin optimizar y en un paquete de dos, pero… ? ¿Qué pasaría se en vez de esto se tratase de una tienda realizada con Woocommerce o un blog en el que aparecen un montón de imágenes?.
Lo que sucedería, sería que estaríamos perdiendo muchísimos segundos muy valiosos para los usuarios que visitan diariamente la web y aun más valiosos para nosotros, ya que este tiempo puede ser la diferencia entre que Google nos posicione en primera página o no.
Cómo insertar imágenes desde una URL
Pincha en la galería para poder ver bien cómo se realiza el proceso de inserción de las imágenes a través de URL ?
Recomendaciones
- Siempre debemos de llevar a cabo estas prácticas, desde un servidor de la nube personal como Dropbox, Google Drive o OneDrive entre muchos.
- No enlaces demasiadas imágenes de una misma página web. Esto puede suponer que si tienes demasiado tráfico podrás crear un grabe problema a dicha web.
- Esto sirve como remedio, cuando ya no sabemos como podemos optimizar más la carga de nuestras imágenes.
La herramienta que he utilizado para medir la velocidad de carga de las imágenes ha sido GTmetrix
Cómo mover ficheros JS al footer
Eliminar ficehros JS del header
<?php
function remover_js() {
//Tal como se ve en el ejemplo, escribimos entre comillas simples el ID del ficheros JS a mover.
//Si no tiene ID, casi siempre suele ser el nombre del plugin 'NombreDelPlugin.js'
wp_dequeue_script('NombreDelScriptID.js');
wp_deregister_script('NombreDelScriptID.js
}
add_action( 'wp_enqueue_scripts', 'remover_js', 9999 );
add_action( 'wp_head', 'remover_js', 9999 );
Pegar los ficheros JS en el footer previamente eliminados
<?php
function cargar_footer_scripts() {
wp_enqueue_script( 'tu-archivo-js', get_template_directory_uri() . '/js/archivo.js' );
};
add_action( 'get_footer', 'cargar_footer_scripts' );
Este método de desplazamiento de los ficheros JS del header al footer, solo debe de utilizarse, en caso de que tu plnatilla/theme o algún plugin esté cargando ficheros en el head, sin ser estrictamente necesario.
En el head solo deben ir los ficheros imprescindibles para acelerar la carga de la página web.
