Cómo mejorar la velocidad de la página web

Antes de comenzar a tratar de mejorar su velocidad, debe echar un vistazo a lo que está actualmente. El verificador de velocidad de página y el verificador de estadísticas de Google deberían poder darle un buen vistazo.

1. Minimice las solicitudes HTTP

Según Yahoo, el 80% del tiempo de carga de una página web se gasta descargando las diferentes partes de la página: imágenes, hojas de estilo, scripts, Flash, etc. Se realiza una solicitud HTTP para cada uno de estos elementos, por lo que más información sobre -componentes de página, cuanto más tiempo tarda la página en renderizarse.

Siendo ese el caso, la forma más rápida de mejorar la velocidad del sitio es simplificar su diseño.

• Agilice la cantidad de elementos en su página.
• Use CSS en lugar de imágenes siempre que sea posible.
• Combina múltiples hojas de estilo en una.
• Reduzca los guiones y colóquelos al final de la página.

Siempre recuerde, cuando se trata de su sitio web, más ágil es mejor.

Consejo profesional: comience una campaña para reducir la cantidad de componentes en cada página. Al hacer esto, reduce la cantidad de solicitudes HTTP necesarias para que la página se procese, y mejorará significativamente el rendimiento del sitio.

2. Reduce el tiempo de respuesta del servidor

Su objetivo es un tiempo de respuesta del servidor de menos de 200 ms (milisegundos). Y si sigue los consejos de este artículo, está en camino de lograrlo.

Google recomienda utilizar una solución de monitoreo de aplicaciones web y verificar cuellos de botella en el rendimiento.

Consejo profesional: lea este informe de Singlehop, Critical Ecommerce Infrastructure Needs Needs, para conocer nueve cosas en las que debe concentrarse para que su sitio funcione bien.

Luego aproveche estos recursos:

• Yslow: para evaluar la velocidad de su sitio y obtener consejos sobre cómo mejorar el rendimiento.
• Herramientas PageSpeed ​​de Google: para obtener más información sobre las mejores prácticas de rendimiento y automatizar el proceso.

3. Habilitar la compresión

Las páginas grandes (que es lo que podría tener si está creando contenido de alta calidad) a menudo son de 100 kb y más. Como resultado, son voluminosos y lentos para descargar. La mejor manera de acelerar su tiempo de carga es comprimirlos, una técnica llamada compresión .

La compresión reduce el ancho de banda de sus páginas, lo que reduce la respuesta HTTP. Lo haces con una herramienta llamada Gzip.

La mayoría de los servidores web pueden comprimir archivos en formato Gzip antes de enviarlos para su descarga, ya sea llamando a un módulo de terceros o utilizando rutinas integradas. Según Yahoo, esto puede reducir el tiempo de descarga en aproximadamente un 70%.

Y dado que el 90% del tráfico actual de Internet viaja a través de navegadores que admiten Gzip, es una excelente opción para acelerar su sitio.

Consejo profesional: lea este artículo para obtener más detalles sobre la compresión Gzip. Luego configure su servidor para habilitar la compresión:

• Apache: use mod_deflate
• Nginx: use HttpGzipModule
• IIS: configurar la compresión HTTP

4. Habilitar el almacenamiento en caché del navegador

Cuando visita un sitio web, los elementos de la página que visita se almacenan en su disco duro en un caché o almacenamiento temporal, por lo que la próxima vez que visite el sitio, su navegador puede cargar la página sin tener que enviar otra solicitud HTTP a el servidor.

Así es como Tenni Theurer, anteriormente de Yahoo, lo explica …

La primera vez que alguien visita su sitio web, debe descargar el documento HTML, las hojas de estilo, los archivos javascript y las imágenes antes de poder usar su página. Eso puede ser de hasta 30 componentes y 2.4 segundos.

Una vez que la página ha sido cargada y los diferentes componentes almacenados en la memoria caché del usuario, solo es necesario descargar algunos componentes para visitas posteriores.

En la prueba de Theurer, eso fue solo tres componentes y .9 segundos, lo que redujo casi 2 segundos el tiempo de carga.

Theurer dice que entre el 40 y el 60% de los visitantes diarios de su sitio ingresan con un caché vacío, por lo que es fundamental que haga que su página sea más rápida para estos visitantes nuevos. Pero también debe habilitar el almacenamiento en caché para ahorrar tiempo en las visitas posteriores.

Consejo profesional: lea este artículo para conocer cuatro métodos para habilitar el almacenamiento en caché.

Los recursos estáticos deben tener una vida útil de caché de al menos una semana. Para recursos de terceros como anuncios o widgets, deben tener una vida útil de caché de al menos un día.

Para todos los recursos almacenables en caché (archivos JS y CSS, archivos de imagen, archivos multimedia, PDF, etc.), establezca Caduca en un mínimo de una semana, y preferiblemente hasta un año en el futuro. No lo establezca en más de un año en el futuro porque eso viola las pautas de RFC.

5. Recursos Minify

Los recursos WYSIWYG facilitan la creación de una página web, pero a veces crean código desordenado, y eso puede ralentizar considerablemente su sitio web.

Dado que cada parte innecesaria de código se agrega al tamaño de su página, es importante que elimine espacios adicionales, saltos de línea y sangría en su código para que sus páginas sean lo más esbeltas posible.

También ayuda a minimizar su código. Aquí está la recomendación de Google:

• Para minimizar HTML, puede usar PageSpeed ​​Insights Chrome Extension para generar una versión optimizada de su código HTML. Ejecute el análisis en su página HTML y busque la regla ‘Minify HTML’. Haga clic en ‘Ver contenido optimizado’ para obtener el código HTML optimizado.
• Para minimizar CSS, puedes probar YUI Compressor y cssmin.js.
• Para minimizar JavaScript, pruebe el Compilador de cierre, JSMin o el Compresor YUI. Puede crear un proceso de compilación que use estas herramientas para minimizar y renombrar los archivos de desarrollo y guardarlos en un directorio de producción.

6. Optimizar imágenes

Con las imágenes, debe centrarse en tres cosas: tamaño, formato y el atributo src.

Tamaño de la imagen

Las imágenes de gran tamaño tardan más en cargarse, por lo que es importante que mantenga sus imágenes lo más pequeñas posible. Use herramientas de edición de imágenes para:

• Recorta tus imágenes al tamaño correcto. Por ejemplo, si su página tiene 570 píxeles de ancho, cambie el tamaño de la imagen a ese ancho. No solo cargue una imagen de 2000px de ancho y configure el parámetro de ancho (ancho = ”570”). Esto ralentiza el tiempo de carga de la página y crea una mala experiencia de usuario.
• Reduzca la profundidad de color al nivel más bajo aceptable.
• Eliminar comentarios de imagen.

Formato de imagen

• JPEG es tu mejor opción.
• PNG también es bueno, aunque los navegadores más antiguos pueden no ser totalmente compatibles.
• Los GIF solo deben usarse para gráficos pequeños o simples (menos de 10 × 10 píxeles, o una paleta de colores de 3 o menos colores) y para imágenes animadas.
• No use BMP o TIFF.

Atributo Src

Una vez que tenga el tamaño y el formato correctos, asegúrese de que el código también sea correcto. En particular, evite los códigos src de imagen vacía.

En HTML, el código de una imagen incluye esto:

Cuando no hay una fuente entre comillas, el navegador realiza una solicitud al directorio de la página o a la página en sí. Esto puede agregar tráfico innecesario a sus servidores e incluso dañar los datos del usuario.

Consejo profesional: Tómese el tiempo para cambiar el tamaño de sus imágenes antes de cargarlas. Y siempre incluya el atributo src con una URL válida.

Para garantizar que sus imágenes se carguen rápidamente, considere agregar el complemento WP Smush.it a su sitio web.

7. Optimizar la entrega de CSS

CSS tiene los requisitos de estilo para su página. En general, su sitio web accede a esta información de una de dos maneras: en un archivo externo , que se carga antes de que se renderice su página, y en línea , que se inserta en el documento HTML.

El CSS externo se carga en la cabeza de su HTML con un código que se parece a esto:

El CSS en línea está anidado en el HTML de su página y tiene este aspecto:

En general, es preferible una hoja de estilo externa, ya que reduce el tamaño de su código y crea menos duplicaciones de código.

Consejo profesional: cuando configure sus estilos, use solo una hoja de estilo CSS externa, ya que las hojas de estilo adicionales aumentan las solicitudes HTTP. Aquí hay dos recursos que pueden ayudar:

• Herramienta de entrega de CSS: le indica cuántas hojas de estilo externas está utilizando su sitio web.
• Instrucciones para combinar archivos CSS externos.

Evite incluir CSS en el código HTML, como divs o sus encabezados (como el CSS en línea que se muestra arriba). Obtiene una codificación más limpia si coloca todos los CSS en su hoja de estilo externa.

8. Priorice el contenido de la mitad superior de la página

Habiendo recomendado que use solo una hoja de estilo CSS y no CSS en línea, hay una advertencia que debe tener en cuenta. Puede mejorar la experiencia del usuario haciendo que la carga de la mitad superior de la página (parte superior de la página) se cargue más rápido, incluso si el resto de la página tarda unos segundos en cargarse.

Consejo profesional: considere dividir su CSS en dos partes: una parte corta en línea que da estilo a los elementos de la mitad superior de la página y una parte externa que puede diferirse.

9. Reduzca la cantidad de complementos que usa en su sitio

Demasiados complementos ralentizan su sitio, crean problemas de seguridad y, a menudo, provocan bloqueos y otras dificultades técnicas.

Consejo profesional: desactive y elimine los complementos innecesarios. Luego, elimine los complementos que disminuyan la velocidad de su sitio.

Intente deshabilitar selectivamente los complementos y luego mida el rendimiento del servidor. De esta manera, puede identificar cualquier complemento que dañe la velocidad de su sitio.

10. Reduce las redirecciones

Los redireccionamientos crean solicitudes HTTP adicionales y aumentan el tiempo de carga. Por lo tanto, desea mantenerlos al mínimo.

Si ha creado un sitio web receptivo, lo más probable es que tenga redireccionamientos para llevar a los usuarios móviles de su sitio web principal a la versión receptiva.

Consejo profesional: Google recomienda estas dos acciones para asegurarse de que una redirección receptiva no ralentice su sitio:

• Utilice un redireccionamiento HTTP para enviar a los usuarios con agentes de usuarios móviles directamente a la URL equivalente móvil sin redireccionamientos intermedios, y
• Incluya el marcado en las páginas de su escritorio para identificar la URL equivalente móvil para que Googlebot pueda descubrir sus páginas móviles.

Los siguientes consejos deberían ser más que suficientes para ayudarlo a mejorar la velocidad de carga de su sitio web:

