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.
- Cómo agregar captcha en mi sitio web
- ¿Cuál es su opinión sobre la pregunta sobre la tarifa en el sitio web del IRCTC?
- ¿Cuáles son algunos sitios web grandes que usan Firebase como back-end?
- ¿Cuál es la técnica para buscar y mostrar las noticias RSS rápidamente en mi sitio web?
- ¿Hay alguna manera de encontrar, eliminar o desactivar cada cuenta personal no utilizada?
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 utilice 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 por encima del pliegue 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.