¿Sabes cómo utilizar los servidores de Google para cargar la librería jQuery?


Las plantillas de prestashop, cargan la librería jQuery localmente (del propio servidor), con unas modificaciones la cargaremos desde los servidores (CDN) de Google. Con esto mejoraremos la velocidad de carga de nuestra web, principalmente gracias a estos aspectos:

  • Peticiones simultáneas.
  • Disminución de latencia.
  • Mejor almacenamiento en caché

Peticiones simultáneas.

Los navegadores limitan el número de peticiones que le hacen a los servidores (para evitar sobrecargarlos innecesariamente). Cada archivo CSS, JS, imágen... representa una petición. En algún caso, el máximo de peticiones simultáneas puede ser 2, esto significa que el navegador se descargará como máximo un par de archivos simultáneamente.

Como las peticiones simultáneas van por servidor, al utilizar jQuery desde los servidores de google, el navegador podrá realizar 3 peticiones simultáneas: dos a nuestro servidor y una al servidor de Google.

Disminución de latencia.

El CDN (red de distribución de contenido) de Google cuenta con servidores en varios lugares (países). A cada usuario se le sirven los archivos desde el servidor más cercano, por lo que disminuye la latencia (tiempo de respuesta).

Mejor almacenamiento en caché

Normalmente el navegador del usuario no se descarga la librería al entrar en nuestra web. Seguramente, habrá consultado otras páginas que hayan hecho uso de ésta y la tendrá almacenada en la caché, por lo que devuelve el archivo local (en caché) y no hace la petición, lo que mejora notablemente la velocidad.


Código para cargar jQuery remotamente

Tenemos que sobrescribir el controlador del frontoffice, por lo que creamos el archivo (tal vez ya existe): override/controllers/front/FrontController.php

Añadimos el siguiente código:

<?php
class FrontController extends FrontControllerCore {
    public function setMedia() {
        parent::setMedia();
        $key = array_search(_PS_JS_DIR_ . 'jquery/jquery-1.11.0.min.js', $this->js_files);
        if ($key !== false)
            $this->js_files[$key] = '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js';
    }
}

* Ten en cuenta que en este caso se reemplazará el fichero "jquery-1.11.0.min.js" local por el remoto, tu template prestashop puede estar utilizando otra versión de la librería.

¿Preparado para empezar tu proyecto?

¡Comencemos!