• Optimizar imágenes: concéntrese en tres cosas importantes: tamaño, formato y atributo src. Reduzca el tamaño de la imagen antes de subirla a la página web (no se preocupe, no arruinará la calidad), de modo que la velocidad de carga del sitio web no se vea afectada debido a su tamaño. Pruebe y use archivos JPEG para las imágenes y los GIF solo deben usarse para imágenes pequeñas y animadas.
• Reduzca los redireccionamientos: los redireccionamientos utilizan los códigos de estado 301 y 302. Redirect aumenta las solicitudes HTTP, que en última instancia aumentan el tiempo de carga de su sitio web. El navegador se redirige de una URL a otra para conectar diferentes partes del sitio o para dirigirlo a una nueva ubicación de una URL. Se recomienda mantener las URL que son realmente necesarias y no hay solución para ello. Precaución: ¡ nunca redirija a un dominio que no sirva contenido!
• Use una red de entrega de contenido (CDN): si tiene una cantidad considerable de tráfico, ¡entonces vale la pena buscar CDN! Las redes de entrega de contenido funcionan sirviendo páginas de acuerdo con la ubicación geográfica del usuario. Esto resulta en entregar el contenido de manera más eficiente a los usuarios.
• Habilitar el almacenamiento en caché de Broswer: esto es como una bendición en caso de visitantes que regresan. Cada vez que un visitante visita su sitio por primera vez, sus navegadores descargan todo tipo de archivos como imágenes, CSS, Java, etc. ¡Aquí viene el giro! Al habilitar el almacenamiento en caché del navegador, el navegador del visitante que ingresa por segunda vez en el sitio web no tendría que descargar esos archivos nuevamente, ahorrando así parte del tiempo de carga, lo que aumenta la experiencia del usuario.
• Eliminar complementos innecesarios: los complementos son atractivos ya que agregan características adicionales que no están presentes en el tema predeterminado. ¡Pero ten cuidado! Se suman a la velocidad de carga del sitio web. Realice una auditoría cuidadosa de todos sus complementos. Después de detectar los que pueda considerar innecesarios, desactívelos y luego mida el rendimiento del sitio web, para que pueda identificar fácilmente los complementos que dañan su sitio web.
• Habilitar compresión: un sitio web más ágil es siempre un sitio web más rápido y mejor. Las páginas grandes a menudo son voluminosas y lentas mientras se cargan. Estas páginas se pueden COMPRIMIR en formato GZIP para aumentar la velocidad de carga del sitio web. La compresión reduce la respuesta HTTP de la página al reducir su ancho de banda. Esto podría reducir el tiempo de descarga en casi un 70%.

Confía en que esto ayuda.

Estos son algunos de los consejos y trucos para aumentar la velocidad de su sitio web:

Nunca use recursos dentro de un bucle

Se supone que los recursos no deben usarse dentro de los bucles. Recursos significa mecanismo que tiene la capacidad de comunicarse con otra aplicación. Por ejemplo, conexión de base de datos. Se recomienda que nunca realice consultas SQL dentro de un bucle.

Lo mismo ocurre con sockets, operaciones de archivos, etc.

Usar caché

Si el resultado es siempre el mismo, es mejor usar caché o código duro de esas cosas. A menudo, en laravel, los guardo en un entorno de archivos de configuración. No es necesario recurrir a la base de datos ni a ninguna otra API.

Encabezados de respuesta adecuados

No acepte los datos incorrectos. Use aceptar encabezado en cada solicitud. Dígale al servidor qué tipo de datos es aceptable. Conduce al filtrado de datos que se pueden pasar. De esta manera, su servidor no tiene que atender solicitudes que no pueden.

Además, responda con código de estado en lugar de texto. Esto es mucho más rápido porque hay menos datos para transferir.

Comprime tus datos

Siempre comprima los datos textuales usando gzip. Significa menos datos para transferir a los servidores. Pero no lo hagas más. No comprima datos de menos de 10 KB.

Negociar el contenido

La negociación de contenido es algo que sucede en la programación API. Usted le pregunta al servidor qué datos se requieren y qué datos no se requieren. Por ejemplo, puede solicitar un correo electrónico solo en alcance, de modo que el servidor solo enviará direcciones de correo electrónico descartando el resto.

Optimizar y minimizar

1. No hagas solicitudes innecesarias. Combina tus archivos de activos en un solo archivo.
2. Eliminar complementos innecesarios.
3. Minifique todos los archivos de javascript, css y posiblemente html también.
4. Optimiza las imágenes. La calidad de las imágenes de 10 MB se puede reducir a 700 KB sin perder mucha calidad para la web.
5. Intente recuperar los datos por separado si no los necesita de inmediato, como utilizar la paginación o la carga diferida.

Terminar la solicitud

La aplicación ocupa espacio en la memoria, por lo tanto, intente finalizarla tan pronto como sea posible.

Utiliza mejores tecnologías

1. Intente utilizar servidores dedicados en lugar de alojamiento compartido. Son baratos hoy en día.
2. No use controladores basados ​​en archivos. Considere usar las alternativas disponibles como redis o memcached.
3. Use Algolia, solr o lucene para los sistemas de búsqueda. Su base de datos tendrá menos solicitudes para tratar.
4. Consulte los scripts de terceros a cdn (red de entrega de contenido). Sus servidores son generalmente más rápidos y manejan más solicitudes con un sistema de caché eficiente.

Echa un vistazo a estos sitios web. Se abren muy rápido en el navegador.

1. Alojamiento
2. Vivienda en cualquier lugar
3. Laravel
4. Seguro
5. Varvy

Fuente: Laravel Nepal | De los desarrolladores de laravel de Nepal

La velocidad del sitio web es una parte inmensamente importante del desarrollo del sitio web porque el tiempo de carga de las páginas web tiene un efecto de cadena, ya que afecta el Tiempo de permanencia y la Tasa de rebote, lo que aumenta el ranking de su sitio web en las páginas de resultados de motores de búsqueda (SERP).

1. Tiempo de permanencia : es la cantidad de tiempo que un usuario pasa en su sitio web o página web. Por lo tanto, cuando un usuario pasa más tiempo en su sitio web, los motores de búsqueda como Google, Yahoo, Bing, etc. favorecerán automáticamente su sitio web y permitirán que sea expuesto a más público.

2. Tasa de rebote: la tasa a la que los visitantes se van dentro de los primeros segundos después de ser redirigidos a su sitio web o página web. Una excelente tasa de rebote es entre 26% a 40%.

Cuando su sitio web toma tiempo para cargar todos los contenidos en su página, reducirá el tiempo de permanencia y aumentará la tasa de rebote, lo que afectará el ranking de su motor de búsqueda.

Formas de mejorar la velocidad del sitio web

La reducción de las solicitudes HTTP seguramente aumentará la velocidad de su sitio web porque el Protocolo de transferencia de hipertexto (HTTP) funciona como un medio que envía la solicitud del contenido de su página al servidor en un intento de responder con el contenido, y cuando el servidor responde, todos se carga el contenido de tu página. Si las solicitudes HTTP no se minimizan, el tiempo de carga aumentará, pero ¿cómo puede reducir las solicitudes HTTP?

1. Optimizar imágenes

Las imágenes de alta resolución son uno de los factores importantes en su sitio web que afectan el tiempo de carga, ya que lleva mucho tiempo procesarlas, por lo que se recomienda utilizar imágenes de menos de 100 kb.

Hay dos cosas a tener en cuenta al agregar imágenes:

• Formato de imagen

JPEG es uno de los mejores formatos para imágenes porque tales imágenes están comprimidas y deben usarse para imágenes que tienen muchas paletas de colores. Si desea agregar imágenes de alta resolución, debe usar el formato JPEG.

PNG se utilizan para imágenes con una resolución pequeña y tiene un porcentaje de transparencia.

Los GIF se deben usar para imágenes de tamaño muy pequeño y animadas, como iconos, banderas, etc.

• Tamaño de la imagen

Como hemos dicho, el tamaño es importante cuando se trata del tiempo de carga del sitio web, por lo tanto, cambiar el tamaño de una imagen con el ancho de su sitio web mejorará el tiempo de carga y se recomienda cambiar el tamaño de las imágenes a menos de 2000px, pero asegúrese de que la calidad no se vea afectada. Una imagen de 5000 px cuando se reduce su tamaño por debajo de 2000 px reducirá la calidad.

2. Tratar con JavaScript (JS) y archivos CSS

Los archivos JS y CSS realmente afectan su tiempo de carga, pero ¿cómo puede usarlos de tal manera que mejore la velocidad del sitio web?

• Concentrar archivos JS y CSS ayudará a acelerar su sitio web. Coloque estos archivos bajo un mismo techo para que no guarde varios archivos, lo que permitirá que su sitio web envíe pocas solicitudes. No solo mejora el tiempo de carga de la página, sino que brinda una excelente experiencia de usuario (UX).
• Minimice los archivos CSS y JS para eliminar todos los caracteres innecesarios del código fuente sin causar la funcionalidad y accesibilidad de su sitio, incluso si se navega a través de dispositivos informáticos o dispositivos digitales, esto ayudará a mejorar el tiempo de carga.
• Mueva JavaScript en la parte inferior en lugar de la sección del encabezado; de lo contrario, el contenido de su página no aparecerá hasta que se cargue toda la página desde el back-end. Ahora, ahora la razón por la que se muestra un espacio en blanco durante los primeros segundos después de ser redirigido, esto no acelera su tiempo de carga, pero cuando se presenta la página en blanco a los usuarios, muchos se irán al instante percibiendo que el sitio web está tardando en cargarse .

3. Habilitar caché del navegador

Un factor altamente recomendado, sin embargo, no acelerará el tiempo de carga para todos los usuarios o, digamos, para aquellos usuarios que se redirigen por primera vez. Cuando está habilitado, todos los componentes de la página se guardan en la memoria caché de los visitantes, y cuando ese usuario vuelva a visitar, las solicitudes HTTP no tendrán que volver a enviarse.

4. Compresión Gzip

Gzip es un proceso que permite reducir el tamaño del archivo y lo hace comprimiendo los archivos como JavaScript, PHP, HTML, CSS de su tamaño original en un 30%, lo que hace que la página web se cargue bastante más rápido que antes.

Estos archivos comprimidos se envían al navegador de los usuarios y se descomprimirán automáticamente para que vuelvan a su tamaño original y se carguen para los espectadores.

Puede habilitar la compresión gzip para Apache usando el archivo .htaccess usando las siguientes modificaciones:

• mod_deflate
• mod_gzip

Aunque no importa qué mod uses, porque mod_deflate es compatible con muchos servidores y está configurado y documentado mejor.

Use uno de los siguientes códigos para habilitar mod_deflate

Use uno de los códigos que figuran a continuación para habilitar mod_gzip si mod_deflate no funciona

NOTA: Coloque uno de estos códigos en el archivo .htaccess que se puede encontrar en la carpeta raíz del sitio web.

10 maneras de acelerar su sitio web y mejorar la conversión en un 7%

Un retraso de 1 segundo en el tiempo de carga de la página produce:

• 11% menos visitas a la página
• 16% de disminución en la satisfacción del cliente
• 7% de pérdida en conversiones (fuente: Aberdeen Group)

Amazon descubrió que esto es cierto, informando mayores ingresos del 1% por cada 100 milisegundos de mejora en la velocidad de su sitio. (fuente: Amazon)

También Walmart, que encontró un aumento del 2% en las conversiones por cada 1 segundo de mejora.

