Menú


Reduccion de peticiones internas

Reducir el número de peticiones internas, es reducir al máximos las llamadas a archivos internos: imagenes, css, js... En este punto también podríamos incluir la reducción de als peticiones a la base de datos, pero hemos decidido analizarla por separado en el punto Peticiones a la base de datos. Para llevar a cabo este punto tenemos que seguir los siguientes pasos:

Paso 1: Unificar todos los archivos css y js en 1 solo

En primer lugar debemos unificar todos los archivos en 1 solo. De esta manera, mantenemos el peso total, pero reducimos las llamadas internas a 1 sola. Si alguien pregunta como hacer esto es muy fácil. Abrimos cada uno de los archivos css y hacemos en copy paste en uno único, uno debajo del otro. Y así hasta el final. Lo mismo hacemos con los .js.

Paso 2: Reducir las peticiones de imágenes

En este paso hay que valorar la carga gráfica actual del sitio. Decidir primero si se pueden reducir sin afectar a la imágen que se quiere proyectar con la Web. Una vez analizado, y reducido al máximo las imágenes necesarias podemos pasar al paso 3.

Paso 3: Incluir varias imágenes dentro de un mismo archivo

En caso de imágenes de poca resolución, las podemos colocar todas dentro de un mismo archivo y seleccionar cada una de ellas segon sus coordenadas. Por ejemplo las banderas de paises de un selector de idiomas.

Primero generamos o copiamos la imagen flag con las banderas tal y como vemos en la imágen superior. Entonces mostramos cada una de las banderas utilizando css tal y como mostramos en el siguiente código:

Código HTML

<div id="flag"></div>

Código CSS

#flag
{
    width: 50px;
    height: 50px;
    background-image: url('https://www.seopractivo.com/img/flags.png');
    background-size: 300px 600px;
    background-position: -133px -382px;
}

Las dos primeras lineas marcan el tamaño del div con id flag

Las tres ultimas son las que nos interesa para el caso. La primera (background-image: url('https://www.seopractivo.com/img/flags.png');) coloca como imagen de fondo del div con id flag a flag.png. La segunda (background-size: 300px 600px;), indica el tamaño del la imagen de fondo. La útlima de ellas (background-position: -133px -382px;), marca las cordenadas de la cuadricula de 50x50 (50x50 porque este es el tamaño del Div que hemos decidido en las dos primeras lineas) que se mostrará en el div. Las coordenadas -133px -382px, marcarían la esquina imaginaria superior derecha de la bandera elegida.

Conclusión

El objetivo de reducir las peticiones internas, es el de reducir al máximo la llamada a archivos o las consultas a la base de datos.

Artículos relacionados