packetmanxd
Delta
SEO
Verificado por Whatsapp
¡Ha verificado su Paypal!
Como dice el título, voy a hablar sobre cómo hacer que sus páginas web carguen mucho más rápido. Aunque yo personalmente creo sitios web en PHP, intentare realizar esta guía lo más generalizada posible. Para hacer que sus páginas carguen más rápido, ustedes sólo deben recordar la siguiente regla de oro!
Menos solicitudes = más rápido carga la página
Voy a explicar esto, con dos simples ejemplos:
1er caso: Supongamos que tenemos 5 archivos CSS cada uno con tamaño de 10 kb, los cuales cargaremos en la página web N°1.
2do caso: Hemos combinado los 5 archivos CSS anteriores en un solo archivo, el cúal tendra un tamaño de 50 kb, el cual cargaremos en la página web N°2.
Si ambas páginas tienen los mismos elementos, cual de las dos páginas cargara más rápido?
Ustedes probablemente pensaran que las dos páginas cargaran al mismo tiempo, pero este no es el caso. La segunda página que tiene el archivo CSS combinado cargará mucho más rápido. ¿Por qué? esto tiene estricta relacion con la solicitud. Cuando su navegador solicita un archivo, el servidor necesita un poco de tiempo para responder con el archivo y otras peticiones, por lo cúal tiene que esperar hasta que el archivo se ha descargado por completo.
Cómo utilizar la regla?
Se podría pensar que estos cambios afectaran el funcionamiento del sitio, pero créanme que no lo hará. En cuanto a los archivos CSS, minimizar todos ellos y pegarlos en un archivo CSS grande en el orden en que estaban siendo cargados. (Asegurarse de no utilizar (@import) reglas de importación, ya que es básicamente lo mismo que usar múltiples archivos css)
Hacer lo mismo con los archivos de JS. Si están implementando jQuery, después de cada archivo copiado, inserten el siguiente código, que se hará cargo de los conflictos.
CSS en la parte superior, Scripts en la parte inferior
Incluir archivo CSS antes de </ head>, porque los archivos CSS definen cómo se vera la página. NO colocar archivo JS en la parte superior. Póngalos antes de </ body>. ¿Por qué? Si colocan los archivos JS en la parte superior, el navegador intentará descargar los archivos antes de los elementos de la página, por lo cúal aumentará el tiempo de carga (a los ojos del usuario). Los archivos JS se pueden cargar después de todo lo demás. De esta manera, no transferimos un tiempo de carga excesivo a nuestros usuarios.
En la Parte 2, abarcaré los siguientes tópicos: compresión, cache, optimización de imágenes.
Espero que esta guía les sea de utilidad.
Saludos.
Menos solicitudes = más rápido carga la página
Voy a explicar esto, con dos simples ejemplos:
1er caso: Supongamos que tenemos 5 archivos CSS cada uno con tamaño de 10 kb, los cuales cargaremos en la página web N°1.
2do caso: Hemos combinado los 5 archivos CSS anteriores en un solo archivo, el cúal tendra un tamaño de 50 kb, el cual cargaremos en la página web N°2.
Si ambas páginas tienen los mismos elementos, cual de las dos páginas cargara más rápido?
Ustedes probablemente pensaran que las dos páginas cargaran al mismo tiempo, pero este no es el caso. La segunda página que tiene el archivo CSS combinado cargará mucho más rápido. ¿Por qué? esto tiene estricta relacion con la solicitud. Cuando su navegador solicita un archivo, el servidor necesita un poco de tiempo para responder con el archivo y otras peticiones, por lo cúal tiene que esperar hasta que el archivo se ha descargado por completo.
Cómo utilizar la regla?
- Combinar todos los archivos CSS en un archivo grande. ---> Como combinar archivos CSS
- Combinar todos los archivos JS en un archivo grande. ---> Como combinar archivos JS
- Combinar todas las imágenes en sprites. ---> Como combinar las imágenes en Sprites
Se podría pensar que estos cambios afectaran el funcionamiento del sitio, pero créanme que no lo hará. En cuanto a los archivos CSS, minimizar todos ellos y pegarlos en un archivo CSS grande en el orden en que estaban siendo cargados. (Asegurarse de no utilizar (@import) reglas de importación, ya que es básicamente lo mismo que usar múltiples archivos css)
Hacer lo mismo con los archivos de JS. Si están implementando jQuery, después de cada archivo copiado, inserten el siguiente código, que se hará cargo de los conflictos.
Insertar CODE, HTML o PHP:
var $ = jQuery.noConflict();CSS en la parte superior, Scripts en la parte inferior
Incluir archivo CSS antes de </ head>, porque los archivos CSS definen cómo se vera la página. NO colocar archivo JS en la parte superior. Póngalos antes de </ body>. ¿Por qué? Si colocan los archivos JS en la parte superior, el navegador intentará descargar los archivos antes de los elementos de la página, por lo cúal aumentará el tiempo de carga (a los ojos del usuario). Los archivos JS se pueden cargar después de todo lo demás. De esta manera, no transferimos un tiempo de carga excesivo a nuestros usuarios.
En la Parte 2, abarcaré los siguientes tópicos: compresión, cache, optimización de imágenes.
Espero que esta guía les sea de utilidad.
Saludos.