Fuente de imagen

Eso no es todo. Un estudio de Akamai encontró que:

• El 47% de las personas espera que una página web se cargue en dos segundos o menos.
• El 40% abandonará una página web si tarda más de tres segundos en cargarse.
• El 52% de los compradores en línea dice que la carga rápida de páginas es importante para su lealtad a un sitio.

Pero la velocidad de carga promedio del sitio web ha aumentado un 22% este año, según un informe de Radware.

Ahora tarda 7.72 segundos en cargarse, muy lejos del límite de dos segundos de su usuario promedio.

Claramente, acelerar su sitio web es crítico, no solo para posicionarse bien con Google, sino para mantener altas sus ganancias finales. Así que hoy, voy a profundizar, compartiendo 10 cosas que puede hacer para reducir segundos la velocidad de su sitio y disfrutar de mayores ganancias.

10 cosas que puedes hacer para acelerar tu sitio

1. Minimice las solicitudes HTTP

Según Yahoo, el 80% del tiempo de carga de una página web se gasta descargando las diferentes partes de la página: imágenes, hojas de estilo, scripts, Flash, etc. Se realiza una solicitud HTTP para cada uno de estos elementos, por lo que más información sobre -componentes de página, cuanto más tiempo tarda la página en renderizarse.

Siendo ese el caso, la forma más rápida de mejorar la velocidad del sitio es simplificar su diseño.

• Agilice la cantidad de elementos en su página.
• Use CSS en lugar de imágenes siempre que sea posible.
• Combina múltiples hojas de estilo en una.
• Reduzca los guiones y colóquelos al final de la página.

Siempre recuerde, cuando se trata de su sitio web, más ágil es mejor.

Consejo profesional: comience una campaña para reducir la cantidad de componentes en cada página. Al hacer esto, reduce la cantidad de solicitudes HTTP necesarias para que la página se procese, y mejorará significativamente el rendimiento del sitio.

2. Reduce el tiempo de respuesta del servidor

Su objetivo es un tiempo de respuesta del servidor de menos de 200 ms (milisegundos). Y si sigue los consejos de este artículo, está en camino de lograrlo.

Google recomienda utilizar una solución de monitoreo de aplicaciones web y verificar cuellos de botella en el rendimiento.

Consejo profesional: lea este informe de Singlehop, Critical Ecommerce Infrastructure Needs Needs, para conocer nueve cosas en las que debe concentrarse para que su sitio funcione bien.

Luego aproveche estos recursos:

• Yslow: para evaluar la velocidad de su sitio y obtener consejos sobre cómo mejorar el rendimiento.
• Herramientas PageSpeed ​​de Google: para obtener más información sobre las mejores prácticas de rendimiento y automatizar el proceso.

3. Habilitar la compresión

Las páginas grandes (que es lo que podría tener si está creando contenido de alta calidad) a menudo son de 100 kb y más. Como resultado, son voluminosos y lentos para descargar. La mejor manera de acelerar su tiempo de carga es comprimirlos, una técnica llamada compresión .

La compresión reduce el ancho de banda de sus páginas, lo que reduce la respuesta HTTP. Lo haces con una herramienta llamada Gzip.

La mayoría de los servidores web pueden comprimir archivos en formato Gzip antes de enviarlos para su descarga, ya sea llamando a un módulo de terceros o utilizando rutinas integradas. Según Yahoo, esto puede reducir el tiempo de descarga en aproximadamente un 70%.

Y dado que el 90% del tráfico actual de Internet viaja a través de navegadores que admiten Gzip, es una excelente opción para acelerar su sitio.

Consejo profesional: lea este artículo para obtener más detalles sobre la compresión Gzip. Luego configure su servidor para habilitar la compresión:

• Apache: use mod_deflate
• Nginx: use HttpGzipModule
• IIS: configurar la compresión HTTP

4. Habilitar el almacenamiento en caché del navegador

Cuando visita un sitio web, los elementos de la página que visita se almacenan en su disco duro en un caché o almacenamiento temporal, por lo que la próxima vez que visite el sitio, su navegador puede cargar la página sin tener que enviar otra solicitud HTTP a el servidor.

Así es como Tenni Theurer, anteriormente de Yahoo, lo explica …

La primera vez que alguien visita su sitio web, debe descargar el documento HTML, las hojas de estilo, los archivos javascript y las imágenes antes de poder usar su página. Eso puede ser de hasta 30 componentes y 2.4 segundos.

Una vez que la página ha sido cargada y los diferentes componentes almacenados en la memoria caché del usuario, solo es necesario descargar algunos componentes para visitas posteriores.

En la prueba de Theurer, eso fue solo tres componentes y .9 segundos, lo que redujo casi 2 segundos el tiempo de carga.

Theurer dice que entre el 40 y el 60% de los visitantes diarios de su sitio ingresan con un caché vacío, por lo que es fundamental que haga que su página sea más rápida para estos visitantes nuevos. Pero también debe habilitar el almacenamiento en caché para ahorrar tiempo en las visitas posteriores.

Consejo profesional: lea este artículo para conocer cuatro métodos para habilitar el almacenamiento en caché.

Los recursos estáticos deben tener una vida útil de caché de al menos una semana. Para recursos de terceros como anuncios o widgets, deben tener una vida útil de caché de al menos un día.

Para todos los recursos almacenables en caché (archivos JS y CSS, archivos de imagen, archivos multimedia, PDF, etc.), establezca Caduca en un mínimo de una semana, y preferiblemente hasta un año en el futuro. No lo establezca en más de un año en el futuro porque eso viola las pautas de RFC.

5. Recursos Minify

Los recursos WYSIWYG facilitan la creación de una página web, pero a veces crean código desordenado, y eso puede ralentizar considerablemente su sitio web.

Dado que cada parte innecesaria de código se agrega al tamaño de su página, es importante que elimine espacios adicionales, saltos de línea y sangría en su código para que sus páginas sean lo más esbeltas posible.

También ayuda a minimizar su código. Aquí está la recomendación de Google:

• Para minimizar HTML, puede usar la extensión de Chrome PageSpeed ​​Insights para generar una versión optimizada de su código HTML. Ejecute el análisis en su página HTML y busque la regla ‘Minify HTML’. Haga clic en ‘Ver contenido optimizado’ para obtener el código HTML optimizado.
• Para minimizar CSS, puedes probar YUI Compressor y cssmin.js.
• Para minimizar JavaScript, pruebe el Compilador de cierre, JSMin o el Compresor YUI. Puede crear un proceso de compilación que use estas herramientas para minimizar y renombrar los archivos de desarrollo y guardarlos en un directorio de producción.

6. Optimizar imágenes

Con las imágenes, debe centrarse en tres cosas: tamaño, formato y el atributo src.

Tamaño de la imagen

Las imágenes de gran tamaño tardan más en cargarse, por lo que es importante que mantenga sus imágenes lo más pequeñas posible. Use herramientas de edición de imágenes para:

• Recorta tus imágenes al tamaño correcto. Por ejemplo, si su página tiene 570 píxeles de ancho, cambie el tamaño de la imagen a ese ancho. No solo cargue una imagen de 2000px de ancho y configure el parámetro de ancho (ancho = ”570”). Esto ralentiza el tiempo de carga de la página y crea una mala experiencia de usuario.
• Reduzca la profundidad de color al nivel más bajo aceptable.
• Eliminar comentarios de imagen.

Formato de imagen

• JPEG es tu mejor opción.
• PNG también es bueno, aunque los navegadores más antiguos pueden no ser totalmente compatibles.
• Los GIF solo deben usarse para gráficos pequeños o simples (menos de 10 × 10 píxeles, o una paleta de colores de 3 o menos colores) y para imágenes animadas.
• No use BMP o TIFF.

Atributo Src

Una vez que tenga el tamaño y el formato correctos, asegúrese de que el código también sea correcto. En particular, evite los códigos src de imagen vacía.

En HTML, el código de una imagen incluye esto:

Cuando no hay una fuente entre comillas, el navegador realiza una solicitud al directorio de la página o a la página en sí. Esto puede agregar tráfico innecesario a sus servidores e incluso dañar los datos del usuario.

Consejo profesional: Tómese el tiempo para cambiar el tamaño de sus imágenes antes de cargarlas. Y siempre incluya el atributo src con una URL válida.

Para garantizar que sus imágenes se carguen rápidamente, considere agregar el complemento WP Smush.it a su sitio web.

7. Optimizar la entrega de CSS

CSS tiene los requisitos de estilo para su página. En general, su sitio web accede a esta información de una de dos maneras: en un archivo externo , que se carga antes de que se renderice su página, y en línea , que se inserta en el documento HTML.

El CSS externo se carga en la cabeza de su HTML con un código que se parece a esto:

El CSS en línea está anidado en el HTML de su página y tiene este aspecto:

En general, es preferible una hoja de estilo externa, ya que reduce el tamaño de su código y crea menos duplicaciones de código.

Consejo profesional: cuando configure sus estilos, use solo una hoja de estilo CSS externa, ya que las hojas de estilo adicionales aumentan las solicitudes HTTP. Aquí hay dos recursos que pueden ayudar:

• Herramienta de entrega de CSS: le indica cuántas hojas de estilo externas está utilizando su sitio web.
• Instrucciones para combinar archivos CSS externos.

Evite incluir CSS en el código HTML, como divs o sus encabezados (como el CSS en línea que se muestra arriba). Obtiene una codificación más limpia si coloca todos los CSS en su hoja de estilo externa.

8. Priorice el contenido de la mitad superior de la página

Habiendo recomendado que use solo una hoja de estilo CSS y no CSS en línea, hay una advertencia que debe tener en cuenta. Puede mejorar la experiencia del usuario haciendo que la carga de la mitad superior de la página (parte superior de la página) se cargue más rápido, incluso si el resto de la página tarda unos segundos en cargarse.

Consejo profesional: considere dividir su CSS en dos partes: una parte corta en línea que da estilo a los elementos de la mitad superior de la página y una parte externa que puede diferirse.

9. Reduzca la cantidad de complementos que usa en su sitio

Demasiados complementos ralentizan su sitio, crean problemas de seguridad y, a menudo, provocan bloqueos y otras dificultades técnicas.

Consejo profesional: desactive y elimine los complementos innecesarios. Luego, elimine los complementos que disminuyan la velocidad de su sitio.

Intente deshabilitar selectivamente los complementos y luego mida el rendimiento del servidor. De esta manera, puede identificar cualquier complemento que dañe la velocidad de su sitio.

10. Reduce las redirecciones

Los redireccionamientos crean solicitudes HTTP adicionales y aumentan el tiempo de carga. Por lo tanto, desea mantenerlos al mínimo.

Si ha creado un sitio web receptivo, lo más probable es que tenga redireccionamientos para llevar a los usuarios móviles de su sitio web principal a la versión receptiva.

Consejo profesional: Google recomienda estas dos acciones para asegurarse de que una redirección receptiva no ralentice su sitio:

