Volver a Proyectos Listado de Artículos

Trucos para mejorar la velocidad de tu Sitio web

Luis Ruiz

Escrito por Luis Ruiz

A lo largo de este artículo mostraremos código o recomendaciones para mejorar la carga de tu sitio web, algunos orientados a WordPress

En esta página voy a ir guardando algunos consejos que he ido poniendo en Twitter para mejorar la velocidad de tu sitio web. Muchos de ellos están orientados a WordPress.

Optimizar webs multiidioma realizadas con WMPL

Si te manejas con CSS, y prefieres dar estilo al menú de WPML, recuerda eliminar su CSS, así evitas reescribir sus estilos aumentando tu CSS y te ahorras una petición.

Buscamos en la vista de código del navegador el ID que tiene el link del CSS y lo ponemos en el código. En este caso era « <link rel=»stylesheet» id=»wpml-menu-item-0-css» href=»…. .css»> »

// Remove CSS WPML
define('ICL_DONT_LOAD_LANGUAGE_SELECTOR_CSS', true);
add_action( 'wp_enqueue_scripts', 'bk_dequeue_unnecessary_wpml', 20 );
function bk_dequeue_unnecessary_wpml() {
    wp_dequeue_style( 'wpml-menu-item-0-css' ); // ID del link del CSS a eliminar
    wp_deregister_style( 'wpml-menu-item-0-css' ); // ID del link del CSS a eliminar
}

Optimizar formularios «Contact Form 7»

Si utilizas el plugin Contact Form 7 te carga ficheros CSS y JS en todas las páginas. Añadiendo esté código en la acción wp_enqueue_scripts solo lo llamamos en la página de contacto.

if ( !is_page_template('page-templates/contact.php') ) {
    // Si no estamos en la página de contacto quitamos los ficheros del form.
    wp_dequeue_script('contact-form-7'); // Quita los ficheros JS.
    wp_dequeue_style('contact-form-7');  // Quita los ficheros CSS. 
}

Cómo evitar poner imágenes en el fichero css

En algunas ocasiones necesitas insertar flechas en el CSS para indicar la dirección en un slider, apertura de desplegables, etc. Normalmente, añadimos una url de una imagen o la ponemos en base64. Los dos casos anteriores afectan a la carga del CSS. El primero tiene que hacer una petición retrasando la carga del CSS, y el segundo añade peso al fichero CSS.

Siempre que sea posible, lo mejor es sustituirlo por caracteres ASCII. Para la flecha derecha podemos usar la que vemos en esta url y la izquierda en esta otra, y lo aplicaríamos como se muestra en el siguiente código.

.arrow-left:after{
   content: '‹';
   font-weight: 700;
   color: #ff0000;
}