• Este sitio usa cookies, propias y de terceros. Si continúa con nosotros entendemos que se acepta el uso de cookies. Más información.

[TUTORIAL] 10 Tips Para Acelerar Tu Sitio Web En 2018

#1
Os dejo una serie de tips para acelerar vuestras webs

1. Minimice las solicitudes HTTP
Según*Yahoo, el 80% del tiempo de carga de una página web se utiliza en descargar las diferentes partes de piezas 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 tanto, los componentes de página, más tiempo tardará 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 las secuencias de comandos y colóquelas en la parte inferior de la página.
Recuerde siempre, cuando se trata de su sitio web, más delgado 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 hacer que la página rinda, y mejorará significativamente el rendimiento del sitio.

2. Reduzca el tiempo de respuesta del servidor
Su objetivo es un tiempo de respuesta del servidor de menos de 200 ms (milisegundos).*Y si sigues los consejos en este artículo, estás en camino de lograr esto.

Google recomienda usar una*solución de monitoreo de aplicaciones web*y buscar cuellos de botella en el rendimiento.

Consejo profesional:*Lea este informe por Singlehop,*Necesidades críticas de infraestructura de comercio electrónico*, para conocer nueve aspectos en los que debe concentrarse para que su sitio funcione bien.

Luego toque estos recursos:

Yslow*: para evaluar la velocidad de su sitio y obtener sugerencias sobre cómo mejorar el rendimiento.
Las*herramientas de velocidad*de página 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 tardan en descargarse.*La mejor manera de acelerar su tiempo de carga es comprimirlas, una técnica llamada*compresión*.

La compresión reduce el ancho de banda de sus páginas, reduciendo así 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 de Internet actual viaja a través de navegadores compatibles con Gzip, es una gran opción para acelerar su sitio.

Consejo profesional:*Lee este artículo para obtener más información sobre la*compresión Gzip*.*Luego configura tu servidor para habilitar la compresión:

Apache: use**mod_deflate
Nginx: utiliza**HttpGzipModule
IIS:**configurar la compresión HTTP
4. Habilitar el almacenamiento en caché
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 lo explica*Tenni Theurer*, anteriormente de Yahoo, ...

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



Una vez que la página se ha cargado y los diferentes componentes se almacenan en la caché del usuario, solo se deben descargar unos pocos componentes para visitas posteriores.

En la prueba de Theurer, eso fue solo tres componentes y .9 segundos, que redujeron 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 su página sea rápida para los visitantes nuevos.*Pero también debe habilitar el almacenamiento en caché para reducir el tiempo de visitas posteriores.

Consejo profesional:*lee este artículo para aprender 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 almacenados en caché (archivos JS y CSS, archivos de imagen, archivos multimedia, archivos PDF, etc.), establezca Expirar a un mínimo de una semana, y preferiblemente hasta un año en el futuro.*No lo configure en más de un año en el futuro porque eso infringe las pautas de RFC.

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

Dado que cada fragmento de código innecesario se agrega al tamaño de la página, es importante que elimine espacios adicionales, saltos de línea e indentación en el código para que sus páginas sean lo más ajustadas posible.

También ayuda a minimizar tu 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 'Minificar 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 enfocarse 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:

Recortar 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 2000 px 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 para el usuario.
Reduzca la profundidad de color al nivel más bajo aceptable.
Eliminar los 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 sea correcto también.*En particular, evite los códigos src de imagen vacíos.

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

<img src = "">

Cuando no hay una fuente en las comillas, el navegador realiza una solicitud al directorio de la página o a la misma página.*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 las 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 su página se visualice, y en*línea*, que se inserta en el documento HTML en sí.

El CSS externo se carga en el encabezado de su HTML con un código que se ve así:

<! - Tus estilos ->

<link rel = "stylesheet" type = "text / css" media = "todos" href = http: //yourURL/style.css />

El CSS en línea está anidado en el HTML de su página y se ve así:



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, solo use 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á usando su sitio web.
Instrucciones para*combinar archivos CSS externos*.
Evita incluir CSS en el código HTML, como los divs o tus encabezados (como el CSS en línea que se muestra arriba).*Obtendrá una codificación más limpia si coloca todo el CSS en su hoja de estilo externa.

8. Prioriza el contenido de la mitad superior de la página
Recién le recomendó que use solo una hoja de estilos CSS y no CSS en línea, pero hay una advertencia que debe tener en cuenta.*Puede mejorar la experiencia del usuario al hacer que su anterior-el-*pliegue*(parte superior de la página) de carga más rápido, incluso si el resto de la página tarda unos segundos en cargar.

Consejo profesional:*Considere dividir su CSS en dos partes: una parte corta en línea que resalte los elementos de la mitad de la página, y una parte externa que pueda 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 cualquier complemento innecesario.*Luego elimine cualquier complemento que reduzca la velocidad de su sitio.

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

10. Reducir los redireccionamientos
Los redireccionamientos crean solicitudes HTTP adicionales y aumentan el tiempo de carga.*Entonces quiere mantenerlos al mínimo.

Si ha creado un sitio web receptivo, lo más probable es que tenga redirecciones establecidas para llevar a los usuarios de dispositivos móviles desde 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 desacelere su sitio:

Utilice una**redirección HTTP**para enviar a los usuarios con agentes de usuario móvil directamente a la URL equivalente móvil sin redirecciones intermedias, y
Incluya el**marcado <link rel = "alternate">**en las páginas de su escritorio para identificar la URL equivalente móvil para que Googlebot pueda descubrir sus páginas móviles.
Muchas gracias por tu lectura!
 

Similar threads