• Utilice un redireccionamiento HTTP para enviar a los usuarios con agentes de usuarios móviles directamente a la URL equivalente móvil sin redireccionamientos intermedios, y
• Incluya el marcado en las páginas de su escritorio para identificar la URL equivalente móvil para que Googlebot pueda descubrir sus páginas móviles.

¿Suena demasiado técnico? No te preocupes Esta publicación de VerveSearch lo ayuda a navegar su cambio a un sitio web optimizado para dispositivos móviles sin comprometer la velocidad.

La línea de fondo

Algunos de estos consejos son fáciles de implementar, pero algunos son tácticas avanzadas que pueden ser intimidantes si no estás técnicamente inclinado.

Si ese es el caso, es posible que desee obtener ayuda. Aquí hay algunos recursos que puedo recomendar:

• Si te gusta profundizar y hacerlo tú mismo, Google Developers tiene información útil que puede ayudarte a mejorar el rendimiento del sitio.
• Para una solución hecha para usted, considere un servidor totalmente administrado como SingleHop.

Ahora es tu turno.

Artículo original en 10 maneras de acelerar su sitio web y mejorar la conversión en un 7%

Ejecute su sitio a través de Google Page Speed ​​Insights: los resultados le dirán qué hacer. También me gusta Speedcurve para monitorear de manera continua.

Muchos desarrolladores no minimizan su código, por lo que es un Rx común, ya que es “Eliminar JavaScript y CSS que bloquean el procesamiento en el contenido de la mitad superior de la página”. Incluso algunas agencias de marketing que prometen que minificarán su código antes del lanzamiento, no lo hagan. No lo hagas.

Si está utilizando Bootstrap, asegúrese de haber eliminado trozos de código innecesario / no utilizado.

Si varios usuarios tienen acceso para publicar en su sitio, revise y controle el tamaño de las imágenes que publican. Es común que los usuarios sean descuidados y publiquen imágenes de 1 MB: la carga aumenta con el tiempo. Asegúrese de editar la imagen antes de publicarla y no solo use una herramienta de cambio de tamaño de CMS.

Cuando planifique, modifique o administre un sitio, cree un “presupuesto” de rendimiento: un objetivo cuantificable estricto para la velocidad de carga de un sitio web y el peso de la página de destino (tamaño total de archivo de una página y todos sus activos). Asegúrese de que la administración lo apoyará cuando diga “no” a cualquier adición que envíe su sitio “por encima del presupuesto”. (En algunas organizaciones puede ser imposible obtener una cooperación consistente en esto). Google “Fronthouse Performance Optimization Treehouse” a ver un curso corto y directo sobre el tema.

Truco de Drupal: ¡Usa Pressflow (un tenedor de Drupal) + memcached + Barniz para aumentar la velocidad de tu sitio!

Consejo: Si está utilizando un servicio de alojamiento genial como Acquia, solicite el consejo de su equipo técnico.

¡Buena suerte!

La gente ha compartido tantos ejemplos asombrosos sobre cómo mejorar la velocidad del sitio que pensé agregar a la conversación con algunos estudios de casos.

¡Estos estudios de caso comparten una visión más detallada de algunos de los desafíos y obstáculos para realizar el trabajo de optimización de la velocidad real del sitio!

Estudio de caso: acelerar el blog de Vendasta

En Vendasta, hemos trabajado mucho en la velocidad de nuestro sitio, pero todavía no estamos donde queremos estar (44/100 para velocidad móvil y 60/100 para velocidad de escritorio). Sin embargo, hay más en nuestra historia de lo que la herramienta de información de Google le dirá. En realidad, hemos realizado muchas mejoras, pero tenemos un sitio grande con una tonelada de contenido, por lo que todavía no estamos en nuestro objetivo de 80/100 para dispositivos móviles y de escritorio.

Sin embargo, ¡no somos los únicos que luchan con la velocidad del sitio! Muchos sitios web de alto perfil comparten los mismos desafíos que nosotros. De hecho, incluso HubSpot también tiene trabajo por hacer para mejorar el rendimiento de su sitio de acuerdo con la herramienta PageSpeed ​​Insights de Google:

Esta no es una llamada de “disparos” de HubSpot (¡respeto!), Solo los estoy usando como un ejemplo para ilustrar que mejorar la velocidad del sitio puede ser un desafío, incluso para los profesionales, y que todos debemos mejorar para Satisfacer las demandas de la próxima generación de usuarios de Internet. Ejecute algunos de sus sitios favoritos a través de la herramienta y verá lo que quiero decir.

Como mencioné anteriormente, cada mejora que hacemos para acelerar las cosas puede tener resultados exponenciales.

Adam Bissonnette, tecnólogo de marketing de Vendasta, señala:

“El gran cambio para nosotros fue el lado del servidor: estamos en una posición única al ejecutar nuestro sitio web de WordPress en AppEngine (nadie lo hace) y los grandes aumentos de rendimiento fueron cambiar de AppEngine Standard a AppEngine Flex que estaba en Beta. También cambiamos nuestra versión php de 5 a 7, que también ayudó mucho. La actualización de php trajo su propio conjunto de problemas donde ciertos complementos ya no funcionaban y tuvimos que lidiar con las consecuencias durante un mes o dos, pero la velocidad fue más valiosa que la funcionalidad perdida “.

Lo que puede sacar de esto es que encontrar la mejor solución para su situación específica es clave. ¡Puede encontrar esas tácticas que mueven la aguja de su sitio que ni siquiera hemos mencionado aquí!

Eche un vistazo al crecimiento de nuestro blog después del inicio de los esfuerzos de velocidad de nuestro sitio en mayo de 2016:

Estas mejoras prepararon el escenario para todas las iniciativas de contenido de Vendasta que siguieron. Desde ese momento, nos hemos centrado en producir un alto volumen de contenido profundo y de calidad. Sin nuestras mejoras coincidentes en la velocidad del sitio, es poco probable que vea el aumento en el tráfico que muestra la captura de pantalla de análisis.

¡El rendimiento solo mejorará a medida que continuemos optimizando la velocidad de nuestro sitio y mejorando nuestra experiencia de usuario!

Conclusión clave: no necesita obtener un puntaje de 100/100 para experimentar un crecimiento en su sitio web.

Si está en 40/100, realice un par de mejoras a medida que el tiempo lo permita y dispare para 60/100. ¡No te quemes disparando por 100/100 de inmediato!

---

Estudio de caso: iHeartRaves

iHeartRaves es un líder mundial en moda de festivales cuya misión es inspirar la creatividad individual y potenciar la autoexpresión. Combinadas con sus otras dos marcas hermanas, sus tiendas Shopify están recaudando $ 20 millones al año y han aparecido en el Inc. 5000 cuatro años seguidos.

Como sitio de comercio electrónico, iHeartRaves es claramente consciente de las ramificaciones financieras de la baja velocidad y rendimiento del sitio web.

Brandon Chopp, estratega de marketing digital de iHeartRaves me dijo:

“Como marca de comercio electrónico, nos dimos cuenta de que la velocidad del sitio es enorme. Cuando pienso en las conversiones, pienso en las mejores formas de hacer que un usuario haga clic en algo a través de un llamado a la acción. La verdad del asunto es que los sitios web más rápidos siempre ganarán. Cuanto más rápido sea su sitio, más probable es que los usuarios se conviertan “.

Brandon sabía que tenía que mejorar la velocidad del sitio para ayudar al negocio a alcanzar sus objetivos de crecimiento de ingresos. Abordó las mejoras de velocidad de iHeartRaves usando las siguientes tácticas:

1. Optimizar imágenes: para garantizar que nuestro sitio móvil se cargue rápidamente, utilizamos una aplicación Shopify llamada Crush.pics. Esto garantiza que todas nuestras imágenes estén optimizadas para la velocidad del sitio, al tiempo que conservan la calidad de la imagen.
2. Minify Code: también tomamos medidas para minimizar todo nuestro código líquido y priorizamos el orden de carga de script mientras reducimos el número total de scripts que se están llamando.
3. Limpie los activos en la página: la eliminación de activos innecesarios en algunas páginas y la reducción de los activos de imágenes en otras también ayudó a reducir el tiempo de carga del sitio. Intentamos equilibrar entre velocidad y contenido, porque somos un sitio de comercio electrónico. Es muy importante para nosotros asegurarnos de que nuestra calidad de imagen esté a la altura de nuestros estándares, al tiempo que mantenemos una excelente experiencia de usuario para nuestros clientes.

Los resultados de la velocidad de carga de la página y la tasa de rebote realmente mejoraron con estas actualizaciones: “Desde que realizamos cambios, la velocidad de nuestro sitio ha disminuido de 10.25 a 6.86 segundos año tras año (una disminución del 65%), y nuestra tasa de rebote disminuyó en un 6%”, explica Brandon . “Originalmente estaba en 40.34% y ahora ha bajado a 34%”.

Estas mejoras también se han traducido en resultados financieros tangibles para iHeartRaves. “Nos hemos beneficiado en Google de tener un sitio móvil rápido porque nuestra tasa de conversión ha aumentado año tras año gracias en gran parte a la disminución de la velocidad de nuestro sitio. Al dar prioridad a la experiencia del usuario del cliente, hemos podido retener a nuestros clientes y hacer que sea una experiencia de compra más fácil en todos los aspectos “.

Conclusión clave: es importante recordar que la velocidad y la experiencia del usuario van de la mano.

Combinados, los dos pueden conducir a mejoras en la única métrica que los gobierna a todos: ¡Conversiones!

---

Estudio de caso: 6 segundos de Jubaer y 40 puntos de mejora

El propio especialista en SEO de Vendasta, Jubaer Prodhan, compartió una instancia en la que siguió la herramienta Pagespeed Insight Tool de Google para su propio sitio con algunos buenos resultados.

Jubaer señala: “En mi caso, tengo un sitio web de WordPress con un tiempo de carga de más de 8 segundos y un puntaje GPI (Google PageSpeed ​​Insight) de 43. Hice lo siguiente para mejorar la velocidad del sitio”:

1. Optimización de imagen: si se realiza correctamente, puede reducir drásticamente el tamaño y la velocidad de la página. En mi caso, el tamaño de la página bajó de 3MB a 1.6mb. Complemento utilizado: Optimizador de imágenes ShortPixel (también puede optimizar imágenes con esta herramienta)
2. Minificación de código: a menudo utilizamos múltiples complementos de WordPress para nuestras diversas necesidades. De lo que no nos damos cuenta es que la mayoría de ellos agregan CSS / HTML / Javascript adicionales a su sitio. Lo que aumenta el tiempo de carga y la solicitud del navegador. Minificar (eliminar líneas y códigos adicionales) es una solución fácil para esto. Complemento utilizado: optimización automática
3. Caché del navegador: la mayoría de las herramientas principales recomiendan el uso de la memoria caché del navegador. Y reduce el ancho de banda, el tiempo de carga para el visitante que regresa y muchas otras cosas útiles. Complemento utilizado: WP Fastest Cache

¡El sitio de Jubaer ahora se carga en 1.9 segundos y el puntaje GPI es 83! Esa es una gran mejora de 8 segundos y un puntaje GPI de 43.

Conclusión clave: los sitios web más pequeños pueden ver mejoras marcadas en la velocidad con solo unos pocos cambios clave.

