EntradaCómo hacer que las páginas se carguen más rápido. Cinco maneras de acelerar la página de descarga de la página
¡Buenos días! Seguramente todos llegan al momento en que es necesario aumentar la velocidad de descarga de la página del sitio por la razón por la que el sitio está cargado demasiado tiempo y los usuarios sin esperar su inicio completo, abandone el sitio. En la grabación de hoy, le diré más detalles sobre las herramientas que desea utilizar para optimizar la velocidad de carga del sitio y qué puntos clave pueden interferir con las páginas. Además, también aprenderá, con qué servicios puede medir la velocidad de descarga de la página del sitio.
Servicios para medir la velocidad de la página del sitio.
De una variedad de servicios que solía verificar la velocidad de descarga de la página del sitio, me gustó el servicio: Pingdom.com, que demuestra claramente cada detalle del sitio y la velocidad de descarga de la página requerida, por ejemplo, para pagina principal El sitio del blog, al seleccionar en la configuración: "Amsterdam, Países Bajos", la velocidad de descarga del sitio será de 1.08 segundos, lo que no es tan malo. 
Se proporciona lo siguiente a toda la información necesaria que proporciona el servicio de velocidad de conexión, la espera y la respuesta como servidores de terceros, los datos de los cuales se solicitan y el servidor interno. 
A partir de los datos proporcionados, puede determinar los momentos más lentos y mejorar la velocidad de descarga de las páginas del sitio, afectando estos lugares. Esto ayudará a una maravillosa herramienta desarrollada por Google: Google PagePeed Insights.
Optimizamos la velocidad de descarga de las páginas del sitio usando Google PagePeed
De hecho, todo es más fácil de lo que parece a primera vista, pero quiero celebrar el momento en que utiliza Google PagePeed Insights no es visible de todos los momentos que pueden empeorar la velocidad de descarga de la página del sitio, pero será bastante adecuado realizando todos los artículos a solicitud del servicio, puede mejorar significativamente la velocidad. Para un análisis más detallado de los factores que afectan la velocidad de descarga del sitio, debe usar el navegador de Mozilla Firefox con la adición de Firebug y PagePeed Plugin para Firefox.
¿Por qué Firefox? Para Firefox, este complemento se ve más conveniente, incluso el contenido que se muestra después de analizar el complemento de las páginas del sitio es más compacto, por lo que le aconsejo que analice las páginas utilizando Firefox.
Entonces, después de instalar el enchufe y agregar Firebug en la esquina superior derecha, aparecerá un botón con la imagen del escarabajo.
Vaya al sitio, el análisis para el que desea ejecutar, haga clic en el botón con el escarabajo. La ventana se abrirá antes de usted, la última pestaña cuáles se llamará una ventana con un botón con un botón. Velocidad de página. Después de hacer clic en la pestaña. Analizar el rendimiento.Debe hacer clic en el botón y esperar hasta que se analice la página. Además, aparecerá una lista de todas las recomendaciones que desea ejecutar para mejorar la velocidad de descarga de las páginas del sitio. Después de una breve manipulación sobre el contenido de las páginas del blog, logré el resultado en Pagespeed \u003d 94 de los 100 puntos posibles, lo que es bastante bueno, puede, por supuesto, puede, por supuesto y mejorar el resultado, pero hasta ahora no es crítico, la principal Lo es que se eliminaron todos los momentos interferentes principales. 
Pero las garrapatas verdes buscan que todo esté en orden, puede mejorar el indicador y alcanzar el valor de más de 94.
Por lo tanto, ahora consideremos las recomendaciones básicas que desea realizar para optimizar la velocidad de descarga de las páginas del sitio:
Encender la compresión - Para configurar la compresión XML, CSS, J y HTML a Formato GZIP, debe agregar el siguiente código a File.HTAccess en el servidor del sitio FTP:
Proporcionar imágenes con las proporciones correctas. - En los archivos CSS, debe especificar una proporción fija para las imágenes, en lugar de cambiarlas utilizando CSS.
Usa el caché del navegador, Aquí está el validador de caché y se realiza el artículo. Especifique el validador de caché - Es necesario usar el almacenamiento en caché en el lado del navegador, es decir,. El cliente requerido agregue v.htaccess las siguientes filas Código:
En esta parte del Código, se implementa el almacenamiento en caché durante 7 días, no olvide que no siempre necesita realizar los requisitos de los motores de búsqueda si los elementos de su sitio se actualizan a menudo, debe configurar el almacenamiento en caché para cada uno por separado.
Optimizar imágenes - Para reducir el tamaño de las páginas y, en consecuencia, aumentar la velocidad de descarga, deberá usar el principio de copiar todas las imágenes del sitio desde el servidor FTP y la descarga de lotes para su procesamiento adicional al servicio http: / /www.smushit.com/, el procedimiento es lo suficientemente largo si está en su sitio de servicio, el número de imágenes varía miles. Puede haber errores que archivos gif se desplazará en JPG o PNG, y el nombre del archivo cambia, se requiere que considere este momentoSi hay imágenes formato GIF, es mejor cargarlos por separado y luego gobernarlo manualmente. Recomendaciones:
- Después de la descarga de cada paquete, actualice la página, de lo contrario, las imágenes se agregarán a la lista actual.
- Todos los archivos optimizados se descargan mediante un archivo de este servicio, por lo que antes de sobrecargar al servidor, deben eliminarse del archivo.
Deposición de análisis de sintaxis de script de Java: puede ejecutar un script para un tiempo de carga de tiempo usando el código:
Reduce los scripts de JS y los estilos CSS - Debe usar el servicio: http://www.refresh-sf.com/yui/, que elimina espacios adicionales en el código, guardando así la ubicación del archivo.
Reducir HTML - Para reducir Páginas HTML Puede eliminar las brechas adicionales y los caracteres auxiliares de las cotizaciones que se pueden omitir en situaciones específicas.
Especifique los tamaños de imagen - Para todas las imágenes, sus dimensiones deben ser deletradas, no necesita bajar la configuración del tamaño de la imagen, de lo contrario, la imagen se escalará Crooked, o CMS recurrirá a los estilos CSS de auto-prescripción de imágenes, lo que aumentará su tamaño.
Especifique el título Vary: Aceptar-codificación - Todos los archivos abiertos al almacenamiento en caché deben devolver el título, es suficiente para agregar el código V.HTAccess en el servidor FTP:
PD.: Para reducir el número de solicitudes a los archivos, es necesario reducir la cantidad de estilos CSS y combinarlos en 1 archivo, los scripts de JS, idealmente, también deben combinarse en 1 archivo.
Conclusión
La lista proporcionada de recomendaciones ayudará a mejorar la velocidad de descargar la página del sitio, pero no olvide que en algunos puntos puede aumentar la carga en el servidor, por ejemplo, cuando se utiliza la compresión GZIP por las herramientas del servidor y utilizando el almacenamiento en caché En el lado del navegador (cliente), será necesario acercarse a las etapas de optimización. El otro lado y prepararse. archivos gzip Solo, y V.HTAccess configuró el procesamiento adecuado, y dependiendo del navegador, proporcione a los usuarios archivos comprimidos o no comprimidos.
No olvide que la mejora de la velocidad de carga de la página tiene un efecto positivo en el SIE SEO, y otras cosas son iguales, si su sitio ganará en la velocidad, será mayor que los competidores.
¡Éxito para usted al optimizar la velocidad de las páginas del sitio!
Creo que no es un secreto que la velocidad de descarga de la página afecta a muchos factores. Si alguien no tiene conocimiento, entonces dirá brevemente lo siguiente que la velocidad de descarga afecta no solo si el visitante esperará cuando su sitio esté cargado, pero también en la optimización de SEO. Después de todo, hoy, muchos motores de búsqueda cuando los sitios de clasificación han comenzado a tener en cuenta la velocidad de descarga de la página. Por lo tanto, cuanto más rápido se impulsará su sitio, más visitantes puede obtener de los motores de búsqueda y, por lo tanto, y más dinero en él.
Por lo tanto, en este artículo decidí reunir los 10 consejos principales sobre cómo puede aumentar la velocidad de la página web y el sitio en su conjunto. El artículo no pretende ser genio y diseñado para novatos.
Entonces vamos:
1. Reducir el número de solicitudes HTTP
El 80% de la descarga de la página se centra en la descarga de componentes de página: scripts, fotos, archivos CSS, Flash. La especificación HTTP / 1.1 recomienda que los navegadores cargaran paralelamente no más de 2 componentes web de un host. Al reducir el número de estos componentes, reducimos el número de consultas HTTP al servidor y cómo el resultado aumenta la velocidad de carga de la página.
Pero cómo reducir el número de solicitudes al servidor sin afectar apariencia páginas?
2. Coloque los archivos CSS al principio de la página.
Conexión a los archivos CSS en el encabezado de la página, obtendremos una representación gradual de la página, es decir, La página se cargará gradualmente: primero el título, luego el logotipo de arriba, la navegación, etc. - Y esto, a su vez, sirve como un indicador de carga de página excelente para el usuario y mejora impresión general desde el sitio.
Si coloca los archivos CSS en la parte inferior de la página, no permite que muchos navegadores rindan la página gradualmente. Esto se explica por el hecho de que el navegador "no quiere" para redibujar elementos que el estilo puede cambiar después de cargar la página. Por lo tanto, todos sus archivos CSS siempre se conectan en la parte superior de la página en la sección de la cabeza.
3. Coloque JavaScript al final de la página.
PLYOW JavaScript Archivos en la página Permitimos que el navegador cargue una página con contenido primero, y solo luego inicie la descarga de archivos Javascript. Si su sitio continúa con los horarios y contiene todas las "tontas" interactivas posibles, entonces estos archivos JavaScript pueden ser algo y pesándolos pueden varios cientos de kilobytes, por lo que antes de descargar la página para forzar al usuario a esperar hasta que se carguen todos sus archivos de javastipt. .
Además, los archivos .js externos bloquean la carga paralela. La especificación HTTP / 1.1 recomienda que los navegadores cargaran paralelamente no más de 2 componentes web de un host. Por lo tanto, si las imágenes para su sitio están ubicadas en diferentes hosts, recibirá más de 2 descargas paralelas. Y cuando se carga el script, el navegador no iniciará ninguna otra descarga, incluso de otros hosts.
4. Minimizar CSS y JavaScript.
La minimización del archivo es una eliminación de todos los caracteres insignificantes del código para reducir la cantidad del archivo y acelerar su descarga. En un archivo minimizado, se eliminan todos los comentarios y espacios insignificantes, trasplantes de cadena, pestañas, pestañas. Todo es simple aquí. Cuanto menor sea el tamaño del archivo, menos tiempo será necesario para el navegador en su descarga. Y para minimizar su código ayudará a estos 24 servicios en línea para el código de optimización de compresión y CSS
5. Usa subdominios para descarga paralela.
Como dije anteriormente, de acuerdo con la especificación HTTP / 1.1, las restricciones se superponen sobre el número de componentes descargables simultáneamente del sitio, a saber, no más de 2 componentes de un host. Por lo tanto, si tiene muchos gráficos en su sitio, es mejor asumirlo en un subdominio o subdominio separado. Para usted, será el mismo servidor, y para un navegador, diferente. Cuantos más subdominios crees. más archivos El navegador podrá descargar simultáneamente y más rápido, toda la página del sitio arrancará. Solo puedes cambiar la dirección de las imágenes al nuevo. Muy simple, pero efectiva.
6. Usa el caché del navegador
Keching se vuelve extremadamente importante para los sitios web modernos que utilizan la extensa conexión de JavaScript y CSS. El hecho es que cuando el visitante se fue a su sitio por primera vez, el navegador descarga todos los archivos JavaScript y CSS, también carga la programación completa y flash, pero la correcta configuración de la cabecera HTTP caduca, hará que los componentes de la página Caché. Por lo tanto, cuando el visitante va a su sitio de nuevo o va a la siguiente página de su sitio, en la caché de su navegador habrá algún archivos Y el navegador no necesitará subirlos de nuevo. Desde aquí y ganando la velocidad de carga del sitio.
Por lo tanto, exhibe el encabezado HTTP de caducidad en todas partes donde sea posible durante varios días o incluso meses por delante. Para que el servidor web de Apache proporcione las recomendaciones de encabezado HTTP adecuadas, es necesario agregar a File.htAccess, ubicado en la carpeta raíz del sitio, las siguientes líneas:
Esta configuración del servidor Apache Web cheques de fragmentos de las mod_expires módulo y si el módulo mod_expires está disponible, incluye el retorno de la VENCE cabeceras HTTP que marcan la vida útil de los objetos mencionados anteriormente en la memoria caché de los navegadores y servidores proxy igual a un año a partir de la Tiempo de la primera bota. Al instalar dicha vida útil del caché del navegador, puede ser difícil actualizar los archivos. Por lo tanto, si ha cambiado el contenido del archivo CSS o JavaScript y desea que estos cambios se actualizan en la memoria caché del navegador, es necesario cambiar el nombre del archivo en sí. Por lo general, el nombre de archivo agrega su versión, por ejemplo, de la siguiente manera: Styles.v1.csss
7. Usa CDN para descargar las bibliotecas populares de Javascript
Si su sitio utiliza un marco popular de JavaScript, como jQuery, entonces es mejor usar CDN para conectarlo.
8. Optimiza tus imágenes.
Es necesario determinar el formato apropiado para sus imágenes. Seleccionar un formato de imagen incorrecto, puede aumentar significativamente el tamaño del archivo.
- GIF - Ideal para imágenes con varios colores, como el logotipo.
- JPEG - son ideales para imágenes detalladas con gran cantidad Flores como las fotos.
- PNG es su elección cuando necesita una imagen de alta calidad con transparencia.
Aquí hay varios servicios en línea Para optimizar las imágenes:
9. No escalar imágenes.
No cambie el tamaño de la imagen con la etiqueta de atributos de ancho y altura, o utilizando CSS. Esto también afecta negativamente a la velocidad de descarga de la página. Si tiene una imagen del tamaño de 500x500px, e inserte en el sitio que desea una imagen con un tamaño de 100x100px, entonces es mejor cambiar el tamaño de la imagen original utilizando el editor gráfico de Photoshop, o cualquier otro. El peso más pequeño de la imagen, menos tiempo es necesario para su descarga.
10. Use la compresión GZIP
Como se muestran los estudios, la compresión GZIP. archivo de texto "En la mosca" en el 95-98% de los casos, reduce el tiempo para transferir el archivo al navegador. Si almacena copias archivadas de archivos en el servidor (en la memoria del servidor proxy o simplemente en el disco), la conexión en el general se puede liberar 3-4 veces más rápido.
A partir de la versión de protocolo HTTP / 1.1, los clientes web indican qué tipos de compresión se admiten al instalar el encabezado de codificación de aceptación en la solicitud HTTP.
Aceptar: codificación: gzip, desinfla
Si el servidor web ve tal encabezado en la consulta, puede aplicar una compresión de respuesta por uno de los métodos enumerados por el cliente. Al emitir una respuesta, a través del encabezado de codificación de contenido, el servidor notifica al cliente sobre cómo se comprime la respuesta.
Codificación de contenido: GZIP
Los datos transmitidos de esta manera son menos de 5 veces, y acelera significativamente su entrega. Sin embargo, hay un inconveniente: la carga en el servidor web aumenta. Pero el problema con el servidor siempre se puede resolver. Así que no le prestaremos atención.
Para habilitar la compresión GZIP en su sitio web, es necesario en el archivo.htAccess para registrar las siguientes líneas de código:
Si un este método Trabajó, entonces excelente, si no, puedes probar esto aquí es el código:
Pero otra vez, este código Funciona no en todos los servidores, por lo que es mejor ponerse en contacto con su proveedor de alojamiento de apoyo y aclarar esta pregunta.
Bueno, de hecho, todo lo que quería decir. En este artículo, intenté enumerar todas las formas básicas de la optimización del cliente para aumentar la velocidad de inicio de la página web. Además de la optimización del cliente, también hay optimización del servidor. Pero este es el tema para un artículo separado.
Si se ha perdido algo o tiene algo que agregar, escriba su opinión en los comentarios a continuación a esta publicación. ¡Gracias por la atención!
El sitio lento no le gusta a nadie, ni los usuarios ni los motores de búsqueda. Con la velocidad actual de Internet, las personas ya no están listas para esperar la descarga de la página. Esta no es una conexión de Dial-APA, donde la espera fue inevitable. Y los motores de búsqueda, la lucha por la calidad de los resultados de la búsqueda, no quieren emitir malos usuarios (en este caso, lento) Edificios. Por lo tanto, la igualdad de otras condiciones, el sitio será lenta en la extradición bajo que sus competidores más shumbling.
¿Qué velocidad de carga se considera la norma?
Cuanto más rápido, mejor. Pero en promedio, 2-3 segundos para descargar la parte principal del contenido de la página es bastante normal.
De donde depende la velocidad de descarga
En el sitio de descarga, dos partes están participando: un navegador de usuario y un servidor donde los archivos del sitio están ubicados físicamente. El intercambio de datos se produce entre estas partes.
Thug Site Loading puede problemas en cada una de las partes y en el intervalo entre ellos.
- Servidor lento: puede que no esté obstruido memoria de acceso aleatorio O núcleos en el procesador, como una computadora regular.
- Motor de sitio lento (CMS): si el código se escribió en programadores inexpertos sin tener en cuenta su velocidad.
- El servidor está lejos de ser el usuario: por ejemplo, un servidor con los archivos del sitio se encuentra físicamente en Moscú, y el usuario llega al sitio de Vladivostok.
- Muchos archivos: para mostrar la página del navegador que necesita para descargar muchas fotos, archivos, estilos, scripts y fuentes.
- Archivos pesados: más estos archivos pesan mucho.
Todos los pasos para optimizar la velocidad del sitio tienen como objetivo eliminar estos problemas.
Cómo comprobar la velocidad del sitio
Desde el conjunto de servicios en línea para verificar la velocidad del sitio es la más popular, quizás, es la herramienta Google PagePeed. Trabaje con él simplemente: especifique la dirección del sitio y haga clic en el botón "Analizar".
Como resultado, veremos tales indicadores (por separado para las computadoras y para el móvil):
- Después de qué hora, el navegador recibe una respuesta del servidor y comienza a dibujar el contenido de la página (FCP - Primera pintura contentable).
- Después de qué hora, el usuario ve el contenido principal en el navegador (cargado de contenido DCL - DOM).
- En la medida en que el sitio está optimizado en términos de velocidad de inicio.
- Recomendaciones de optimización específicas. Al hacer clic en los enlaces "Cómo arreglar", vemos direcciones de imágenes de problemas y archivos con los que debe hacer algo (principalmente comprimir).
Es recomendable ingresar a la zona verde, y en el bloque de velocidad del sitio (velocidad de página) y en el bloque "Optimización".
Otro buen servicio Para verificar la velocidad de descarga, sin embargo, en inglés - Pingdom. Una característica distintiva: estos son hermosos gráficos (llamados cascada - cascada) muestran qué archivos, en qué orden y cuánto tiempo se carga:
Y ahora hasta el punto:
Cómo acelerar el sitio
Paso 1. Optimización de imágenes
Las imágenes no optimizadas son la parte más "pesada" del sitio. Por lo tanto, trabajar con imágenes puede dar un aumento significativo en la velocidad.
Lo que miramos:
Tamaño de la imagen (ancho y altura)
Si ha disparado a los productos y recibió fotos de aproximadamente 5000 píxeles de ancho, puede reducir de forma segura el ancho a 1600, en la mayoría de los casos será suficiente. La excepción será aquellos sitios (principalmente, tiendas en línea), donde puede considerar las mercancías con la "lupa", pero también no se carga inmediatamente, pero solo si una persona decidió aprovechar esta herramienta.
Peso de imagen (kilobytes)
Las imágenes de la cámara pueden (y necesitan) comprimir en la cantidad antes de mostrar el sitio. Hágalo en Photoshop (u otro editor de imágenes), o por servicios en línea, como Tinypng o Optimizilla.
Vista previa a grandes imágenes
Si tiene fotos de bienes (o trabajo realizado) y hay una página con su lista, razonablemente hará que las vistas previas pequeñas (imágenes reducidas). Luego, la lista de productos, obras o fotos se cargará más rápido.
Por ejemplo, el SportMaster usa imágenes de mercancías en tres versiones:
Imagen para la lista de productos (pesa 7 kb)
Imagen para la tarjeta del producto (pesa 18 kb)
Imagen para ver las mercancías con una lupa (pesa 942 kb)
Imagínese cuánto tiempo se cargaría la lista de productos si el SportMaster usó solo las imágenes de origen (aquellas que son 900 con un exceso de kilobyte).
Al verificar la velocidad del sitio a través de Google PagePeed, recibirá una lista lista para las imágenes que deben optimizarse:
Paso 2. COMPRESIÓN GZIP
GZIP es un programa para comprimir archivos en el servidor (análogo de archivos con cremallera en una computadora). Con el servidor GZIP habilitado, antes de enviar el código de página al navegador (así como los scripts, estilos y otros información de texto), primero archiva estos archivos. El navegador recibirá un archivo y lo desempeñará en la computadora del usuario. La información comprimida se transmitirá más rápido entre el navegador y el servidor.
Cómo habilitar la compresión GZIP:
Si tiene acceso al archivo HTCCESS, agregue tales líneas (al final del archivo):
ADDOUTPUTFILTERBYTYPE DEFLATE DE DEFLATE / TEXTO HTML / TEXTO PLANTE / APLICACIÓN CSS / JSON
ADDOUTPUTFILTERBYTYPE DESFLATE DE TEXTO / APLICACIÓN DE JAVASCRIPT / APLICACIÓN DE JAVASCRIPT / X-JavaScript
ADDOUTPUTFILTERBYTYPE DEFLATE DE DEFLATE / APLICACIÓN XML / texto XML / Componente X
ADDOUTPUTFILTERBYTYPE DEFLATE APLICACIÓN / APLICACIÓN X-FONT-TTF / X-FONT-Opentype Imagen / SVG + XML
Si no tiene Apache, pero NGINX (quién sabe, lo entenderá), entonces necesitará un archivo de configuración de NGINX.CONF. Agregar código a la sección HTTP (...) y reinicie el servidor:
gzip on;
gzip_static en;
gzip_comp_level 5;
gzip_min_length 1024;
gzip_proxied cualquiera;
gZIP_TYPES TEXT / PLANY TEXT / CSS APLICACIÓN / APLICACIÓN JSON / X-JAVASCRIPT Text / XML Application / XML Application / XML + RSS Text / Javascript Aplicación / Javascript;
Si no tiene acceso a la configuración HTACCESS o del servidor, escriba para alojar el soporte técnico que necesita para habilitar la compresión GZIP.
Si la compresión funciona, entonces, en los resultados de la revisión de PagePeed, verá (en las "técnicas de optimización incluidas"):
Paso 3. Cachón en el lado del navegador.
Cuando el navegador cargue el sitio, guarda parte de la información (archivos de estilo, scripts, imágenes) en su propia memoria (caché, caché). Luego, en otras páginas de este sitio o cuando vuelva a ingresar la página actual, el navegador no solicitará esta información re-del servidor (durante mucho tiempo) y lo cargará de memoria propia (Cual es mas rápido). Por lo tanto, en la configuración del navegador hay botones "CLEAR CACHE", y todos conocemos la combinación de teclas CTRL + F5 (actualice la página de limpieza de caché).
Para usar el caché del navegador, debe especificarlo, qué tipo de archivos de su sitio desea guardar en el caché. Cómo hacerlo:
A través del archivo HTCCESS (archivos estáticos en caché durante 10 días):
Expirsativo en.
Expussdefault "Access Plus 10 Days"
IMAGEN DE EXPIREBYTYPE / GIF "ACCESO PLUS 10 DÍAS"
ExpussByType Image / JPG "Access Plus 10 Days"
ExpussByType Image / JPEG "Access PLUS 10 DÍAS"
ExpussByType Image / PNG "Access PLUS 10 DÍAS"
ExpussByType Image / SVG + XML "Access PLUS 10 DÍAS"
EXPIREBYTYPE TEXT / CSS "ACCESO PLUS 10 DÍAS"
Para NGINX, agregue a la configuración:
servidor (
...
Ubicación ~ * \\. (JPG | JPEG | GIF | PNG | ICO | CSS | JS | TXT) $ (
raíz /var/www/user/data/www/site.ru;
Caduca 10d;
}
...
}
Si no hay configuraciones de servidor de acceso, nuevamente escribimos a Soporte técnico y le pediremos que ajuste el almacenamiento en caché de archivos estáticos.
Similar a la lista de imágenes, Google PagePeed ofrece una lista de recursos para los cuales el almacenamiento en caché no está configurado, y sería posible:
Tenga en cuenta que puede configurar el almacenamiento en caché solo para sus recursos. Cambie la configuración de caché, por ejemplo, para que Yandex.Tric Scripts no funcionará.
Paso 4. Minimizar archivos CSS y JS
La minimización es una escasez de un archivo eliminando espacios, cadenas vacías, comentarios, use nombres de variables más cortos, etc. El navegador sigue siendo con qué archivo para trabajar, ordinario o minimizado, y pesa un archivo de este tipo.
Un ejemplo de un código regular:
Velocímetro-wrapper (
posición: Relativo;
}
.Escriptómetro-Wrapper .List (
margen superior: 80px;
margen-izquierda: -20px;
relleno inferior: 85px;
}
Después de la minimización:
Velocímetro-envoltura (Posición: Relativo). PRECEPEDOR-WRAPPER .LIST (margen-arriba: 80px; margen-izquierda: -20px; relleno inferior: 85px)
Los complementos y las bibliotecas populares (jQuery, Bootstrap, etc.) siempre tienen versiones minimizadas de sus scripts y estilos, conectarlos al sitio. Por ejemplo, la versión habitual del script de jQuery pesa 265 KB, y su versión comprimida es de 85 kb. ¿Sientes la diferencia?
El único Minus Ministerio, se pierde la legibilidad del archivo. Si necesitas hacer cambios en archivo comprimido - Será difícil hacerlo, una persona que trabaje con dicho archivo es inconveniente (hay una cadena sólida). Por lo tanto, los complementos adicionales a CMS se usan generalmente para ministerizar sus scripts: comprimen automáticamente los archivos CSS y JS antes de descargar en el sitio. Y el prohibicionista puede trabajar con seguridad con versiones regulares de archivos.
PagePeed y aquí nos muestra cuidadosamente una lista de archivos cuyo tamaño se puede reducir minimizando:
Paso 5. CSS y JS-Archivo de descarga.
Los navegadores tienen sus propios algoritmos para la carga más rápida de la página (nadie quiere jugar un navegador "freno"). Por lo tanto, después de haber recibido el código de la página, el navegador está intentando calcular cuál de los archivos complementales debe comenzar a subir primero. A veces sucede que el navegador ya ha alcanzado el dibujo de algún formulario en la página, y el archivo con estilos aún no se ha cargado, entonces el sorteo se detendrá.
Para que el navegador descargue los archivos del sitio de manera óptima, todos los estilos (CSS) y las fuentes se configuran al comienzo del código de la página (en la etiqueta
), y todos los archivos de script (JS), al final de la página, frente a la etiqueta de cierre.
...
rel \u003d "stylesheet" href \u003d " //fonts.googleapis.com/css?family\u003droboto: 00.400.500 & subset \u003d latin.cyrillic"Tipo \u003d" Texto / CSS "\u003e
rel \u003d "stylesheet" href \u003d "/ inc / min / styles.min.css" tipo \u003d "texto / css"\u003e
rel \u003d "stylesheet" href \u003d "/ css / main.css" tipo \u003d "texto / css"\u003e
...
...
Luego, el navegador cargará los estilos necesarios para dibujar, y comenzará a mostrar la página al usuario, en paralelo descargando los scripts necesarios (que luego proporcionará interactivos: deslizadores, pestañas, etc.).
Paso 6. Complementos adicionales o contadores
A veces, en el código de la página, hay enlaces a complementos o módulos que ya no se usan en el sitio. Por ejemplo, al principio el proxigador conectó un complemento para deslizadores, y luego lo reemplazó a uno nuevo, pero no eliminó el anterior. O sigue siendo códigos de contadores, estadísticas para las que ya no está buscando. Asegúrese de eliminar tal "basura" del código.
Trate de optimizar el uso de scripts adicionales. Por ejemplo, si tiene controles deslizantes en tres páginas del sitio, luego en todas las páginas, use el mismo complemento para el control deslizante: no necesita conectar un poco de script en particular cada vez.
Paso 7. Usando CDN
CDN (red de entrega de contenido, red de entrega de contenido) es una red de una variedad de servidores distribuidos geográficamente por país o en todo el mundo. Cada uno de los servidores duplica el contenido del servidor principal (el contenido está duplicado por la primera solicitud del usuario y se almacena durante algún tiempo).
Cuando un usuario, por ejemplo, de Khabarovsk, quiere cargar algo de CDN, luego recibe contenido no del servidor principal (que puede ser, por ejemplo, en Moscú), pero desde el servidor más cercano al usuario (que puede ser en el mismo khabarovsk). El país es mi nativo, por lo que la consulta Khabarovsk-Khabarovsk pasará más rápido que la solicitud de Khabarovsk-Moscú. Deje que los milisegundos, pero en la multiplicación al número de archivos y su tamaño, puede dar un buen aumento en la velocidad.
Como regla general, CDN se utiliza en dos casos:
- Cargando scripts de terceros. Estos son todos los mismos jquery, bootstrap, fuentes de fuentes web. Por ejemplo, puede especificar el navegador para descargarlos no de su servidor, sino de los servidores de Ruble, Bootstrap u otros CDN.
- Carga de imágenes y scripts de su CDN. Los sitios grandes (Ozon, Avito, etc.) configuran su propio CDN utilizando sus propios servidores, o (más a menudo) redes CDN, como Google Cloud o StackPath. Algunos CMS ya han incluido el soporte de CDN en su funcionalidad. Por ejemplo, el BitRix tiene un módulo libre "Aceleración del sitio (CDN)".
Paso 8. Reducir el número de solicitudes HTTP
Para que el navegador haga menos llamadas al servidor (y esto son solicitudes de HTTP), debe reducir la cantidad de archivos que necesita. Por ejemplo, si tiene tres scripts separados (para un control deslizante, para ventanas modales Y para obtener consejos emergentes), puede combinarlos en un solo archivo y luego minimizar (ver el paso 4).
Dado que no es completamente conveniente combinar archivos manualmente (si necesita reemplazar uno de los scripts en el futuro), generalmente ajusta su fusión automática. La mayoría de los CMS tienen sus propios complementos para esto (por ejemplo, AutoPtimice para WordPress).
El almacenamiento en caché confuso para un navegador (Paso 3) y eliminar los scripts innecesarios (Paso 6) también reduce el número de solicitudes HTTP.
Paso 9. Optimización de fuentes
Trate de usar una sola fuente en todo el sitio. Esto no solo agregará el sitio de la estética, sino que también reducirá la cantidad de archivos descargados para mostrar las fuentes.
También se puede reducir la cantidad de archivos para usar formatos desactualizados. Anteriormente, cada fuente se cargó en formatos EOT, TTF, WOFF, SVG para la pantalla correcta en los navegadores. Ahora los navegadores modernos solo se pueden limitar a dos formatos, Woff y Woff2.
Además, las fuentes populares se pueden descargar desde las fuentes de Google. Primero, eliminará la carga de su servidor. En segundo lugar, los archivos con fuentes ya se optimizarán, se desplaza de sus hombros en Google (lo que ve, agradable).
Paso 10. Reducir el código HTML
Además de comprimir archivos de estilo y scripts (Paso 4), puede configurar la minimización y para el código HTML de la página en sí. Creo que es relevante para páginas largas: artículos en blogs, grandes listas de bienes, etc. Para configurar, vale la pena buscar un complemento adecuado para su CMS (por ejemplo, HTML Minifier para Joomla).
Paso 11. Optimización del servidor
Si tiene un servidor dedicado (su administrador de sistema Puede administrar su configuración), puede intentar perforar sus parámetros. Por ejemplo, agregue RAM o reemplace el procesador. Además, el SYSADMIN puede llevar a cabo "limpieza" en el propio servidor, elimínelo sin usar y actualice los módulos actuales.
En el caso de un alojamiento virtual (sin acceso a la configuración del servidor), puede buscar en la dirección de la transición a tarifas más caras si son mejores especificaciones Servidores.
Paso 12. Optimización de scripts y bases de datos.
Una de las etapas de la descarga del sitio es la generación del servidor Final HTML-Code, que le dará al navegador. Este código es generado por el motor del sitio (CMS). Si el motor está escrito de forma iliterada, entonces puede "cobrar" una página muy larga, haciendo solicitudes innecesarias a archivos y bases de datos utilizando algoritmos de programación "lentos", etc.
Por lo tanto, al seleccionar CMS para el sitio, se recomienda buscar en la dirección de los motores populares (Bitrix, carrito abierto, WordPress, Modx, etc.), que han demostrado su velocidad y confiabilidad. Y dado que estos sistemas se están finalizando constantemente (incluso en términos de velocidad), entonces el CMS debe actualizarse regularmente en su sitio web.
No slopokama
Cuida la rápida descarga de su sitio. Recuerde que hay muchos competidores en los resultados de búsqueda, y el más rápido se iniciará su sitio, más pequeños los otros sitios que una persona tendrá que abrir en las pestañas vecinas.
Si necesita ayuda para optimizar la velocidad de descarga del sitio: escribir, veamos su sitio y indique si es posible acelerarlo.
El tiempo de carga del sitio es uno de los indicadores más importantes que afectan el comportamiento de los usuarios del sitio. Vamos a tratar.
Reducir la velocidad de descarga de la página para 1 segundo conlleva:
- reducción del número de vistas en un 11%;
- reduciendo la tasa de satisfacción del usuario en un 16%;
- reduciendo la conversión al 6%.
A continuación se muestra un gráfico que refleja el crecimiento de los intereses. páginas cerradas Debido al aumento en el tiempo de carga del sitio.
Un par de segundos adicionales de tiempo de carga del sitio reduce las posibilidades de interesar a los visitantes y vender.
Kissmetrics realizó un estudio sobre cómo la velocidad de descarga del sitio afecta el comportamiento de los usuarios y los compradores:
- El 47% de los usuarios esperan que la página se abra en menos de 2 segundos;
- El 40% de los usuarios cierra el sitio si se carga más de 3 segundos;
- El 79% de los compradores que permanecieron insatisfechos con la comodidad del sitio, lo más probable es que no lo comprará en el futuro;
- El 44% de los compradores de Internet le dirán a sus sitios familiares que los no los han satisfecho.
La descarga acelerada del sitio es especialmente importante para los usuarios que vienen al sitio desde dispositivos móviles. Y desde ahora la parte. tráfico móvil Está creciendo constantemente, luego la aceleración en el móvil necesita para hacer un acento especial.
Paciencia de usuarios de Internet móviles.
Aumentar la velocidad de carga del sitio como una forma de aumentar la conversión
El tiempo de descarga del sitio afecta la conversión. Considere el ejemplo de la red Walmart.
Indicador de conversión Dependencia de la página Página de carga
Aquí vemos que cuanto mayor sea la velocidad de la carga de la página, mayor será la tasa de conversión.
Según los resultados de Walmart, reveló que una disminución en el tiempo de carga de tiempo durante un segundo ayuda a aumentar la conversión al 2%.
Efecto de la optimización de descarga del sitio en tráfico orgánico.
En 2010, Google dijo que tendría en cuenta la velocidad de descargar sitios cuando los resultados de búsqueda se clasifican.
La razón por la que los motores de búsqueda deben hacer es bastante obvio. Si el motor de búsqueda le ofrecerá los sitios "lentos", lo más probable es que sea menos probable que lo use.
Por lo tanto, es importante reducir el tiempo de descarga del sitio para que su sitio esté en la emisión de los competidores más altos.
Resumiendo lo anterior, concluimos que la aceleración del sitio conduce a:
- crecimiento de la conversión;
- reducir la tasa de falla (la relación de porcentaje de los visitantes que abandonaron el sitio directamente desde la página de inicio de sesión o no se ve más de una página del sitio);
- levantamiento en los motores de búsqueda.
20 maneras de acelerar la carga del sitio
1. Reducir el número de solicitudes HTTP
Según la investigación de Yahoo, la mayoría de las veces al cargar la página se gasta en la descarga de imágenes, archivos de estilo y scripts.
Para descargar cada archivo de este tipo, se crea una consulta HTTP por separado. Cuantas más solicitudes, cuanto más tiempo pase hasta que la página esté completamente descargada.
Compruebe cuántas solicitudes de HTTP se generan, es posible utilizar el panel del desarrollador del navegador.
Considerar el proceso en el ejemplo navegador de Google Cromo.
El primer paso que vamos a la página analizada, haga clic con el botón derecho en cualquier área de página vacía y elija en menú de contexto Artículo "Ver código". El panel Chrome DevTools se abre en la parte inferior de la pantalla. Vaya a la pestaña Red y reinicie la página. Vemos una lista de todas las solicitudes, los estados de sus respuestas y el tiempo de descargar archivos.
2. Combinar y minificar archivos CSS y JS.
Ahora, cuando sabemos cuántas solicitudes se generan, podemos proceder a reducirlas.
La forma más fácil de reducir el número de solicitudes es combinar y minificar (comprimir) los archivos HTML, CSS y JavaScript. Es más correcto poner esta tarea a los desarrolladores. Si no hay tal posibilidad, puedes intentar hacerlo tú mismo.
Abrir cualquier cosa editor de textoInserción de los contenidos de todos los archivos CSS utilizados en el orden en que están conectados en la plantilla. A continuación, utilizando cualquier servicio de minificación (por ejemplo, CSSMinifier), comprima el código.
Como resultado, reducimos el número de consultas, y los símbolos (brechas, pestañas, trasplantes de cadena, etc.) se eliminan del código final.
3. Implementar CSS de carga asíncrona y JS
Todos estamos acostumbrados a cargar un archivo CSS a HTML insertando una etiqueta
Sin embargo, no todas las piezas de código son tan críticas que deben descargarse de inmediato. Por ejemplo, en el sitio hay un componente rara vez utilizado de la comparación de bienes. Tiene sentido cargar estilos y código JS para él directamente en el momento en que los usuarios quieren aprovechar tal funcionalidad.
Para implementar la carga asíncrona de CSS y JS a menudo es capaz de solo con desarrolladores profesionales. Solo observamos que debe observar ya sea en la dirección de usar el valor de precarga del atributo REL junto con el atributo de OnLoad, o cargue los estilos del script JS.
4. Configurar un código de descarga diferido de Javascript
Para comprender que tal descarga diferida del código JavaScript para un inicio, analizamos cómo suele ser. En el modo Estándar Javaspit, los archivos interrumpen el análisis de documentos HTML hasta que se reciban y ejecutan todos estos archivos.
A menudo necesitamos insertar cualquier widget especialmente significativo. redes sociales En el sótano del sitio. No importa si aparecerá en la página inmediatamente o un par de segundos.
Para implementar una carga diferida, o más bien procesamiento, un script de este tipo, todos necesitamos registrar el atributo diferenciador.