Es muy importante que el sitio web se cargue lo más rápido posible; Los usuarios quieren ver rápidamente la página que desean ver, y si no puede satisfacerlos, la buscarán en otro lugar. En este artículo, verá una discusión de cinco técnicas simples y efectivas para acelerar sus páginas web.
Conocer el tiempo de carga del sitio web es el primer paso antes de decidir qué sale mal. También le permite saber si necesita realizar cambios para la aceleración de su sitio web.
Antes de comenzar, si aún no ha instalado YSLOW, instálelo. Es una extensión de Mozilla Firefox, puede encontrarlo en el siguiente enlace:
Primero, naveguemos por el sitio web de seis revisiones, todos usamos el mismo ejemplo para probarlo (solo necesitamos abrir en una nueva pestaña o ventana del navegador).
En el navegador, hay una columna del odómetro (como se muestra en la Figura 1). Junto a él, cuando la página web haya terminado de cargarse, verá YSLOW y números. El número representa el tiempo (en segundos) que el navegador tarda en cargar un sitio web. Queremos que este número sea lo más bajo posible.
Figura 1: icono YSLOW y odómetro que muestra el tiempo de carga de la página web
En la mayoría de los casos, una o un grupo de razones que causan un largo tiempo de carga de las páginas web son los siguientes:
Discutiremos esto más tarde.
Para asegurarse de que se muestre el tiempo de carga de su propio sitio web, explique algunos sitios web. Echa un vistazo a Google, Facebook y algunos blogs y sitios web que te gustan. Notará que cuantas más imágenes use el sitio web, más tiempo será el tiempo de respuesta la página JS.
Además de medir qué tan rápido se carga, YSlow le proporciona algunas ideas en profundidad como lo que puede hacer para mejorar el rendimiento de su sitio web, así como la falta de rendimiento de carga de su sitio web.
La siguiente imagen es la pestaña 'Performance' (como se muestra en la Figura 2). Pero si hace clic en él, mostrará los detalles de cada área que afectan el tiempo de carga y el rendimiento general.
Figura 2: Etiquetas de rendimiento
En este campo, la opción más subjetiva es usar CDN (red de distribución de contenido) .CDN es muy efectivo para sitios web grandes. Lo que hacen es difundir el contenido del sitio web en los servidores en varias regiones. Cuanto más cerca esté el servidor físico para el usuario cargando un sitio web, más rápido es una página. Por lo tanto, esencialmente, usar CDN es distribuir contenido del servidor al usuario de la página más cercano.
Figura 3: Las etiquetas de rendimiento usan letras (A, B, C, D, F) para representar calificaciones y calificaciones actuales (1-100).
Además de usar un CDN (que puede ser costoso), todo lo demás es factible.
Ejecutemos cada factor de nivel, aquí hay una breve velocidad de segunda velocidad para cada campo de nivel y cómo resolver estos problemas para lograr un rendimiento óptimo.
Reduzca las solicitudes HTTP : cuando una página web obtiene archivos del servidor, se generará una solicitud HTTP. El alcance incluye scripts, archivos CSS, imágenes y solicitudes de cliente/servidor asynchroneos (AJAX y otras tecnologías cambiantes). Este es el punto clave cuando se habla de rendimiento, pero se puede resolver fácilmente con solo un poco de esfuerzo. Por ejemplo, a menudo es útil fusionar scripts, CSS e imágenes tanto como sea posible, caché de archivos en la máquina del usuario.
Agregar encabezado de término : el 80% del tiempo de carga de la página está relacionado con descargar scripts, imágenes y CSS. En la mayoría de los casos, estos elementos no cambiarán en la máquina del usuario. Puede almacenar en caché el código en el .htaccess en la máquina local del usuario (discutiremos cómo operar más adelante en el artículo).
Componente GZIP : Gziping o archivos JS comprimidos, imágenes, documentos HTML, documentos CSS, etc. Los usuarios pueden descargar versiones de archivos más pequeñas para aumentar la velocidad de carga de las páginas web. Esto puede reducir el consumo de servidor, pero los componentes de descompresión también pueden causar la respuesta de la página a más lento, dependiendo del navegador del usuario.
Coloque CSS en la parte superior : coloque el archivo CSS en la parte superior del sitio web, que puede cargar otras piezas como las imágenes y el texto como sea posible al mismo tiempo.
Ponga JS en la parte inferior : coloque CSS en la cabeza del documento, solo necesita insertar JS antes de cerrar <Boby>. Si bien estos scripts se cargan en segundo plano, el usuario primero obtiene la página aparentemente completa.
Evite las expresiones CSS : nunca he usado expresiones CSS (llamadas características dinámicas), que son solo una característica CSS que agrega conceptos de programación (como estructuras de control/condicionales), a partir de IE8, el motor de diseño Trident (utilizado en IE) ya no se admite. De todos modos, no tienen una buena idea para usar. Hasta cierto punto, usaría scripts PHP para cargar diferentes reglas de estilo CSS basadas en diferentes condiciones, como un número aleatorio, hora del día o navegador.
Llamadas externas a JS y CSS : coloque archivos JS y CSS en archivos externas, y el navegador los almacena en caché con una velocidad de carga de página más rápida que cada llamada.
Reduzca la búsqueda DNS : siempre que el usuario escriba un nombre de dominio en la barra de direcciones del navegador, el navegador siempre realizará DNS buscando direcciones IP. Cuantas más ubicaciones de entrada tenga el sitio web, más necesaria será la búsqueda de DNS. Mantenga el nivel lo más bajo posible y realice una consulta DNS en promedio de 60-100 milisegundos.
Zoom en JS : a diferencia de la compresión general de GZIP, el zoom en los documentos JS es eliminar espacios innecesarios, pestañas y otros caracteres de selección de Zhonghe Yang, reducir el tamaño total del archivo y las páginas más pequeñas pueden obtener una velocidad de carga más rápida. Puede usar JSMin para zoom en JavaScript.
Evite la redirección : si se trata de la redirección del encabezado del servidor, la redirección JS o la redirección del elemento HTML. Su sitio web cargará el encabezado de una página en blanco y luego una nueva página. Los usuarios pasan más y más tiempo para obtener la página que necesitan, por lo que deben evitar esto a toda costa.
Eliminar scripts duplicados : el navegador que carga el mismo script aumentará el tiempo de carga de la página, que es un problema matemático muy simple, más archivos es igual a más tiempo de carga. Verifique su sitio web para asegurarse de no llamar a jQuery dos o tres veces u otros scripts.Cuando ... eso fue mucho, pasemos a la siguiente pestaña de Yslow justo antes de entrar en otras técnicas para aumentar el rendimiento de su sitio web.
Figura 4: etiqueta de piezas.
Las etiquetas de pieza (como se muestra en la Figura 4) pueden proporcionar información sobre los efectos del aumento de la velocidad de carga del sitio web. Aquí puede ver cuánto tiempo debe cargarse el documento actual, si estos archivos están comprimidos, el tiempo de respuesta y si se almacenan en caché en la máquina del usuario y cuándo expira el caché. Esta es una buena evaluación del sitio web, que mide su optimización de rendimiento y velocidad. Finalmente, la etiqueta de estadísticas (como se muestra en la Figura 4), que nos muestra todas las solicitudes HTTP, los documentos descargados al mismo tiempo y los archivos almacenados en almacenamiento en caché. La caché vacía muestra el archivo que el navegador necesita para descargar la página de renderizado. El caché cebado, por otro lado, muestra una lista de archivos que ya existe en el caché del navegador del usuario, guardando así la solicitud del navegador para no tener que descargar el archivo nuevamente.
Figura 5: Pestaña Estadísticas.