Intenta trabajar en la lista de Jubaer para comenzar y ver qué resultados obtienes antes de continuar con las siguientes tácticas.

---

Estudio de caso: Cómo una empresa logró un 100/100 en la herramienta PageSpeed ​​de Google

Obtener ese 100/100 es una indicación de que su sitio está tan optimizado para la velocidad como sea posible. Es el objetivo final, y una compañía con la que hablé explicó un par de tácticas internas que los ayudaron a llegar allí.

Bret Bonnet, copropietario / fundador de Quality Logo Products, un distribuidor de productos promocionales de $ 40 millones ubicado en Chicago, IL. explica

“La velocidad de la página es un enfoque principal para nuestra organización. Aunque es muy pequeño, sigue siendo una señal de clasificación. Los estudios han demostrado que la velocidad de la página puede tener un impacto dramático en el rendimiento de la conversión. La forma más efectiva de mejorar el tiempo de carga de su sitio web es trabajar con la carga de activos, permitiendo que el contenido “por encima del pliegue” se muestre por completo antes de cargar el CSS / JS. NO optimizar la carga de contenido “por encima del pliegue” puede resultar en una deducción de 10 puntos en la puntuación general de Google Page Speed ​​Insights “.

Esta deducción de 10 puntos muestra lo importante que Google cree que es optimizar el contenido por encima del pliegue. Lo que es sorprendente y paradójico es lo que Bret explica a continuación:

“Además de la gestión de activos, un sitio web NO PUEDE lograr un puntaje perfecto que incluya un código de seguimiento común de Google AdWords o Google Analytics en su código fuente. Estos archivos JS se sirven directamente de Google, por cualquier motivo, Google no sigue sus propias pautas de calidad y se transmiten al navegador sin comprimir. Esta pobre optimización, que nuevamente está fuera de su control, está completamente del lado de Google y puede costarle hasta 5 puntos “.

Quality Logo Products pudo acelerar las cosas y alcanzar ese 100/100 usando la siguiente táctica:

“Para superar esto, registramos las IP desde las que Google rastrea y las IP de origen para estas herramientas y nuestros servidores sirven intencionalmente las versiones de Google de nuestras páginas sin su código de seguimiento instalado. Es un poco extraño, pero Google está perjudicando nuestro propio puntaje de Google Page Speed ​​Insight. Entonces, para superarlo, intencionalmente no servimos a Google su propio código no optimizado, lo que resulta en una mejora de 5 puntos en nuestro puntaje de velocidad de página en promedio “.

Conclusión clave: ¡ Se puede lograr un puntaje de 100/100!

Es confuso que los propios productos de Google ralenticen las cosas hasta tal punto, pero la solución en este estudio de caso debería ayudar.

¡Espero que estos ejemplos del mundo real de la optimización de la velocidad del sitio web ayuden! Esta publicación profundiza en consejos prácticos sobre cómo acelerar su sitio web.

Aquí estoy compartiendo algunos consejos. Puede ayudarlo a mejorar la velocidad de la página de su sitio web:

1. Compresión: casi todos y cada uno de los navegadores modernos admiten compresión. Entonces, después de verificar el soporte del navegador, su servidor puede comprimir GZIP cada recurso antes de transferirlo y luego el navegador lo descomprimirá. De esta manera, la cantidad de datos a transferir se puede reducir en aproximadamente un 60%. Por lo tanto, una gran mejora en la velocidad de carga.

2. Elimine sus códigos de seguimiento, incrustaciones de video y botones para compartir: no necesita cinco programas de análisis diferentes. Si bien los códigos de seguimiento son vitales para analizar el comportamiento del usuario en el sitio, los especialistas en marketing deben revisar cada programa de análisis y determinar cuál es necesario.

3. Caché: una gran cantidad de contenido en una página web no debe modificarse con frecuencia o, a veces, no cambiarse en absoluto. La mayoría de las imágenes, hojas de estilo y archivos de script java entran en esta categoría. El logotipo, por ejemplo, estará allí en cada página de su sitio web. Por lo tanto, no tiene sentido hacer que el navegador lo cargue una y otra vez para cada página.

4. Priorice el contenido visible: debe haber un mínimo de viajes de ida y vuelta requeridos para representar el contenido del pliegue de una página web. Esto hace que el navegador procese por encima de la parte doblada de la página primero para el visitante. Estas fueron las prácticas más comunes que deben ser atendidas para cada página web. No cubrimos algunas de las formas avanzadas de mejorar la velocidad de carga en este artículo, como el uso de CDN, etc. Todos estos puntos son importantes, pero muchas veces, algunos deben verse comprometidos por los desarrolladores a favor de otros.

5. Herramientas en línea para verificar la velocidad de carga de la página: además de verificar la velocidad y el rendimiento de carga de la página, estas herramientas en línea proporcionan sugerencias para realizar mejoras.

• Información de velocidad de la página de Google
• Pingdom
• GT metrix

Si tiene algún conocimiento técnico, también puede usar herramientas incorporadas de sus navegadores como Auditorías en herramientas de desarrollador de Google Chrome. Pero estas recomendaciones deben tomarse con un grano de sal.

Lea más en: Cómo mejorar la velocidad de la página: consejos y herramientas en línea de desarrolladores profesionales

Gracias

Si tienes un sitio web de WordPress, lo que voy a decirte es obvio …

Si no tiene un WordPress, solo necesita un lado izquierdo fuerte de su cerebro y un labio superior rígido (a menos que sea un codificador, entonces esto será un juego de niños).

¿Has oído hablar de AMP? Es sinónimo de “Páginas móviles aceleradas”, ¿Hola? ¿Aún despierto? Quédate conmigo.

Básicamente, lo que hace es hacer que su página se cargue súper rápido en el móvil y ayudar a que su sitio web sea amado por Google (que es un pretendiente que todos queremos cortejar). Si tiene un sitio de WordPress, todo lo que tiene que hacer es instalar un complemento gratuito (Ver AMP para la sección de WordPress).

En este Tutorial de Google AMP, le mostraré cómo convertir las páginas de su sitio a AMP y le explicaré algunos de los poderosos beneficios que obtendrá al hacerlo.

¿Qué es el AMP?

AMP significa páginas móviles aceleradas, es un proyecto de código abierto que hace que las páginas se carguen más rápido en dispositivos móviles. Puede reducir el tiempo que tarda su sitio web en cargarse a la mitad y lo sabemos, porque lo hizo por nosotros. En el video tutorial de Google AMP incluido en esta publicación, puede vernos instalándolo en vivo en nuestro sitio.

¿Estás listo para una definición técnica? Aquí está la redacción exacta que los creadores de AMP usaron para describirlo:

“AMP es una forma de crear páginas web para contenido estático que se procesan rápidamente. AMP es HTML con algunas restricciones”. -Proyecto acelerado de páginas móviles

¿Por qué actualizar sus páginas a AMP?

Como verá en el video a continuación, los estudios sugieren que el 40% de los usuarios se recuperarán de su página después de esperar solo tres segundos (aproximadamente al mismo tiempo que un Goldfish puede recordar cosas) (¡aunque la memoria de Goldfish está en disputa!)

Las páginas AMP hacen que su sitio web se cargue casi al instante. Lo hace al reducir la cantidad de html que puede usar, y le brinda una biblioteca de javascript que seguramente se cargará rápidamente (obtenga más información sobre cómo funciona, haga clic aquí)

Si alguna vez trató de cargar una página en su teléfono móvil y le llevó una eternidad, no es solo por la conexión a Internet, sino también por lo que el editor está tratando de lograr. Como se menciona en los editores de video, a menudo tienen que caminar por la delgada línea entre los tiempos de carga de la página y la monetización, gran parte de lo que ralentiza una página son los anuncios que pagan por el contenido gratuito. AMP proporciona una forma para que los editores y los usuarios se reúnan en el medio, donde el usuario obtiene su contenido rápidamente y la empresa obtiene su dinero.

Cómo actualizar su página a AMP (TÉCNICO)

ADVERTENCIA: si usted es un propietario de un negocio habitual, podrá hacer esta parte, pero no le va a gustar, no dude en enviarme un correo electrónico a [correo electrónico protegido] si se atasca, lo ayudaré a resolverlo . Si eres un usuario de WordPress, puedes pasar directamente a la siguiente sección, donde configurar AMP es un campo de Primroses.

Hagámoslo.

Lo primero que tendrá que hacer es abrir la guía oficial de configuración de AMP desde su sitio web haciendo clic en este enlace aquí. Luego, si estás en un lugar donde obtienes audio, mira nuestro tutorial sobre cómo configurar páginas AMP (si eres como yo, hay algo sobre ver a la gente explicar cosas técnicas en lugar de solo leerlo).

Aquí está el resumen básico de los pasos:

1. Crear página HTML de AMP: como mencioné al principio, AMP es un tipo especial de HTML y tiene requisitos particulares que debe tener para funcionar. Básicamente, está eliminando su página a sus elementos más importantes para que pueda cargar más rápido. Los requisitos que debe seguir se enumeran en esta página.
2. Modificar presentación y diseño: AMP ha incorporado técnicas de diseño que difieren del diseño CSS normal. Hay cosas específicas que puedes y no puedes hacer con él. Haz clic en el enlace de este paso y échale un vistazo.
3. Vista previa y validación: en este paso usted valida que el AMP cumple con las pautas de Google para que realmente funcione. Puede probar y ver si la página funciona yendo a la URL de la página y copiando y pegando esta etiqueta al final de la misma: # desarrollo = 1 También puede usar esta extensión de validación AMP
4. Prepare la página para su distribución: agregue enlaces y etiquetas canónicas. La razón por la que haces esto es para decirle a Google que estas dos páginas están vinculadas. Una vez que están vinculados y validados, están listos para comenzar.

AMP para WordPress (FÁCIL)

La vida es mejor en WordPress. Casi no necesitaría un “Tutorial de Google AMP” si todos fueran solo usuarios de WordPress (sin ofender a las otras plataformas).

Para que sus páginas se amplíen (es un juego de palabras que debe hacerse) es elegir uno de los dos complementos:

Aquí están tus elecciones:

1. Complemento AMP de Automattic: este complemento genera automáticamente versiones AMP de la publicación. Es posible que deba instalar Yoast SEO Glue si usa Yoast.
2. Páginas móviles aceleradas: este complemento también genera páginas AMP automáticas, pero le da un poco más de control.

Si desea vernos instalarlo en vivo en el sitio de Netmark, puede ver el video de arriba o simplemente hacer clic aquí.

Cómo ver si tu página se carga más rápido

Bueno, hemos cubierto mucho terreno en este artículo y si desea ver los frutos de su trabajo, puede probar el tiempo de carga normal de su página web y sus páginas AMP tomando las URL y comparándolas una al lado de la otra en gtmetrix. com. En el video tutorial incluido con este artículo, puede ver exactamente cómo hacerlo. Es realmente divertido ver que el tiempo de carga de su página se reduce a la mitad.

