EntradaCómo hacer que las páginas se carguen más rápido. Cinco formas de acelerar los tiempos de carga de la página
¡Buen día! Seguro que todo el mundo llega al momento en el que es necesario aumentar la velocidad de carga de las páginas del sitio por el motivo de que el sitio tarda demasiado en cargarse y los usuarios abandonan el sitio sin esperar a que se cargue por completo. En la publicación de hoy, hablaré con más detalle sobre las herramientas que necesita usar para optimizar la velocidad de carga de páginas en su sitio y qué puntos clave pueden interferir con la carga de páginas. Además, también descubrirá con la ayuda de qué servicios puede medir la velocidad de carga de las páginas en el sitio.
Servicios para medir la velocidad de carga de las páginas del sitio.
De los muchos servicios que utilicé para verificar la velocidad de carga de páginas en un sitio, me gustó el servicio: Pingdom.com, que demuestra claramente cada detalle del sitio y la velocidad de carga de la página requerida, por ejemplo, para pagina de inicio sitio de blog, si selecciona "Amsterdam, Países Bajos" en la configuración, la velocidad de carga del sitio será de 1.08 segundos, lo cual no es tan malo. 
A continuación se muestra toda la información necesaria que proporciona el servicio sobre la velocidad de conexión, espera y respuesta de ambos servidores de terceros, datos desde los que se solicitan, y el servidor interno. 
A partir de los datos proporcionados, puede determinar los momentos más lentos y mejorar la velocidad de carga de las páginas en el sitio al afectar estos lugares. Esto ayudará a una maravillosa herramienta desarrollada por Google: Google PageSpeed Insights.
Optimización de la velocidad de carga de las páginas del sitio con Google PageSpeed
De hecho, todo es más simple de lo que parece a primera vista, pero quiero señalar el momento en que cuando usando google PageSpeed Insights no ve todos los puntos que pueden empeorar la velocidad de carga de las páginas del sitio, pero es bastante adecuado, al completar todos los puntos a petición del servicio, puede mejorar significativamente la velocidad. Para un análisis más detallado de los factores que afectan la velocidad de carga del sitio web, debe utilizar el navegador Mozilla Firefox con el complemento Firebug y el complemento PageSpeed para Firefox.
¿Por qué Firefox? Para Firefox, este complemento parece más conveniente, incluso el contenido que se muestra después de analizar las páginas del sitio mediante el complemento es más compacto, por lo que le aconsejo que analice las páginas con Firefox.
Entonces, después de instalar el complemento y el complemento firebug, aparecerá un botón con una imagen de escarabajo en la esquina superior derecha.
Vaya al sitio para el que desea realizar el análisis, haga clic en el botón con el escarabajo. Se abrirá una ventana frente a usted, la última pestaña de la cual se llamará Page Speed. Después de hacer clic en la pestaña, aparecerá una ventana con un botón. Analizar el rendimiento, debe hacer clic en el botón y esperar mientras se analiza la página. A continuación, verá una lista de todas las recomendaciones que debe seguir para mejorar la velocidad de carga de las páginas en el sitio. Después de una breve manipulación del contenido de las páginas del blog, logré un resultado en PageSpeed = 94 de 100 puntos posibles, lo cual es bastante bueno, ciertamente puede mejorar el resultado, pero hasta ahora esto no es crítico, el principal Lo que pasa es que he eliminado todos los principales puntos de interferencia. 
Pero las marcas de verificación verdes parecen decir que todo está en orden, de hecho, se puede mejorar el indicador y alcanzar un valor de más de 94.
Entonces, veamos ahora las principales recomendaciones que debe seguir para optimizar la velocidad de carga de las páginas en su sitio:
Enciende la compresión- para configurar la compresión xml, css, js y html en formato gzip, agregue el siguiente código al archivo .htaccess en el servidor ftp del sitio:
Proporcione imágenes con las proporciones que desee.- en los archivos CSS es necesario establecer proporciones fijas para las imágenes, en lugar de cambiarlas mediante CSS.
Usar caché del navegador, aquí se especifica el validador de caché y se ejecuta el elemento Especificar un validador de caché- es necesario utilizar el almacenamiento en caché del lado del navegador, es decir, cliente, debe agregar a .htaccess siguientes líneas código:
Esta parte del código implementa el almacenamiento en caché durante 7 días, no olvide que no siempre es necesario cumplir con los requisitos de los motores de búsqueda, si los elementos de su sitio se actualizan con frecuencia, debe configurar el almacenamiento en caché para cada uno por separado.
Optimizar imágenes- para reducir el tamaño de la página y, en consecuencia, aumentar la velocidad de carga, deberá utilizar el principio de copiar todas las imágenes del sitio desde servidor ftp y carga por lotes para su posterior procesamiento en el servicio http://www.smushit.com/, el procedimiento es bastante largo si el número de imágenes en su sitio cambia en miles. Pueden ocurrir errores que archivos gif se comprimirá en jpg o png, mientras que el nombre del archivo cambia, debe tener en cuenta este momento si hay imagenes formato gif, es mejor descargarlos por separado y luego editarlos manualmente. Recomendaciones:
- Actualice la página después de cada descarga del paquete; de lo contrario, las imágenes se agregarán a la lista actual.
- Todos los archivos optimizados son descargados por el archivo de este servicio, por lo que deben extraerse del archivo antes de cargarlos en el servidor.
Aplazamiento del análisis del script java: puede ejecutar un script durante algún tiempo cargando un documento utilizando el código:
Acortar los scripts JS y los estilos CSS- necesita utilizar el servicio: http://www.refresh-sf.com/yui/, que elimina espacios adicionales en el código, lo que ahorra espacio en el archivo.
Minificar HTML- para reducir Páginas HTML puede eliminar espacios adicionales y comillas auxiliares, que se pueden omitir en situaciones específicas
Especificar tamaños de imagen- para todas las imágenes, se deben prescribir sus tamaños, no es necesario omitir la configuración de los tamaños de imagen, de lo contrario, las imágenes se escalarán torcidamente o el CMS recurrirá a estilos css autoprescriptivos para las imágenes, aumentando así su tamaño.
Especificar encabezado Vary: Accept-Encoding- todos los archivos abiertos para el almacenamiento en caché deben devolver un encabezado, simplemente agregue el código a .htaccess en el servidor ftp:
P.D .: Para reducir la cantidad de solicitudes a archivos, es necesario reducir la cantidad de estilos CSS y combinarlos en 1 archivo; idealmente, los scripts js también deben combinarse en 1 archivo.
Conclusión
La lista de recomendaciones proporcionada ayudará significativamente a mejorar la velocidad de carga de las páginas del sitio, pero no olvide que en algunos puntos la carga en el servidor puede aumentar, por ejemplo, cuando se usa la compresión gzip por medio del servidor y se usa el almacenamiento en caché en el lado del navegador (cliente), aquí deberá abordar los pasos de optimización con el otro lado y prepararse archivos gzip de forma independiente y configurar el procesamiento correcto en .htaccess y, según el navegador, proporcionar a los usuarios archivos comprimidos o sin comprimir.
Además, tenga en cuenta que mejorar la velocidad de carga de la página tiene un efecto positivo en el SEO del sitio y, en igualdad de condiciones, si su sitio gana en velocidad, superará a la competencia.
¡Le deseo éxito en la optimización de la velocidad de las páginas de su sitio web!
Creo que no es ningún secreto que la velocidad de carga de la página afecta a muchos factores. Si alguien no está al tanto, diré brevemente lo siguiente que la velocidad de carga afecta no solo si el visitante esperará a que se cargue su sitio, sino también en Optimización SEO... De hecho, hoy en día muchos motores de búsqueda, al clasificar los sitios, han comenzado a tener en cuenta la velocidad de carga de la página. Por lo tanto, cuanto más rápido se cargue su sitio, más visitantes podrá obtener de los motores de búsqueda y, en consecuencia, más dinero para ganar en él.
Por lo tanto, en este artículo, decidí recopilar los 10 consejos principales sobre cómo puede aumentar la velocidad de carga de su página web y del sitio en su conjunto. El artículo no pretende ser un genio y está destinado a principiantes.
Entonces vamos:
1. Reducir la cantidad de solicitudes HTTP
El 80% de la carga de la página se centra en la carga de componentes de la página: scripts, fotos, archivos CSS, flash. La especificación HTTP / 1.1 recomienda que los navegadores no descarguen más de 2 componentes de una página web en paralelo desde un solo host. Al reducir la cantidad de estos componentes, reducimos la cantidad de solicitudes HTTP al servidor y, como resultado, aumentamos 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.
Al colocar la conexión a los archivos css en el encabezado de la página, obtenemos una representación gradual de la página, es decir, la página se cargará gradualmente: primero el título, luego el logotipo en la parte superior, la navegación, etc. - y esto, a su vez, sirve como un excelente indicador de carga de la página para el usuario y mejora impresión general desde el sitio.
Colocar archivos CSS en la parte inferior de la página evita que muchos navegadores rendericen la página gradualmente. Esto se debe a que el navegador "no quiere" volver a dibujar elementos, que pueden cambiar su estilo después de cargar la página. Por lo tanto, incluya siempre todos sus archivos CSS en la parte superior de la página en la sección HEAD.
3. Coloque javascript al final de la página.
Al colocar archivos javascript en la parte inferior de la página, permitimos que el navegador cargue la página con el contenido primero, y solo entonces comience a cargar los archivos javascript. Si su sitio se mantiene actualizado y contiene todos los posibles "gadgets" interactivos, entonces puede haber varios de estos archivos javascript y pueden pesar varios cientos de kilobytes, por lo que hacer que el usuario espere hasta que se carguen todos sus archivos javascipt es fatal antes de cargar la página.
Además, los archivos .js externos bloquean la carga paralela. La especificación HTTP / 1.1 recomienda que los navegadores no descarguen más de 2 componentes de una página web en paralelo desde un solo host. Por lo tanto, si las imágenes de su sitio están ubicadas en diferentes hosts, obtendrá más de 2 descargas paralelas. Y cuando se carga el script, el navegador no iniciará ninguna otra descarga, incluso desde otros hosts.
4. Minimice CSS y JavaScript
La minificación de archivos es la eliminación de todos los símbolos no esenciales del código para reducir el tamaño del archivo y acelerar su carga. En el archivo minimizado, se eliminan todos los comentarios y espacios insignificantes, saltos de línea y pestañas. Aquí todo es sencillo. Cuanto menor sea el tamaño del archivo, menos tiempo tardará el navegador en descargarlo. Y estos 24 servicios en línea para comprimir y optimizar el código CSS le ayudarán a minimizar su código.
5. Utilice subdominios para descargas paralelas
Como dije anteriormente, de acuerdo con la especificación HTTP / 1.1, los navegadores están limitados en la cantidad de componentes del sitio cargados simultáneamente, es decir, no más de 2 componentes de un host. Por lo tanto, si su sitio tiene muchos gráficos, es mejor colocarlo en un subdominio o subdominios separados. Será el mismo servidor para usted, pero diferente para el navegador. Cuantos más subdominios cree, más más archivos el navegador podrá descargar simultáneamente y más rápido se cargará toda la página del sitio. Solo tienes que cambiar la dirección de las imágenes por una nueva. Una forma muy sencilla pero eficaz.
6. Usa la caché del navegador
El almacenamiento en caché es cada vez más importante para los sitios web modernos que dependen en gran medida de JavaScript y CSS. El hecho es que cuando un visitante visita su sitio por primera vez, el navegador cargará todos los archivos javascript y css, también cargará todos los gráficos y flash, pero al configurar el encabezado Expires HTTP correctamente, hará que los componentes de la página se puedan almacenar en caché. Por lo tanto, cuando un visitante visita su sitio nuevamente o va a la siguiente página de su sitio, algunos archivos requeridos y el navegador no necesita descargarlos nuevamente. De ahí la ganancia en la velocidad de carga del sitio.
Por lo tanto, exponga el encabezado HTTP Expires siempre que sea posible, durante varios días o incluso meses antes. Para que el servidor web Apache envíe los encabezados HTTP Expires correspondientes a las recomendaciones, debe agregar las siguientes líneas al archivo .htaccess ubicado en la carpeta raíz del sitio:
Este fragmento del archivo de configuración del servidor web Apache busca el módulo mod_expires y, si mod_expires está disponible, habilita los encabezados HTTP Expires que configuran los objetos anteriores para que se mantengan en el navegador y en la caché del proxy durante un año desde el momento en que se cargaron por primera vez. Habiendo establecido este tiempo de vida para la caché del navegador, puede resultar difícil actualizar los archivos. Por lo tanto, si ha cambiado el contenido del archivo css o javascript y desea que estos cambios se actualicen en la caché del navegador, debe cambiar el nombre del archivo. Por lo general, la versión del archivo se agrega al nombre del archivo, por ejemplo: styles.v1.css
7. Utilice CDN para descargar bibliotecas de JavaScript populares
Si su sitio usa un framework javascript popular, por ejemplo jQuery, entonces es mejor usar un CDN para conectarlo.
8. Optimiza tus imágenes
Es necesario determinar el formato apropiado para sus imágenes. La elección del formato de imagen incorrecto puede aumentar significativamente el tamaño del archivo.
- Los GIF son ideales para imágenes con varios colores, como un logotipo.
- JPEG: ideal para imágenes detalladas con gran cantidad colores como imágenes.
- PNG es su elección cuando necesita una imagen de alta calidad con transparencia.
Aquí hay algunos servicios en línea para optimizar imágenes:
9. No escale imágenes
No cambie el tamaño de la imagen usando los atributos de ancho y alto de la etiqueta, o usando CSS. Esto también afecta negativamente a la velocidad de carga de la página. Si tiene una imagen con un tamaño de 500x500px y desea insertar una imagen con un tamaño de 100x100px en el sitio, entonces es mejor cambiar el tamaño de la imagen original usando un editor de gráficos Photoshop, o cualquier otro. Cuanto menor sea el peso de la imagen, menos tiempo llevará cargarla.
10. Utilice la compresión Gzip
La investigación ha demostrado que la compresión gzip Archivo de texto"Sobre la marcha" en el 95-98% de los casos le permite reducir el tiempo de transferencia del archivo al navegador. Si almacena copias archivadas de archivos en el servidor (en la memoria de un servidor proxy o simplemente en un disco), la conexión en el caso general se puede liberar 3-4 veces más rápido.
A partir de HTTP / 1.1, los clientes web indican qué tipos de compresión admiten configurando el encabezado Accept-Encoding en la solicitud HTTP.
Aceptar codificación: gzip, desinflar
Si el servidor web ve un encabezado de este tipo en la solicitud, puede comprimir la respuesta utilizando uno de los métodos enumerados por el cliente. Al emitir una respuesta utilizando el encabezado Content-Encoding, el servidor notifica al cliente sobre qué método se utilizó para comprimir la respuesta.
Codificación de contenido: gzip
Los datos transferidos de esta manera son aproximadamente 5 veces menos que los originales, y esto acelera significativamente su entrega. Sin embargo, aquí hay un inconveniente: aumenta la carga en el servidor web. Pero el problema con el servidor siempre se puede resolver. Así que no le prestemos atención.
Para habilitar la compresión GZIP en su sitio, debe escribir las siguientes líneas de código en el archivo .htaccess:
Si Por aquí funcionó, entonces genial, si no, entonces puedes probar el siguiente código:
Pero otra vez, código dado no funciona en todos los servidores, por lo que es mejor ponerse en contacto con el servicio de soporte de su proveedor de alojamiento y aclarar este problema.
Bueno, eso es todo lo que quería decirte. En este artículo, he intentado enumerar todos los métodos principales de optimización del lado del cliente para aumentar la velocidad de carga de una página web. Además de la optimización del cliente, también existe la optimización del servidor. Pero este ya es un tema para otro artículo.
Si se perdió algo o tiene algo que agregar, escriba su opinión en los comentarios a continuación de esta publicación. ¡Gracias por la atención!
A nadie le gusta un sitio lento, ni a los usuarios ni a los motores de búsqueda. Con la velocidad actual de Internet, las personas ya no están dispuestas a esperar mucho para que se cargue una página. Esta no es una conexión de acceso telefónico donde la espera era inevitable. Y los motores de búsqueda, que luchan por la calidad de los resultados de búsqueda, no quieren dar a los usuarios sitios malos (en este caso, lentos). Por lo tanto, en igualdad de condiciones, un sitio lento tendrá menos resultados de búsqueda que sus competidores más rápidos.
¿Cuál es la velocidad de descarga normal?
Cuanto más rápido, mejor. Pero en promedio, 2-3 segundos para que se cargue el cuerpo principal del contenido de la página es bastante normal.
Qué determina la velocidad de descarga
Hay dos partes involucradas en la carga del sitio: el navegador del usuario y el servidor donde se encuentran ubicados físicamente los archivos del sitio. Los datos se intercambian entre estas partes.
La carga del sitio puede verse ralentizada por problemas en ambos lados y en el medio.
- Servidor lento: puede ser trivial que falte memoria de acceso aleatorio o núcleos en un procesador, como una computadora normal.
- Motor de sitio lento (CMS): si el código fue escrito por programadores sin experiencia sin considerar su rendimiento.
- El servidor está lejos del usuario: por ejemplo, el servidor con los archivos del sitio está ubicado físicamente en Moscú y un usuario de Vladivostok accede al sitio.
- Muchos archivos: para mostrar la página, el navegador necesita cargar muchas imágenes, archivos, estilos, scripts y fuentes.
- Archivos pesados: además, estos archivos son pesados.
Todos los pasos para optimizar la velocidad del sitio tienen como objetivo eliminar estos problemas.
Cómo comprobar la velocidad del sitio
De los muchos servicios de prueba de velocidad de sitios web en línea, PageSpeed de Google es posiblemente el más popular. Es fácil trabajar con él: indicamos la dirección del sitio y presionamos el botón "Analizar".
Como resultado, veremos los siguientes indicadores (por separado para computadoras y dispositivos móviles):
- Después de ese tiempo, el navegador recibe una respuesta del servidor y comienza a mostrar el contenido de la página (FCP - First Contentful Paint).
- ¿Cuánto tiempo tarda el usuario en ver el contenido principal en el navegador (DCL - DOM Content Loaded)?
- Qué tan optimizado está el sitio en términos de velocidad de carga.
- Recomendaciones específicas de optimización. Al hacer clic en los enlaces "Cómo solucionar", vemos las direcciones de las imágenes y archivos problemáticos con los que necesita hacer algo (principalmente comprimir).
Es recomendable entrar en la zona verde, tanto en la sección "Velocidad de página" como en la sección "Optimización".
Uno mas buen servicio para comprobar la velocidad de descarga, sin embargo, en inglés - Pingdom. Rasgo distintivo- Estos hermosos gráficos (llamados cascada) muestran qué archivos, en qué orden y cuánto tiempo se cargan:
Y ahora al grano:
Cómo acelerar su sitio web
Paso 1. Optimización de la imagen
Las imágenes no optimizadas son la parte "más difícil" del sitio. Por lo tanto, trabajar con imágenes puede dar lugar a un aumento significativo de la velocidad.
¿Qué estamos mirando?
Tamaño de la imagen (ancho y alto)
Si capturó el producto y recibió fotografías con un ancho de aproximadamente 5000 píxeles, puede reducir el ancho de manera segura a 1600, en la mayoría de los casos esto será suficiente. Una excepción serán aquellos sitios (principalmente tiendas online) donde se puede visualizar un producto con una "lupa", pero incluso allí la imagen ampliada no se carga inmediatamente, sino solo si una persona decide utilizar esta herramienta.
Peso de la imagen (kilobytes)
Las imágenes de la cámara pueden (y deben) comprimirse en volumen antes de publicarse en el sitio. Lo hacen en Photoshop (u otro editor de imágenes), o mediante servicios en línea, por ejemplo, TinyPNG u Optimizilla.
Vista previa para imágenes grandes
Si tiene fotos de productos (o trabajos terminados) y tiene una página con su lista, sería prudente hacer pequeñas vistas previas (miniaturas). Entonces la lista de productos, trabajos o fotos se cargará más rápido.
Por ejemplo, Sportmaster usa imágenes de productos en tres versiones:
Imagen para la lista de productos (pesa 7 Kb)
Imagen para ficha de producto (pesa 18 Kb)
Una imagen para visualizar el producto con una "lupa" (pesa 942 Kb)
Imagínese cuánto tiempo llevaría cargar la lista de productos si Sportmaster usara solo las imágenes originales (aquellas con más de 900 kilobytes).
Al verificar la velocidad del sitio a través de Google PageSpeed, recibirá una lista preparada de imágenes que deben optimizarse:
Paso 2. Compresión Gzip
Gzip es un programa para comprimir archivos en un servidor (análogo a los archivos zip en una computadora). Cuando Gzip está habilitado, el servidor, antes de enviar el código de la página al navegador (así como scripts, estilos, etc. información de texto) archivará estos archivos primero. El navegador recibirá el archivo y lo descomprimirá en la computadora del usuario. La información comprimida se transferirá más rápido entre el navegador y el servidor.
Cómo habilitar la compresión Gzip:
Si tiene acceso al archivo htaccess, agregue las siguientes líneas (al final del archivo):
AddOutputFilterByType DESINFLAR texto / texto html / texto sin formato / aplicación css / json
AddOutputFilterByType DEFLATE texto / aplicación javascript / aplicación javascript / x-javascript
AddOutputFilterByType DESINFLAR texto / aplicación xml / texto xml / componente x
AddOutputFilterByType DESINFLAR la aplicación / x-font-ttf application / x-font-opentype image / svg + xml
Si no tiene Apache, pero Nginx (quién sabe, él lo entenderá), entonces necesita el archivo de configuración nginx.conf. Agregue el código a la sección http (...) y reinicie el servidor:
gzip encendido;
gzip_static on;
gzip_comp_level 5;
gzip_min_length 1024;
gzip_proxied any;
gzip_types text / plain text / css application / json application / x-javascript text / xml application / xml application / xml + rss text / javascript application / javascript;
Si no tiene acceso a htaccess o la configuración del servidor, escriba al soporte de alojamiento que necesita para habilitar la compresión gzip.
Si la compresión funciona, en los resultados de la comprobación de PageSpeed verá (en el bloque "Técnicas de optimización implementadas"):
Paso 3. Almacenamiento en caché del lado del navegador
Cuando el navegador carga el sitio, guarda parte de la información del mismo (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 a la página actual, el navegador no volverá a solicitar esta información al servidor (lo cual es mucho tiempo), sino que la cargará desde propia memoria(Cual es mas rápido). Por lo tanto, en la configuración del navegador hay botones "Borrar caché", y todos conocemos el atajo de teclado CTRL + F5 (actualizar la página con borrar el caché).
Para usar la caché del navegador, debe indicarle qué tipos de archivos de su sitio deben guardar en la caché. Cómo hacerlo:
A través del archivo htaccess (almacenamos en caché los archivos estáticos durante 10 días):
Caduca Activo en
ExpiresDefault "acceso más 10 días"
ExpiresByType image / gif "acceso más 10 días"
ExpiresByType image / jpg "acceso más 10 días"
ExpiresByType image / jpeg "acceso más 10 días"
ExpiresByType image / png "acceso más 10 días"
ExpiresByType image / svg + xml "acceso más 10 días"
ExpiresByType text / css "acceso más 10 días"
Para Nginx, agregue a la configuración:
servidor
...
ubicación ~ * \. (jpg | jpeg | gif | png | ico | css | js | txt) $ (
root /var/www/user/data/www/site.ru;
expira 10d;
}
...
}
Si no hay acceso a la configuración del servidor, escriba nuevamente al soporte técnico y solicite configurar el almacenamiento en caché de archivos estáticos.
Similar a la lista de imágenes, Google PageSpeed produce una lista de recursos para los que el almacenamiento en caché no está configurado, pero podría:
Tenga en cuenta que solo puede configurar el almacenamiento en caché para sus propios recursos. No podrá cambiar la configuración de la caché, por ejemplo, para los scripts Yandex.Metrica.
Paso 4. Minificar archivos css y js
La minificación es la reducción del tamaño del archivo al eliminar espacios, líneas en blanco, comentarios, usar nombres de variables más cortos, etc. Al navegador no le importa con qué archivo trabajar, normal o minimizado, y dicho archivo pesa menos.
Un ejemplo de código regular:
Envoltorio del velocímetro (
posición: relativa;
}
.lista de envoltura del velocímetro (
margen superior: 80px;
margen izquierdo: -20px;
fondo acolchado: 85px;
}
Después de la minimización:
Envoltorio del velocímetro (posición: relativa). Envoltorio del velocímetro .list (margen superior: 80 px; margen izquierdo: -20 px; relleno inferior: 85 px)
Los complementos y bibliotecas populares (jQuery, Bootstrap, etc.) siempre tienen versiones minimizadas de sus scripts y estilos; inclúyalos en el sitio. Por ejemplo, la versión normal secuencia de comandos de jQuery pesa 265 Kb, y su versión comprimida es de 85 Kb. ¿Sientes la diferencia?
El único inconveniente de la minificación es que se pierde la legibilidad del archivo. Si necesita realizar cambios en archivo comprimido- Será difícil hacer esto, es inconveniente para una persona trabajar con un archivo de este tipo (hay una línea continua). Por lo tanto, para minimizar sus scripts, generalmente se usan complementos adicionales para el CMS: comprimen automáticamente los archivos css y js antes de cargarlos en el sitio. Al mismo tiempo, el diseñador de maquetación puede trabajar fácilmente con versiones normales de archivos.
PageSpeed aquí también nos muestra cuidadosamente una lista de archivos, cuyo tamaño se puede reducir minimizando:
Paso 5. Orden de carga de archivos css y js
Los navegadores tienen sus propios algoritmos para la carga más rápida de páginas (nadie quiere ser calificado como un navegador "lento"). Por lo tanto, una vez recibido el código de la página, el navegador intenta averiguar cuál de los archivos incluidos necesita comenzar a descargar primero. A veces sucede que el navegador ya ha alcanzado la representación de algún formulario en la página y el archivo con los estilos para él aún no se ha cargado, entonces la representación se detendrá.
Para que el navegador cargue los archivos del sitio de manera óptima, se recomienda que todos los archivos de estilo (css) y fuentes se incluyan al principio del código de la página (en la etiqueta
) y todos los archivos de script (js), al final de la página, antes de la etiqueta de cierre..
...
rel = "hoja de estilo" href = " //fonts.googleapis.com/css?family=Roboto:300,400,500&subset=latin,cyrillic"tipo =" texto / css ">
rel = "hoja de estilo" href = "/ inc / min / styles.min.css" type = "text / css">
rel = "hoja de estilo" href = "/ css / main.css" type = "text / css">
...
...
Luego, el navegador cargará los estilos necesarios para la renderización y comenzará a mostrar la página al usuario, mientras carga simultáneamente los scripts necesarios (que luego proporcionarán interactivos: controles deslizantes, pestañas, etc.).
Paso 6. Complementos o contadores adicionales
A veces, en el código de las páginas hay enlaces a complementos o módulos que ya no se utilizan en el sitio. Por ejemplo, primero el diseñador de diseño conectó un complemento para controles deslizantes y luego lo reemplazó por uno nuevo, pero no eliminó el anterior. O hay códigos de contadores, estadísticas que ya no buscas. Asegúrese de eliminar esta "basura" del código.
Intente optimizar el uso de scripts adicionales. Por ejemplo, si tiene controles deslizantes en tres páginas del sitio, utilice el mismo complemento para el control deslizante en todas las páginas, sin necesidad de incluir ningún script especial cada vez.
Paso 7. Usando CDN
Una CDN (Content Delivery Network) es una red de muchos servidores distribuidos geográficamente en un país o en todo el mundo. Cada uno de los servidores duplica el contenido del servidor principal (el contenido se duplica a la primera solicitud del usuario y se almacena durante algún tiempo).
Cuando un usuario, por ejemplo, de Khabarovsk, quiere descargar algo de un CDN, recibe contenido no del servidor principal (que puede estar, por ejemplo, en Moscú), sino del servidor más cercano al usuario (que puede estar en el mismo Khabarovsk). Mi país natal es amplio, por lo que la solicitud Khabarovsk-Khabarovsk pasará más rápido que la solicitud Khabarovsk-Moscú. Aunque en milisegundos, multiplicado por la cantidad de archivos y su tamaño, esto puede dar un buen aumento de velocidad.
Normalmente, una CDN se utiliza en dos casos:
- Cargando scripts de terceros. Estos son todos los mismos jQuery, Bootstrap, Web Fonts. Por ejemplo, puede decirle al navegador que los descargue no desde su propio servidor, sino desde los servidores de Google, Bootstrap u otros CDN.
- Descarga de imágenes y scripts de sus CDN. Los sitios grandes (Ozon, Avito, etc.) configuran sus propias CDN, utilizando sus propios servidores o (más a menudo) servidores de redes CDN, por ejemplo, Google Cloud o StackPath. Algunos CMS ya han incluido soporte CDN en su funcionalidad. Por ejemplo, Bitrix tiene un módulo gratuito de "Aceleración de sitios web (CDN)".
Paso 8. Reducir el número de solicitudes http
Para que el navegador realice menos solicitudes al servidor (y estas son solicitudes http), debe reducir la cantidad de archivos que necesita. Por ejemplo, si tiene tres scripts separados (para el control deslizante, para ventanas modales y para información sobre herramientas), luego puede combinarlos en un archivo y luego también minificar (vea el paso 4).
Dado que no es muy conveniente combinar archivos manualmente (si necesita reemplazar uno de los scripts en el futuro), generalmente configuran su combinación automática. La mayoría de los CMS tienen sus propios complementos para esto (por ejemplo, Autoptimize para WordPress).
El almacenamiento en caché configurado para el navegador (paso 3) y la eliminación de scripts innecesarios (paso 6) también reducen el número de solicitudes http.
Paso 9. Optimización de fuentes
Intente utilizar una fuente coherente en todo su sitio. Esto no solo agregará estética al sitio, sino que también reducirá la cantidad de archivos descargables para mostrar fuentes.
También puede reducir la cantidad de archivos eliminando el uso de formatos obsoletos. Anteriormente, cada fuente se cargaba en formatos eot, ttf, woff, svg para una visualización correcta en los navegadores. Hoy en día, los navegadores modernos nos permiten limitarnos a solo dos formatos: woff y woff2.
Alternativamente, las fuentes populares se pueden descargar de Google Fonts. Primero, le quitará la carga a su servidor. En segundo lugar, los archivos con las fuentes ya estarán optimizados, esto se trasladó de sus hombros a Google (que, como ve, es bueno).
Paso 10. Reducir el código HTML
Además de comprimir archivos de estilo y scripts (paso 4), puede configurar la minificación para el código HTML de la propia página. Creo que esto es relevante para páginas largas: artículos de blog, listas de productos grandes, etc. Para configurarlo, debe buscar un complemento adecuado para su CMS (por ejemplo, Html Minifier para Joomla).
Paso 11. Optimización del rendimiento del servidor
Si tiene un servidor dedicado (su Administrador de sistema puede administrar su configuración), puede intentar actualizar sus parámetros. Por ejemplo, agregue RAM o reemplace el procesador. Además, el administrador del sistema puede realizar una "limpieza" en el servidor mismo: eliminar los módulos no utilizados y actualizar los módulos actuales.
En el caso del alojamiento compartido (sin acceso a la configuración del servidor), puede buscar cambiar a tarifas más caras, si son mejores especificaciones servidor.
Paso 12. Optimización de scripts y bases de datos
Una de las etapas de la carga del sitio web es la generación del código HTML final por parte del servidor, que le dará al navegador. Este código es generado por el motor del sitio (CMS). Si el motor está escrito de forma analfabeta, puede "recopilar" la página durante mucho tiempo, haciendo solicitudes innecesarias a archivos y bases de datos, utilizando algoritmos de programación "lentos", etc.
Por lo tanto, a la hora de elegir un CMS para un sitio web, se recomienda buscar motores populares (Bitrix, Open Cart, WordPress, MODx, etc.), que han demostrado su rendimiento y confiabilidad. Y dado que estos sistemas se mejoran constantemente (incluso en términos de velocidad), debe actualizar regularmente el CMS en su sitio web.
No balandras
Ocúpate de la carga rápida de tu sitio. Recuerde que hay muchos competidores en los resultados de búsqueda, y cuanto más rápido se cargue su sitio, menos otros sitios tendrá tiempo para abrir una persona en las pestañas vecinas.
Si necesita ayuda para optimizar la velocidad de carga de un sitio, escriba, echaremos un vistazo a su sitio y le diremos 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 averiguarlo.
Reducir la velocidad de carga de la página en 1 segundo implica:
- disminución del número de visitas en un 11%;
- disminución del índice de satisfacción del usuario en un 16%;
- reducción de conversión hasta un 6%.
A continuación se muestra un gráfico que muestra el aumento del interés. paginas cerradas debido al aumento del tiempo de carga del sitio.
Un par de segundos adicionales de tiempo de carga del sitio web reducen las posibilidades de atraer visitantes y realizar ventas.
KISSmetrics ha realizado un estudio sobre cómo la velocidad de carga del sitio web afecta el comportamiento del usuario y del cliente:
- El 47% de los usuarios espera que una página se abra en menos de 2 segundos;
- El 40% de los usuarios cierra el sitio si tarda más de 3 segundos en cargarse;
- El 79% de los compradores que no estaban satisfechos con la usabilidad del sitio, probablemente, no comprarán a través de él en el futuro;
- El 44% de los compradores en línea le dirán a sus conocidos sobre sitios con los que no están satisfechos.
La carga más rápida del sitio es especialmente importante para los usuarios que visitan el sitio desde dispositivos móviles. Y desde ahora la parte tráfico móvil está en constante crecimiento, por lo que se debe hacer especial hincapié en la aceleración en dispositivos móviles.
Paciencia de los usuarios de Internet móvil
Aumentar la velocidad de carga del sitio web como una forma de aumentar la conversión.
El tiempo de carga del sitio afecta la conversión. Veamos el ejemplo de la red Walmart.
Tasa de conversión frente al tiempo de carga de la página
Aquí podemos ver que cuanto mayor es la velocidad de carga de la página, mayor es la tasa de conversión.
Walmart descubrió que reducir los tiempos de carga de la página en un segundo puede aumentar las conversiones hasta en un 2%.
Impacto de la optimización de la carga del sitio web en el tráfico orgánico
En 2010, Google dijo que tendría en cuenta la velocidad de carga del sitio al clasificar los resultados de búsqueda.
Razón por la cual los motores de búsqueda la necesidad de hacer esto es bastante obvia. Si un motor de búsqueda le ofrece sitios "lentos", es probable que los utilice con menos frecuencia.
Por lo tanto, es importante reducir el tiempo de carga de su sitio web para que su sitio web esté mejor clasificado que la competencia.
Resumiendo lo anterior, llegamos a la conclusión de que la aceleración del sitio web conduce a:
- aumento de la conversión;
- una disminución en la tasa de rebote (el porcentaje del número de visitantes que abandonaron el sitio directamente desde la página de entrada o no vieron más de una página del sitio);
- aumento en los motores de búsqueda.
20 formas de acelerar la carga del sitio web
1. Reducir la cantidad de solicitudes HTTP
Según una investigación de Yahoo, la mayor parte del tiempo que se carga una página se dedica a cargar imágenes, archivos de estilo y scripts.
Se crea una solicitud HTTP separada para descargar cada uno de estos archivos. Cuantas más solicitudes de este tipo, más tiempo se tarda en cargar la página por completo.
Es muy fácil verificar cuántas solicitudes HTTP se generan: use el panel de desarrollador del navegador.
Veamos el proceso usando un ejemplo. navegador de google Cromo.
El primer paso vamos a la página analizada, hacemos clic derecho en cualquier área vacía de la página y seleccionamos en Menú de contexto Consulte Ver código. El panel de Chrome DevTools se abrirá en la parte inferior de la pantalla. Vaya a la pestaña Red y vuelva a cargar la página. Vemos una lista de todas las solicitudes, sus estados de respuesta y tiempos de carga de archivos.
2. Combine y minimice archivos CSS y JS
Ahora que sabemos cuántas solicitudes se están generando, podemos empezar a reducirlas.
La forma más sencilla de reducir el número de solicitudes es combinar y minimizar (comprimir) archivos HTML, CSS y JavaScript. La forma más correcta de configurar esta tarea es para los desarrolladores. Si esto no es posible, puede intentar hacerlo usted mismo.
Abrimos cualquier editor de texto, insertamos en él el contenido de todos los archivos css usados en el orden en que están incluidos en la plantilla. Luego, usando cualquier servicio de minificación (por ejemplo, CSSminifier), comprima el código.
Como resultado, el número de solicitudes se reduce y los caracteres que son insignificantes para el intérprete (espacios, tabulaciones, saltos de línea, etc.) se eliminan del código final.
3. Implementar carga JS y CSS asincrónica
Todos estamos acostumbrados a cargar un archivo CSS en HTML insertando una etiqueta
Sin embargo, no todos los fragmentos de código son tan importantes como para cargarlos de inmediato. Por ejemplo, el sitio tiene un componente de comparación de productos que se utiliza con poca frecuencia. Tiene sentido cargar estilos y código js directamente en el momento en que los usuarios desean utilizar dicha funcionalidad.
La carga asincrónica de CSS y JS a menudo la realizan solo desarrolladores profesionales. Solo notamos que debe buscar usar el valor de precarga del atributo rel junto con el atributo onload o cargar los estilos con un script js.
4. Configurar la carga diferida de código javascript
Para comprender qué es la carga diferida de código javascript, primero analicemos cómo ocurre normalmente. En el modo estándar, los archivos javascript interrumpen el análisis de un documento HTML hasta que se reciben y ejecutan todos esos archivos.
A menudo necesitamos insertar algún widget que no sea particularmente significativo. redes sociales al pie de página del sitio. No nos importa si aparece en la página inmediatamente o después de un par de segundos.
Para implementar la carga diferida, o más bien procesar, un script de este tipo, solo necesitamos registrar el atributo defer en la etiqueta