Si todo esto parece un poco técnico y desea que lo haga un profesional o simplemente desea saber más sobre cómo hacer que su sitio se muestre más rápido en dispositivos móviles. No dude en comunicarse conmigo en [correo electrónico protegido] o haga clic aquí para configurar una consulta gratuita.

Esto concluye nuestro tutorial de Google AMP. Siéntase libre de dejar un comentario a continuación contándome sus pensamientos.

– Consulte el artículo en: Tutorial de Google AMP: su guía completa para instalar AMP en su sitio

Puede mejorar la velocidad de su sitio web de muchas maneras diferentes.

Primero, el mejor lugar para comenzar es la herramienta de prueba de velocidad de Google para esto. PageSpeed ​​Insights.

Esta es una gran herramienta, ya que medirá las velocidades de su sitio de escritorio y móvil, clasificará su sitio entre 100 y también le dará una indicación de color: rojo, ámbar y verde.

Si obtiene algún resultado en rojo, realice los cambios lo antes posible, en ámbar aún querrá realizar los cambios, pero su sitio seguirá funcionando bien y el verde es excelente, continúe así.

Cuando se muestra en rojo, Google en realidad baja los sitios web lentos, como parte de su algoritmo, si un competidor es más rápido con contenido similar, por lo que desea realizar reparaciones, además de los estudios muestran que las personas no esperan mucho más de 3 segundos para sitios web (sin paciencia), por lo tanto, trate de estar por debajo de 3 segundos. Mi objetivo es obtener 2 segundos o menos.

Luego, la información le brinda la lista de cosas que debe cambiar y reparar para mejorar la velocidad de su sitio. Google es bastante bueno aquí y si te cuesta entenderlo, enlazan con una página de ayuda para resolver el problema.

Además, esto solo mide una página a la vez, por lo que vale la pena revisar cada una de sus páginas, lo que, dependiendo del tamaño de su sitio web, puede llevar tiempo, pero vale la pena hacerlo, para obtener una visión general completa del rendimiento de su sitio web.

Entonces, para comenzar, los problemas comunes que encontrará que afectan la velocidad de la página de las personas son:

• CCS: este es un lenguaje de codificación que se utiliza sobre HTML. CSS es responsable del diseño y el estilo de los sitios web y se puede optimizar, dependiendo de la plataforma que use o si está codificando, lo que también se puede hacer fácilmente cambiando las fuentes, los estilos y asegurándose de eliminar cualquier fragmento innecesario de código (recursos minificadores).
• Renderizar bloqueo de secuencia de comandos Java : la eliminación de fragmentos de secuencia de comandos Java impedirá que bloquee el contenido del pliegue anterior en su página. Arriba del pliegue está la parte inicial de su página que se carga en la pantalla de los usuarios. Si alguna vez ves que una página web se carga lentamente y esa primera parte en la parte superior se muestra, eso está arriba del pliegue. El script Java, si es demasiado grande, lo ralentizará (bloqueo de renderizado). Esencialmente, optimizar su código, como se indicó anteriormente, no tener mucho código resolverá esto. Este es un buen artículo [1] para darle una idea de cómo eliminar el script Java, y lo han puesto en términos más simples, lo que lo hace un poco más fácil de entender.
• Optimice imágenes y videos : esto se hace fácilmente, hay muchos optimizadores de imagen, aunque tenga cuidado ya que algunas de las “herramientas” en línea no “optimizan” sus imágenes muy bien, simplemente las cambian de tamaño. Reducir el tamaño de los archivos en su sitio es una manera fácil de reducir el tiempo de carga de su página.
• Aproveche el almacenamiento en caché del navegador : el apalancamiento entre la memoria caché del navegador utilizada también puede aumentar significativamente la velocidad del sitio web, ya que esto significa que su sitio web no se está “recuperando” continuamente.
• Evite los redireccionamientos de la página de destino: cuando cree páginas de destino para ciertas campañas, intente que no se redirijan, ya que esto también reducirá la velocidad.

Estos son solo algunos de los principales métodos a utilizar. También se minimiza todo el código, lo que permite la compresión de los archivos y el código de sus sitios al cargar.

Espero que esto ayude.

Jake – Marketing digital azul brillante

Notas al pie

[1] Cómo aplazar realmente la carga de JavaScript

Ejecute una prueba de velocidad

Hay varios verificadores de velocidad de página que puede usar para auditar el tiempo de carga del sitio:

• Velocidad del sitio de Google Analytics

Puede usar esta herramienta si tiene Google Analytics ejecutándose en su página. Deberá navegar a la sección Contenido en el tablero, luego a Velocidad del sitio y seleccionar Descripción general. Aquí encontrará información sobre la velocidad de carga de la página por navegador, región y página específicos.

• PageSpeed ​​Insights de Google

PageSpeed ​​Insights es una herramienta de Google que realiza una prueba de la velocidad de su sitio y calcula un puntaje de velocidad. El puntaje se determina en una escala de uno a 100, siendo 100 los tiempos de carga más cortos.

Los sitios de primer nivel, como Facebook y Twitter, tienen puntajes en los años 90 superiores. Esta herramienta le dará una buena idea general del estado de la velocidad de su sitio y servirá como un sólido punto de partida para desarrollar su estrategia de mejora.

Cómo mejorar la velocidad de carga de la página

No importa cuánto ajuste su código o racionalice el diseño para la velocidad de carga, si su servidor es lento, su página será lenta. Si puede permitírselo, compre alojamiento de alta calidad que no dependa del espacio compartido del servidor. Si bien este gasto puede ser un poco más que el anfitrión del presupuesto, obtendrá más velocidad por su dinero. Esta mejora de la velocidad de carga inicial es una base sólida para otras mejoras de velocidad en su sitio.

Agilice su código de análisis e incrustaciones

Existen innumerables complementos de WordPress e incorporaciones de código que realizan análisis en su página y rastrean la actividad del usuario. Si bien estos programas pueden brindar a los propietarios de sitios web información útil, también pueden ser engorrosos de ejecutar. Querrá mantener su código de seguimiento incrustado simple y al mínimo.

Puede ser tentador usar tantos programas analíticos como sea posible para obtener grandes cantidades de datos de usuario, pero solo use lo que necesite. Eche un buen vistazo a cualquier programa que pueda ser excesivo o realice un seguimiento de una métrica que cubre algún otro fragmento de código. Deshágase de cualquier código analítico innecesario para acelerar su página.

Asegúrese de que todo el contenido sobre su página se cargue más rápido. Coloque cualquier código de análisis que decida mantener en la parte inferior de la página. Cuando los visitantes acceden a su sitio, aún podrán ver la página incluso si el código todavía se está cargando.

Tenga cuidado con cualquier video incrustado incluido en su página. Si bien el video agrega valor en forma de contenido y participación, también puede reducir la velocidad. Los videos incrustados típicos en la página utilizan iFrames. Este formato funciona esencialmente cargando otra página cuando intentas ver el video, así que úsalo con moderación.

Aproveche la distribución de contenido

Una red de entrega de contenido, o CDN, es un sistema de servidores que trabaja para distribuir la carga de ancho de banda de entregar su contenido de manera uniforme. Las CDN almacenan su contenido en varios puntos de datos en diferentes regiones de la red, lo que resulta en un acceso más rápido a su sitio.

Limpia tu base de datos

Lo más probable es que su sitio utilice una base de datos para almacenar información. Esto es especialmente cierto si opera una tienda de comercio electrónico o blog o tiene una función de búsqueda en la página. Estas grandes bases de datos pueden volverse engorrosas y aumentar drásticamente el tiempo de carga de su sitio.

La indexación hace que su base de datos funcione de manera mucho más eficiente. Sin un índice, su base de datos debe buscar entre miles de puntos de datos y registros diferentes. La indexación acelera este proceso al permitir que la base de datos encuentre rápidamente la información almacenada.

Utilizar la compresión

El tamaño de su sitio puede estar disminuyendo su velocidad, especialmente si se está enfocando en entregar contenido valioso de manera consistente. Comprimir los archivos de su página a través de la compresión puede evitar que una página voluminosa aumente los tiempos de carga.

Puede hacer una búsqueda rápida en Google y encontrar múltiples herramientas de compresión en línea. Estas herramientas funcionan para reducir el ancho de banda de su sitio, lo que acelera la respuesta HTTP de su página. El uso de la compresión puede reducir el tiempo de descarga de su página en un 70%.

Optimizar su página para los resultados de búsqueda es un trabajo duro. Sería una pena dejar que se desperdicie todo el tiempo dedicado a alinear su sitio para SEO. Siempre piense en cómo mejorar la velocidad de carga de su página.

Más allá de la experiencia mejorada del usuario que ofrecen tiempos de carga rápidos, la velocidad de la página también puede afectar las tasas de conversión de su sitio. Las páginas que se cargan rápidamente también inspiran un aumento en la confianza del cliente.

Fuente: Aumente la velocidad de carga de su página para mejorar las clasificaciones de Google

¿Lo que hay que hacer?

TL; DR:

1. Identifique el CSS utilizado para representar el contenido del pliegue anterior e instálelo en la sección del encabezado
2. Agregar middleware de compresión gzip
3. Agregue un CDN a su sitio web
4. Minificar CSS y Javascript
5. Minify HTML
6. Optimiza imágenes con compresión sin pérdidas
7. Imágenes de Lazyload
8. Optimizar los tamaños de imagen para cada resolución de pantalla

Con más del 50% de los usuarios móviles que navegan por la web, Google está haciendo un gran esfuerzo para mejorar la experiencia de la web móvil.

La velocidad de la página es un factor de clasificación y tendrá usuarios más felices si su sitio es rápido también en teléfonos móviles con una conexión a Internet lenta.

Entonces, buen trabajo haciendo esta importante pregunta.

1. Identifique el CSS utilizado para representar el contenido del pliegue anterior e instálelo en la sección del encabezado

Esta es probablemente la tarea más grande en la lista. El contenido de la mitad superior de la página es el contenido que el usuario ve sin ninguna interacción en su sitio. Es la primera impresión y, por lo tanto, debe ser visible para el usuario de inmediato.

2. Agregue el middleware de compresión gzip

Eche un vistazo a su aplicación y también a su propio servidor web (Apache, NginX, …) e intente activar la compresión gzip.

3. Agregue un CDN a su sitio web.

Algunos SaaS CMS ofrecen CDN para los activos utilizados para los sitios web creados con ellos (Storyblok), por lo que puede hacer si su sistema actual no tiene eso incorporado: aún puede usar Cloudflare en solo 6 pasos para agregar un CDN y caché a su sitio web

4. Minifica tu CSS y JS

Agréguelo a su paso de implementación o hágalo manualmente una vez: eliminará todos los espacios en blanco y en blanco y le permitirá enviar sus estilos y scripts sin kb innecesarios.

5. Minify HTML

La minimización de HTML tiene un impacto bastante grande, igual que el punto 4, porque elimina todos los espacios en blanco en su contenido.

6. Optimizar imágenes con compresión sin pérdidas

Si no está usando Storyblok, puede usar una herramienta como thumbor o sharp para optimizar las imágenes.

7. Imágenes de Lazyload

Usaría lazysizes, un script ligero de carga diferida y lo agregaría a su archivo scripts.js y agregaría las clases a las imágenes debajo del pliegue.

8. Optimice los tamaños de imagen para cada resolución de pantalla

Para imágenes receptivas, usaríamos un conjunto de fuentes y definiríamos diferentes imágenes redimensionadas para diferentes resoluciones de pantalla. El impresionante script lazysizes detecta automáticamente el tamaño correcto y lo inserta en el atributo de tamaños.

Mi amigo Alex escribió un tutorial completo sobre cómo optimizó un tema de 59 páginas a 100/100

5 maneras fáciles de ayudar a mejorar la velocidad de la página de su sitio web

1) Optimizar imágenes

las imágenes son uno de los cerdos de ancho de banda más comunes en la web. La primera forma de optimizar sus imágenes es escalarlas adecuadamente. Muchos webmasters usan imágenes enormes y luego las reducen con CSS. De lo que no se dan cuenta es que su navegador todavía los carga al tamaño de imagen completo.

Por ejemplo, si tiene una imagen de 1000 x 1000 píxeles, pero la ha reducido a 100 x 100 píxeles, su navegador debe cargar diez veces más de lo necesario.

Escale sus imágenes antes de subirlas a su sitio, de modo que no pida más a sus visitantes de lo que debería.

La segunda forma de optimizar sus imágenes es comprimirlas.

Existen varias herramientas gratuitas en línea para la compresión de imágenes, como tinypng.com, que pueden reducir drásticamente los tamaños de las imágenes sin perder calidad. ¡Puedes ver reducciones de tamaño en cualquier lugar del 25% al ​​80%!

2) almacenamiento en caché del navegador

¿Por qué hacer que los visitantes descarguen las mismas cosas cada vez que cargan una página? Habilitar el almacenamiento en caché del navegador le permite almacenar temporalmente algunos datos en la computadora de los visitantes, para que no tengan que esperar a que se cargue cada vez que visiten su página. El tiempo durante el que almacena los datos depende de la configuración de su navegador y de la configuración de caché del lado del servidor.

Para configurar el almacenamiento en caché del navegador en su servidor, consulte los recursos a continuación o comuníquese con su empresa de alojamiento:

• Apache Caching
• Almacenamiento en caché de IIS
• Almacenamiento en caché de Nginx

3) compresión

Habilitar la compresión es como poner su sitio web en un archivo zip.

La compresión puede reducir drásticamente el tamaño de su página y, por lo tanto, aumentar su velocidad. De acuerdo con varvy, ¡la compresión puede eliminar del 50 al 70% de sus archivos HTML y CSS! Esa es una tonelada de datos que su visitante no tendrá que descargar.

La compresión es una configuración del servidor, por lo que la forma en que la implemente dependerá de su servidor web y su configuración. A continuación se presentan algunos recursos para los servidores web más comunes. Si no ve el suyo, comuníquese con su empresa de alojamiento para ver qué pueden hacer.

• apache
• IIS
• Nginx

4) Optimiza tu CSS

Su CSS se carga antes de que la gente vea su sitio. Cuanto más tarden en descargar su CSS, más esperarán.

CSS optimizado significa que sus archivos se descargarán más rápido, dando a sus visitantes un acceso más rápido a sus páginas.

Comience preguntándose, “¿uso todo mi CSS?” Si no, elimine el código superfluo en sus archivos. Cada pequeña cantidad de datos desperdiciados puede acumularse hasta que la velocidad de su sitio web ahuyente a sus visitantes.

A continuación, debe minimizar sus archivos CSS. Los espacios adicionales en sus hojas de estilo aumentan el tamaño del archivo. La minimización de CSS elimina esos espacios adicionales de su código para garantizar que su archivo tenga el tamaño más pequeño.

5) Mantenga sus guiones debajo del doblez

Los archivos Javascript pueden cargarse después del resto de su página, pero si los coloca todos antes de su contenido, como hacen muchos sitios, se cargarán antes que su contenido.

Esto significa que sus visitantes deben esperar hasta que sus archivos Javascript se carguen antes de ver su página, y sabemos cuánto les gusta esperar.

La solución más simple es colocar sus archivos Javascript externos en la parte inferior de su página, justo antes del cierre de la etiqueta de su cuerpo. Ahora puede cargar más de su sitio antes de sus scripts.

Otro método que permite un control aún mayor es utilizar los atributos diferidos o asíncronos al colocar archivos .js externos en su sitio.

Tanto diferir como asíncrono son muy útiles, pero asegúrese de comprender la diferencia antes de usarlos:

• Las etiquetas asíncronas cargan los scripts mientras se carga el resto de la página, pero esto significa que los scripts se pueden cargar fuera de servicio. Básicamente, los archivos más ligeros se cargan primero. Esto podría estar bien para algunos scripts, pero puede ser desastroso para otros.
• El atributo de aplazamiento carga sus scripts una vez que su contenido ha terminado de cargarse. También ejecuta los scripts en orden. Solo asegúrese de que sus scripts se ejecuten tan tarde sin romper su sitio.

Todo lo que necesita hacer es agregar una palabra simple en sus etiquetas

Por ejemplo, puedes tomar tu guión original

Y agregue el pequeño código para asegurarse de que se cargue cuando lo desee.

La importancia de sus scripts determinará si obtienen un atributo y en qué atributo se agrega. Las secuencias de comandos más esenciales probablemente deberían tener el atributo asíncrono para que puedan cargarse lo antes posible sin retener el resto de su contenido. Sin embargo, los no esenciales deben esperar hasta el final para garantizar que los visitantes vean su página más rápido.

¡Pero siempre asegúrese de probar cada script para asegurarse de que el atributo no rompa su sitio!

No tenga dudas, la optimización del rendimiento del sitio web siempre es algo que debe ser la máxima prioridad, especialmente hoy en día cuando hay tanta competencia en la Web. Existen numerosos tutoriales en todo Google que indican cómo acelerar un sitio web. Difieren dependiendo de si ejecuta una plataforma CMS para construir un sitio web desde cero. Sin embargo, me gustaría describir los consejos de optimización independientemente de la plataforma.

Pero antes de sumergirnos en los consejos, aquí hay algunas herramientas que debe conocer para que primero pueda identificar los problemas de rendimiento de su sitio web.

• Google Page Speed ​​Insights . El analizador de sitios web de Google califica los sitios con un puntaje de 0-100 (cuanto mayor sea el número, mejor). La puntuación se basa en la cantidad de reglas aprobadas que incluyen todo, desde imágenes optimizadas, CSS / JS minimizado, recursos de bloques de procesamiento, almacenamiento en caché del navegador, etc.

• Camino Crítico La ruta crítica es la recopilación de eventos que deben tener lugar para representar una página web. Optimizar la ruta de representación crítica significa minimizar el evento de que el recurso A necesite depender de los recursos B para cargar. La columna Iniciador de herramientas de desarrollo de Chrome ayuda a ofrecer un poco más de granularidad sobre por qué se solicita un activo en particular.

• Renderizar recursos de bloqueo . Estrechamente relacionado con la sección de ruta crítica mencionada anteriormente, puede haber recursos que bloqueen el DOM (Modelo de objeto de documento) de su sitio, lo que a menudo ralentizará el rendimiento de su sitio. La identificación de los recursos de bloqueo de renderizado de un sitio web se puede lograr utilizando la herramienta Page Speed ​​Insights de Google o una herramienta de navegador como la herramienta de desarrollo de Chrome .

Una vez que sepa dónde se ralentiza o se cuela su sitio web, puede reajustar sus prioridades.

Prueba la velocidad de tu sitio web

Primero, pruebe la velocidad de su sitio web para analizar la velocidad general de su sitio web. WebPageTest lo hará para la tarea.

Prueba de carga de tu sitio

En segundo lugar, es importante realizar una prueba de carga en su sitio para ver qué puede estar causando cuellos de botella. Aquí hay algunas herramientas que serán útiles si está intentando escalar una plataforma:

• Blitz : Pruebas de rendimiento en sitios web, aplicaciones web y API REST.
• Impacto de carga : pruebas de rendimiento automatizadas y bajo demanda para DevOps. Pruebe al instante su sitio web, aplicación web, aplicación móvil o API.
• Cargador : servicio de prueba de carga que le permite probar sus aplicaciones web y API con miles de conexiones simultáneas.

Ahora que ha realizado algunas pruebas en su sitio web para ver dónde está el retraso o la carga, ahora es el momento de comenzar a optimizar, siga estos consejos de optimización a continuación.

1. Optimización de imagen. Reduzca el tamaño de la imagen y optimice las imágenes para la web. Lo mejor es que si se comprime adecuadamente, sus imágenes no pierden su calidad original.
2. Reduce las solicitudes HTTP. Cuando su navegador obtiene datos de un servidor, lo hace utilizando HTTP (Protocolo de transferencia de hipertexto). En general, cuantas más solicitudes HTTP haga su página web, más lento se cargará.
3. Ruta crítica y recursos de bloqueo de procesamiento. Cuando se trata de analizar la velocidad de sus páginas web, siempre debe tener en cuenta lo que podría estar bloqueando el DOM, causando demoras en los tiempos de carga de su página .
4. Evita los redireccionamientos 301. Los redireccionamientos son asesinos de rendimiento. Evítalos siempre que sea posible.
5. Almacenamiento en caché . Aprovechar la memoria caché del navegador o la memoria caché del servidor es crucial para los activos que rara vez cambian. Se recomienda tener una edad máxima de 7 días en tales casos.
6. Corregir errores 404. Cualquier archivo faltante genera un error HTTP 404. Dependiendo de la plataforma que esté ejecutando, los errores 404 pueden ser bastante exigentes para su servidor.
7. Optimización de bases de datos. Y por último pero no menos importante es la optimización de la base de datos. Ya sea que esté limpiando tablas viejas no utilizadas o creando índices para un acceso más rápido, siempre hay cosas que se pueden optimizar.

Como puede ver, hay varios ajustes de optimización del rendimiento del sitio web diferentes que puede implementar para mejorar aún más la entrega y la velocidad de su contenido. Por ejemplo, aquí hay algunas herramientas para optimizar imágenes para aumentar el rendimiento de su sitio web:

Herramientas gratuitas de optimización de imágenes en línea para mejorar la velocidad y el rendimiento de la página

¡Espero que te sea útil!

10 maneras de acelerar su sitio web – MCR Logitech

La velocidad de la página se confunde regularmente con “velocidad del sitio”, que es realmente la velocidad de la página para un ejemplo de visitas en línea en un sitio web. La velocidad de la página se puede representar en “tiempo de apilamiento de página” (el tiempo que lleva mostrar completamente la sustancia en una página en particular) o en “tiempo hasta el primer byte”.

1 Prueba de carga de su sitio

En segundo lugar, es vital realizar una prueba de pila en su sitio para percibir qué puede causar cuellos de botella. Los siguientes son algunos dispositivos que pueden ayudar a probar su sitio. Estos también pueden ser excepcionalmente útiles en caso de que esté intentando escalar un escenario.

2 Minimizar solicitudes HTTP

Cada vez que una página se desvía hacia otra página, su invitado se enfrenta a un tiempo extra sentado para que el HTTP solicite que finalice el ciclo de reacción.

3 consejos de optimización del rendimiento del sitio

Dado que ha realizado algunas pruebas en su sitio para ver dónde se encuentra el aplazamiento o la carga, ahora es el momento de comenzar a mejorar, siga estos consejos de mejora a continuación.

4 Índice de optimización del rendimiento del sitio

• Optimización de imagen
• Disminuir solicitudes HTTP
• Minificar CSS y Javascript
• Recursos básicos de bloqueo de ruta y procesamiento (CSS + JS)
• Disminuya la latencia con un CDN
• Tiempo hasta el primer byte (TTFB)
• Manténgase alejado de los redireccionamientos 301
• Reservando
• Prefetch y Preconnect
• HTTP / 2
• PHP7 y HHVM
• Rendimiento de fuentes web
• Seguro de Hotlink
• Potenciar la compresión Gzip
• Marco de referencia
• Corregir errores 404
• Servir imágenes a escala
• Optimización de bases de datos

5 Mejora el tiempo de reacción del servidor

El tiempo de reacción de su servidor está influenciado por la medida del movimiento que obtiene, los activos que utiliza cada página, el producto que utiliza su servidor y el acuerdo de facilitación que utiliza.

El tiempo de reacción del servidor es inferior a 200 ms.

6 fotos anticipadas

Con las imágenes, debe concentrarse en tres cosas: tamaño, organización y el rasgo src.

7 imagen medida

Las imágenes curiosamente grandes tardan más en apilarse, por lo que es esencial que mantenga sus imágenes tan poco como se pueda esperar razonablemente. Utilice instrumentos que alteran la imagen para:

Producto sus fotos al tamaño correcto. Por ejemplo, si su página tiene 570 píxeles de ancho, cambie el tamaño de la imagen a ese ancho. No transfiera simplemente una imagen de largo alcance y configure el parámetro de ancho (ancho = “570”). Esto modera el tiempo de apilamiento de tu página y hace un encuentro horrible con el cliente.

Disminuya la profundidad de sombreado al nivel menos digno.

8 imagen organizar

JPEG es tu mejor opción.

PNG también es genial, sin embargo, los programas más experimentados pueden no reforzarlo por completo.

Los GIF solo deben utilizarse para ilustraciones pequeñas o básicas (menos de 10 × 10 píxeles, o una paleta de sombreado de 3 o menos tonos) y para imágenes energizadas.

Intente no utilizar BMP o TIFF.

9 calidad Src

Una vez que tenga el tamaño y la configuración correctos, asegúrese de que el código también sea correcto. Específicamente, mantenga una distancia estratégica de los códigos src de la imagen de escape.

En HTML, el código de una imagen incorpora esto:

En el momento en que no hay fuente en las citas, el programa hace una demanda al catálogo de la página o a la página genuina. Esto puede agregar movimiento sin sentido a sus servidores e incluso degenerar la información del cliente.

Consejo Genius: Tómese el tiempo para volver a estimar sus imágenes antes de transferirlas. Además, incorpore de manera confiable el rasgo src con una URL sustancial.

10 Rendimiento de fuentes web

Como lo indica el Archivo HTTP, el 60% de los sitios actualmente utilizan estilos de texto personalizados. Lo que representa una expansión del 850% desde 2011. Los inconvenientes de los estilos de texto web, por ejemplo, Google Fonts, son que agregan solicitudes HTTP adicionales a activos externos. Los estilos de texto web también representan bloqueo de procesamiento.

Las siguientes son algunas propuestas para una mejor ejecución del estilo textual web.

• Organizar a la luz del programa de apoyo
• Elija solo los estilos que necesita
• Mantenga los conjuntos de personajes en una base
• Alojar estilos de texto localmente o captar previamente
• Almacenar en almacenamiento local con codificación Base 64

Pruebe la velocidad del sitio de WordPress utilizando cualquiera de las herramientas como Pingdom, Google Speed ​​Insights, Gtmetrix.

Puede ir a Pingdom Tools, ingresar la URL de su sitio web, hacer clic en ‘Probar ahora’ y esperar a que lleguen los resultados. Debería ver algo como esto:

PERSPECTIVAS DE DESEMPEÑO

Herramientas como esta nos permiten analizar cada problema y analizar las soluciones correspondientes.

Actúa como una lista de verificación que puede recorrer para hacer que su sitio sea más rápido. Simplemente haga clic en las flechas para ver los detalles y siga las pautas para resolver los problemas.

En general, el sitio web que carga entre 1 y 3 segundos se considera una buena velocidad. La carga rápida de la página mejora la calidad general del sitio y aumenta la satisfacción del usuario.

Entonces, ¿cómo puede acelerar el sitio de WordPress?

Aquí hay algunos consejos para reducir la velocidad del sitio

1. Minimizar solicitud HTTP

2. Elija el mejor servicio de alojamiento

3. Habilitar el almacenamiento en caché del navegador

4. Reduce el tiempo de respuesta del servidor

5. Habilitar la compresión

6. Optimizar imágenes

7. Reduce las redirecciones

8. Optimizar la entrega de CSS

9. Evita la cantidad de complementos

10. Use un CDN

11. Repara todos los enlaces rotos

12. Inserte JS en el cuerpo y CSS en la cabeza

13. Limpie la base de datos

14. Habilite Keep-Alive

15.haz que responda

Para obtener una guía detallada, no dude en consultar estas técnicas de optimización web para mejorar la velocidad del sitio web

Hay muchos factores que entran en juego cuando los visitantes visitan su sitio y experimentan tiempos de carga lentos. Si bien pueden surgir algunos problemas por parte del visitante, aquí hay dos síntomas comunes que se pueden controlar en el back-end de su sitio.

Imágenes grandes

En pocas palabras, las imágenes más grandes tardan más en cargarse en un servidor.

Los servidores de Internet se han actualizado a lo largo de los años, pero el tamaño de la imagen todavía juega un papel fundamental en la velocidad de carga de sus páginas.

Demasiados complementos

Uno de los beneficios para las plataformas web es la disponibilidad de complementos / aplicaciones que permiten a los usuarios arreglar su sitio sin tener que lidiar con una codificación complicada.

Sin embargo, cada complemento o aplicación que se instala viene con su propio equipaje. Eso significa que cada complemento realiza su propia solicitud de archivo, contiene su propio CSS y carga su propio javascript. A medida que comience a acumular complementos / aplicaciones, la velocidad de su página disminuirá.

¿Cómo puedo acelerar la velocidad de carga de mi página?

Reducir tamaño de imagen

Muchas veces, las imágenes en las páginas del sitio son archivos grandes cuando no es necesario. Muchos servicios en línea ofrecen compresión de imágenes sin perder calidad.

Aquí hay algunos que recomendamos:

Comprimir imágenes JPEG en línea

Comprime y redimensiona fotos

Comprima y cambie el tamaño de imágenes y fotos JPEG en línea

Reduce la cantidad de complementos

Desactive y elimine cualquier complemento que esté utilizando y que no necesite. Como se mencionó anteriormente, cada complemento hace sus propias solicitudes de servidor y contiene su propia codificación.

Deshabilite los complementos de uno en uno y pruebe continuamente la velocidad de su sitio para ver si un complemento está ralentizando específicamente el sitio.

Información curada del blog ProductPro

Jake Grose ya proporcionó algunas excelentes ideas sobre cómo acelerar su sitio web.

Me encantaría agregar los siguientes pensamientos e ideas:

Optimiza tus imágenes

Este es un grande. Las imágenes en su sitio web aumentan el tamaño de la página. El motivo es bastante simple: las imágenes más grandes tardan mucho más en cargarse. Todos lo sabemos y, sin embargo, a menudo se pasa por alto. Algunos esfuerzos de optimización de imagen podrían hacer el truco:

• Selección de formato: cuando la calidad de la imagen es su principal preocupación, los JPEG son su solución. Las imágenes PNG, por otro lado, funcionan mejor para logotipos, letreros, iconos, ilustraciones y texto. Entonces tienes GIFs. Una vez que la columna vertebral del “diseño” del sitio web, este formato ahora se usa mejor solo para imágenes simples y pequeñas. Y por último, pero no menos importante, es mejor evitar los formatos TIFF o BMP.
• Compresión: la compresión de imágenes nunca debe afectar la calidad de una imagen. Tienes que lograr un equilibrio entre la calidad de una imagen y el tamaño. Usando el formato JPEG, una compresión de hasta el 70 por ciento generalmente produce resultados bastante buenos. (Hay excelentes complementos de WordPress como TinyPNG disponibles para la compresión de img).
• Número de imágenes: a menos que esté en un negocio muy visual, usar demasiadas imágenes no siempre es una buena idea. Intente y asegúrese de que realmente necesita que se incluya esa última imagen.

¡La minificación importa!

Un aspecto importante de la optimización de la velocidad del sitio web es la disminución del número de solicitudes cliente-servidor para mostrar el contenido del sitio web.

Esto se puede lograr optimizando y minimizando líneas de código tanto como sea posible. La minificación es particularmente importante para los archivos externos no almacenados en caché y JavaScript en línea. Según Google, todos los javascript que excedan los 4096 bytes se pueden minimizar sin causar ningún problema al usuario.
Además de esto, simplemente eliminar espacios adicionales, líneas y sangría mientras se mantiene la legibilidad del código mantiene su código delgado y medio.

Herramientas de prueba de navegador automatizadas y manuales

¿Has terminado con toda tu optimización? Bueno, definitivamente asegúrese de probar su sitio web en diferentes navegadores. Puede probar automáticamente su sitio web con diferentes herramientas de automatización, o puede probar su sitio web manualmente. ¿No estás seguro de cuál elegir? Asegúrese de consultar esta publicación de blog sobre cómo comenzar a probar el navegador.

Además, me gustaría recomendar los siguientes dos artículos:

• ¡Cómo disminuir los tiempos de carga de su sitio web!
• Cómo acelerar su sitio de WordPress en 2 horas.

Una técnica esencial de optimización de la velocidad es la minificación, que se concentra en los activos del sitio web, como CSS y Javascript.

Según los desarrolladores de Google, la minificación se refiere a la eliminación de datos innecesarios o redundantes sin afectar la forma en que el navegador procesa el recurso.

Dado que reduce el tamaño de los archivos de los activos, disminuirá el uso de ancho de banda y aumentará drásticamente la velocidad de su sitio web. La reducción reduce el tiempo de carga de la página en un 60%. También ofrece una amplia variedad de beneficios tanto para los visitantes del sitio web como para los propietarios del sitio web.

Cuando la minificación se utiliza correctamente, los sitios web ya no necesitan obtener datos innecesarios cada vez. Es una solución rápida y fácil para reducir el uso de recursos del sitio web y hacer que su sitio web se cargue más rápido.

Recuerde que los usuarios promedio tienen una capacidad de atención de 8 segundos, por lo que es importante que su sitio web se cargue rápidamente y atraiga la atención de su audiencia. La minificación puede ayudarlo a abordar estos problemas.