¿Cómo haces que un sitio web funcione rápido?

Todos aquí están dando un montón de buenas sugerencias, pero se están perdiendo el paso más importante.

Instrumentación.

Antes de comenzar a arreglar las cosas, averigua qué está roto. Si su servidor de aplicaciones tarda 5 segundos en generar una página, usar sus CDN con recursos estáticos no ayudará mucho. Si está descargando 10 MB de imágenes en cada vista de página, agregar Memcache a su arquitectura de fondo no solucionará el problema.

¿Sabía que puede abrir Chrome y ver el tráfico y el volumen de la red al cargar una página? Aquí hay algunos datos sobre una recarga de Google:


Una herramienta que recomiendo para muchas cosas, pero también para la supervisión del rendimiento es New Relic. Realiza un seguimiento del rendimiento del servidor y del cliente, y lo desglosa por el mayor cuello de botella. Por ejemplo, este es el gráfico de pave.com para el tiempo de carga del navegador:

En este caso, puede ver que la gran mayoría de nuestro tiempo lo dedicamos al procesamiento DOM y al procesamiento de páginas. Al intentar mejorar el rendimiento, este es el primer lugar para buscar: vea cuál es el problema antes de perder el tiempo en soluciones potencialmente complicadas para problemas que no tiene.

Antes de entrar en problemas de rendimiento específicos de la página, vea dónde se tendrá el mayor impacto. Puede ver en qué está pasando más tiempo el usuario (esto es básicamente [# de páginas vistas * tiempo de carga promedio] para cada página). Para Pave, tener el mayor impacto implicaría optimizar la página de inicio. No importa qué tan rápido se cargue una página si nadie la usa.


Para alguien que comienza un nuevo sitio web.

Probablemente no necesite preocuparse por todas las posibles optimizaciones mencionadas aquí. Hay algunos que harán la vida más fácil desde el principio, o que son tan fáciles que sería una tontería evitarlos. Específicamente:

  • Instrumente su sitio. Esto es lo mas importante. A largo plazo, es la única forma de saber cómo te va.
  • Comprenda la división entre la hora del servidor, la hora de la red y la hora del navegador. Críticamente, debe comprender que la optimización de uno casi no tendrá impacto en el otro. Si su servidor es lento, no importa qué tan rápido haga el navegador, y viceversa. Hay menos cosas que puede hacer sobre el tiempo de la red (hasta que sea megaescala) que no sea usar un CDN.
  • Poner CSS en la parte superior de la página y secuencias de comandos en la parte inferior. Esto requiere literalmente cero esfuerzo extra de su parte. Ayuda porque el navegador comenzará a representar la página (el usuario percibirá que se está cargando) incluso antes de que se ejecuten todos los scripts.
  • Evite alinear CSS / JS. Los navegadores almacenarán en caché estos recursos externos, lo que reducirá el tiempo de carga en las vistas de página posteriores. Tenga en cuenta que esto no ayudará (y podría perjudicar) si la tasa de rebote de su sitio es del 100%. Pero entonces probablemente tengas problemas más grandes.
  • La mayoría de los elementos “no” en las Mejores prácticas para acelerar su sitio web . Si nunca comienza, no necesitará eliminarlo más tarde. Esto va para expresiones CSS, minimizando iframes, usando sobre @import, evitando escalar imágenes en HTML, redireccionamientos, etc.
  • Optimiza imágenes / usa sprites CSS. Utilice el mejor formato de imagen para el trabajo (PNG para iconos, JPG para fotos) y elija una configuración de calidad para JPG que logre el equilibrio correcto entre calidad y tamaño. El uso de sprites CSS significa que en lugar de realizar múltiples solicitudes para descargar íconos, puede descargar una imagen y usar background-position: en CSS para mostrar la sección correcta.

Algunas cosas fáciles que probablemente deberías hacer desde el principio:

  • CDNs . Cloudfront es bastante trivial de configurar y funciona bien para Pave. Solo lo dejé fuera de la lista inicial porque probablemente no sea algo que literalmente necesites al hacer prototipos o mostrar amigos iniciales. También es bastante fácil agregar más tarde.
  • Empaquetado / minificación JS / CSS. En Pave, usamos LESS y RequireJS para esto. Significa que ambos estamos enviando menos bytes a través del cable, y que la mayoría de las visitas a la página solo hacen 2-4 solicitudes de recursos estáticos, aunque, como desarrollador, considero que son muchos archivos más pequeños.
  • Componentes GZIP. Suponiendo que tiene control sobre su servidor web, esto es probablemente solo un indicador de configuración. Si no tiene control sobre su servidor web, es probable que esto ya esté configurado para usted.
  • Optimice la obtención de datos del lado del servidor. Esto es bastante abstracto porque las estrategias son completamente diferentes dependiendo de su almacén de datos. Pero algo que he visto una y otra vez son las personas con patrones de acceso a datos realmente muy ineficientes. New Relic puede ayudarte a rastrear cuánto tiempo pasas buscando datos. Hablando en términos generales, las tres estrategias que podría emplear son: enfrentar con un caché, acceso por lotes de datos y reducir la sobrecarga.
  • Monitorear el servicio externo perf. Una API que utilizamos anteriormente en Pave tomaba ~ 1000ms por consulta, lo que resultó en una experiencia de usuario realmente mala. Además, intente siempre que sea posible llamar a API externas de forma asíncrona o al menos después de que la respuesta se vacíe al navegador. Por ejemplo, hacemos esto para todos los informes métricos, por lo que realmente no importa si la API de Mixpanel es lenta o cuántos datos enviamos.

De todos modos, eventualmente deberías asumir todo lo que Steve Souders recomienda y seguir trabajando para asegurarte de minimizar el tiempo del servidor también. Las cosas sofisticadas como el enjuague temprano, la carga progresiva y similares pueden no ser el mejor uso del tiempo cuando se realizan prototipos; pero puede proporcionar un inmenso rendimiento a largo plazo.

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 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.

Haga que su sitio sea más rápido :

  1. Comprima sus imágenes : hay muchos complementos gratuitos de WordPress
  2. Use un CDN como Cloudflare: tiene un complemento de WordPress
  3. Elimine código adicional y complementos adicionales y CSS adicional, elimine toda la grasa, tenga solo lo que necesita
  4. Utilice la prueba de velocidad de Google Mobile e implemente sus recomendaciones: Pruebe la velocidad y el rendimiento de su sitio web móvil

Crédito: Cómo hacer un sitio web en menos de 5 minutos, sin codificación

La optimización de un sitio web no es una ciencia exacta, es más una compensación.

La mayoría de las herramientas que perfilan el rendimiento del sitio web se basan principalmente en los principios establecidos por Steve Sounders en su libro Sitios web de alto rendimiento (circa 2007). Según su libro, hay 14 Reglas para sitios web de carga más rápida que se enumeran a continuación

  • Regla 1 – Hacer menos solicitudes HTTP
  • Regla 2 – Use una red de entrega de contenido
  • Regla 3 – Agregar un encabezado de caducidad
  • Regla 4 – Componentes Gzip
  • Regla 5 – Poner hojas de estilo en la parte superior
  • Regla 6 – Ponga guiones en la parte inferior
  • Regla 7 – Evita las expresiones CSS
  • Regla 8 – Hacer JavaScript y CSS externos
  • Regla 9 – Reducir las búsquedas de DNS
  • Regla 10 – Minificar JavaScript
  • Regla 11 – Evita los redireccionamientos
  • Regla 12 – Eliminar secuencias de comandos duplicadas
  • Regla 13 – Configurar ETags
  • Regla 14 – Hacer AJAX en caché

Por favor, comprenda que para sobrecargar los tiempos de carga de su página no necesariamente tiene que ajustarse a todos los principios, a veces exagerar en algo para las micro optimizaciones puede causar más daño que bien.

Hay muchas herramientas para que pueda perfilar su sitio web, prefiero principalmente
Herramientas de desarrollo de Google Chrome Herramienta de auditoría (presione F12 en Windows mientras Google Chrome está abierto y seleccione la pestaña Auditoría) y existen herramientas de creación de perfiles en línea como PageSpeed ​​Tools | Desarrolladores de Google que también hacen más o menos lo mismo.

La mayoría de los cuellos de botella de carga del sitio están interconectados con la carga de imágenes, Google ahora ha encontrado una solución para eso, han introducido un nuevo formato de imagen para la Web llamado WebP que es una locura … :-).

Para terminar,

  1. Perfile su sitio
  2. Optimizar según las 14 reglas
  3. Optimizar imágenes con WebP (opcional)
  4. Perfil otra vez

Estos 7 pasos pueden hacer que un sitio web funcione rápidamente
1. Minifique HTML, CSS y JavaScript : para hacerlo, elimine todos los comentarios innecesarios, espacios en blanco y código. Esto mejorará el rendimiento porque se reducirá el tamaño del archivo. Para minimizar HTML, consulte HTML Compress. Para JavaScript, use YUI Compressor, y para CSS, pruebe CSS Compressor. Una cuarta opción es hacer uso de la extensión de Chrome PageSpeed ​​Insights para crear una versión optimizada de su código HTML. La página de PageSpeed ​​Insights también enumera otros programas que puede usar.

2. Haga que CSS y JavaScript sean externos: el uso de archivos externos generalmente hará que las páginas se carguen más rápido porque el navegador almacena en caché los archivos JavaScript y CSS.

Alternativamente, si usa CSS en una página web, coloque el CSS en el elemento HEAD. Esto hace que la página parezca cargar más rápido y puede hacerlo progresivamente. Con JavaScript, mueva los scripts al final de la página.

3. Elimine los scripts duplicados en una página web: este problema puede parecer extraño, pero en realidad es bastante común. Los archivos duplicados de JavaScript y CSS degradan el rendimiento al crear solicitudes HTTP innecesarias y una ejecución de JavaScript desperdiciada. También es importante verificar y ver si los scripts también se han duplicado en archivos externos. Para evitar este problema, utilice un módulo de administración de scripts con sus plantillas.

Aquí está el código para JavaScript y PHP.

4. Optimizar imágenes: reduzca el tamaño de las imágenes con GIF, PNG-8. o JPEG como los formatos de archivo. Asegúrese de que el tamaño coincida con su uso y establezca el tamaño de cada página con la altura y el ancho. No utilice la escala, especialmente de imágenes más grandes a más pequeñas. El resultado de la imagen puede verse bien en la pantalla, pero el tamaño del archivo será el mismo. Para aprovechar realmente las dimensiones más pequeñas, use un programa de edición de imágenes y escale la imagen en consecuencia. El tamaño del archivo resultante será más pequeño. También es importante experimentar con la compresión con todos estos formatos de archivo. En algún momento obtendrá una compresión aceptable con una pérdida mínima de calidad. La experimentación es clave.

5. Utilice la compresión GZIP: si su empresa de alojamiento utiliza la compresión y deflación GZIP, esto puede marcar una diferencia significativa y acelerar su sitio. Es posible reducir el tamaño de los archivos en un 70% sin perder la calidad de la imagen o el tamaño del video. Para ver si su sitio ya usa GZIP, aquí hay una prueba que puede usar.

Backend:

  • Mantenga cada servicio lo más cerca posible físicamente, preferiblemente en la misma máquina. Si su servidor de puerta de enlace está en San Fransisco pero está obteniendo datos de una máquina en Singapur, serán unos cientos de milisegundos de latencia. Lento.
  • Optimizar consultas de bases de datos. Cuanto menos mejor. Intenta almacenar la menor cantidad de objetos posible. Mantenga las entradas indexadas. Únase solo cuando sea necesario. Limite el número de artículos devueltos por solicitud y use la paginación.
  • Use un CDN para almacenar archivos estáticos que no cambien, como imágenes, CSS y bibliotecas JS. Los archivos grandes deben almacenarse en S3.
  • Use un caché en memoria como Redis. RAM es la forma más rápida de almacenamiento.
  • Ten cuidado con el middleware. Agrega hinchazón a cada solicitud, así que impleméntelo con cuidado y con moderación.

Interfaz:

  • Concatenar y minificar todos los CSS y JS. Más solicitudes de archivos = carga de página más lenta.
  • Use una alternativa ligera a JQuery como Zepto.
  • Cree una aplicación de página única (SPA) que use AJAX para buscar y llenar diferentes módulos. Dará la percepción de una carga de página más rápida y aliviará la carga del servidor al solicitar solo datos JSON.
  • Comprime imágenes y opta por JPEG. Solo use PNG si necesita el canal alfa (transparencia).
  • Para video / audio, verifique su configuración de codificación para una configuración amigable de transmisión para el menor retraso de búfer.

No agregaré los parámetros conocidos que todos dicen: reduzca las solicitudes http, use sprites, evite la importación de css, minimice archivos, caché … Todos ellos se pueden ver en http://gtmetrix.com

Me concentraría en los 2 factores que tendrán más impacto (la mayoría de los casos) en el servidor y la optimización del servidor para contenido dinámico

Primero, debe elegir un servidor (y CDN si corresponde) potente, con mantenimiento y un tiempo de respuesta lo más bajo posible. Eso es muy difícil de conseguir con alojamiento compartido, por lo que la mejor opción sería desde un VPS a condiciones más altas

Intentaría tener la RAM más alta posible

En segundo lugar, dado que desea acelerar el contenido dinámico, debe usar algunas extensiones de servidor para facilitar el servicio de su sitio web. Por ejemplo:

APC: es el caché de código, por lo que ciertas partes de su sitio web no requerirán ejecutar la consulta, ya que el código generado ya está registrado en el caché de APC

BARNIZ: es como un espejo entre los usuarios y el servidor, por lo que cuando un usuario solicita algo ya entregado a un usuario anterior, el barniz logra servir el mismo contenido sin tener que solicitarlo al servidor

Google_mod_page_speed: optimizará ciertas partes de su sitio web para lograr un puntaje de velocidad de página de Google más alto agregando la implementación correcta en contenido estático: caché, compresión, minificación, conversión de imágenes a formato progresivo, etc.

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.

· Agiliza el número de elementos en tu página.

· Use CSS en lugar de imágenes siempre que sea posible.

· Combina varias hojas de estilo en una.

· Reduce los guiones y colócalos al final de la página.

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

Para hacer que un sitio web sea rápido, uno tiene que seguir las buenas prácticas en la interfaz y asegurarse simultáneamente de que el backend sea rápido y robusto y que no tome mucho tiempo preparar su documento html y enviarlo de regreso cuando llegue una solicitud Http al servidor.

Hablemos primero sobre la interfaz. Las siguientes reglas se toman directamente del libro Sitios web de alto rendimiento .

  • Regla 1 – Hacer menos solicitudes HTTP
  • Regla 2 – Use una red de entrega de contenido
  • Regla 3 – Agregar un encabezado de caducidad
  • Regla 4 – Componentes Gzip
  • Regla 5 – Poner hojas de estilo en la parte superior
  • Regla 6 – Ponga guiones en la parte inferior
  • Regla 7 – Evita las expresiones CSS
  • Regla 8 – Hacer JavaScript y CSS externo
  • Regla 9 – Reducir las búsquedas de DNS
  • Regla 10 – Minificar JavaScript
  • Regla 11 – Evita los redireccionamientos
  • Regla 12 – Eliminar secuencias de comandos duplicadas
  • Regla 13 – Configurar ETags
  • Regla 14 – Hacer AJAX en caché

Definitivamente deberías leer los dos libros Sitios web de alto rendimiento y
Sitios web incluso más rápidos por Steve Souders para saber cómo se pueden optimizar las cosas a nivel del navegador y acelerar significativamente.

No hace falta decir que hay muchos códigos Javascript y AJAX incluidos para que el usuario sienta que todo está sucediendo muy rápido.

Por ejemplo, suponga que tiene una página que muestra comentarios en una publicación. Puede haber cientos de comentarios y si los envía a la vez desde el servidor, definitivamente tomará mucho tiempo. ¿Por qué no buscar 10 comentarios al principio y luego buscar los 10 siguientes cuando el usuario se desplaza hacia abajo y así sucesivamente? Esto es lo que todo sitio web rápido y bueno hace hoy. Esta técnica se llama desplazamiento lento.

Ahora suponga que la página web se compone de dos partes principales: derecha e izquierda. A la derecha, muestra anuncios o contenidos sugeridos que no es muy importante. Y a la izquierda, muestra el contenido principal que el usuario espera cargar. Ahora no desea que todas las partes de la página se envíen en un lote desde el servidor y se carguen simultáneamente, porque eso obviamente significará más tiempo dedicado a la computación en el servidor y más tiempo para transferir los datos a través de la red, y eso significa más tiempo que el navegador está inactivo esperando la respuesta Http. La solución es dividir su página en unidades y cargar solo las importantes al principio, y luego cargar las partes restantes de forma asincrónica a través de Javascript.

Facebook, Quora y muchos otros hacen lo mismo. Lea esta publicación para comprender cómo Facebook ha realizado la canalización de páginas para obtener un alto rendimiento: https://www.facebook.com/note.ph … AFAIK, Quora tiene su propia implementación de tecnología similar. Puede observar que los contenidos en el panel derecho se cargan después del contenido principal en el panel izquierdo en Quora.

Hay muchos trucos y técnicas tan buenos y algunos se describen en los dos libros que he mencionado anteriormente.

Ahora lo que podemos hacer en el backend para acelerar.

Lo primero y más importante es usar Memcached – http://memcached.org/ . La idea es almacenar tantos datos en la memoria como sea posible y reducir la cantidad de llamadas a la base de datos. Su integración es súper suave en cualquier aplicación. ¡Y mejora mucho la velocidad!

Diseña la base de datos de forma inteligente. Si siente que algo se está acelerando y puede mejorarse, no dude en cambiar la arquitectura. Con el tiempo, a medida que evoluciona una aplicación / producto, a menudo es necesario hacerlo. Importar los datos a la nueva estructura rara vez es una gran molestia con los scripts python / perl.

Los otros puntos a menudo se centran en escribir código robusto y usar C / C ++ donde necesitamos operar muy rápido en grandes conjuntos de datos. Es posible que algunos algoritmos difíciles también deban implementarse en el camino, por ejemplo, al buscar feeds / historias relevantes y mostrárselos al usuario.

Las cosas se vuelven aún más complicadas a medida que avanzamos a actualizaciones en tiempo real, transmisión en vivo, etc. Luego, la interfaz y el backend son muy robustos y funcionan de manera coherente para dar un resultado increíble. Dicho esto, es posible que también desee echar un vistazo a node.js – http://nodejs.org/ y Meteor – http://meteor.com/ .

Sin lugar a dudas, la tecnología nunca deja de evolucionar y las personas inteligentes siempre están ahí tratando de mejorar la velocidad cortando solo 100 ms más. Necesitamos vigilar las nuevas herramientas y aprender lo mejor de ellas.

Algunos consejos para hacer que su sitio web funcione más rápido:
Minificar HTML, CSS y JavaScript : para hacerlo, elimine todos los comentarios innecesarios, espacios en blanco y código. Esto mejorará el rendimiento porque se reducirá el tamaño del archivo.
Hacer que CSS y JavaScript sean externos: el uso de archivos externos generalmente hará que las páginas se carguen más rápido porque el navegador almacena en caché los archivos JavaScript y CSS.
Eliminar secuencias de comandos duplicadas en una página web: este problema puede parecer extraño, pero en realidad es bastante común. Los archivos duplicados de JavaScript y CSS degradan el rendimiento al crear solicitudes HTTP innecesarias y una ejecución de JavaScript desperdiciada. También es importante verificar y ver si los scripts también se han duplicado en archivos externos. Para evitar este problema, utilice un módulo de administración de scripts con sus plantillas.
Optimizar imágenes: reduzca el tamaño de las imágenes con GIF, PNG-8. o JPEG como los formatos de archivo. Asegúrese de que el tamaño coincida con su uso y establezca el tamaño de cada página con la altura y el ancho. No utilice la escala, especialmente de imágenes más grandes a más pequeñas. El resultado de la imagen puede verse bien en la pantalla, pero el tamaño del archivo será el mismo. Para aprovechar realmente las dimensiones más pequeñas, use un programa de edición de imágenes y escale la imagen en consecuencia. El tamaño del archivo resultante será más pequeño. También es importante experimentar con la compresión con todos estos formatos de archivo. En algún momento obtendrá una compresión aceptable con una pérdida mínima de calidad. La experimentación es clave.

Busque más información aquí 7 consejos para hacer que sus sitios web se carguen más rápido

Y este enlace también puede ser útil para usted. 6 Herramientas gratuitas para probar la velocidad del sitio web

Puede codificarlo inteligentemente, usando un lenguaje compilado y eficiente en el lado del servidor (por ejemplo, Opa, Ocaml con Ocsigen, o HOP, o incluso C ++ o C con FastCGI o alguna biblioteca de servidor HTTP como libonion …).

No olvides aprender programación, y eso lleva diez años (y necesitarás aprender varios lenguajes y paradigmas de programación).

Lea algunos Introducción a los algoritmos.

1. Minimice las solicitudes HTTP –
Al reducir el número de componentes en su página web, a su vez, se reduce el número de solicitudes HTTP que se requieren para representar la página. Podemos ::
a) Combinar archivos: combine todos sus diferentes scripts en un solo script y también combine sus diferentes CSS en una sola hoja de estilo. Esto reduce la cantidad de solicitudes HTTP.
b) Sprites CSS: este método es muy útil si su página tiene muchas imágenes. Este método combina sus imágenes de fondo en una sola imagen y mediante el uso de CSS podemos mostrar la imagen deseada.
c) Mapas de imágenes: use un mapa de imágenes en su sitio web si tiene imágenes contiguas. Esto combinará sus múltiples imágenes en imágenes individuales. Aunque el tamaño sigue siendo el mismo, sus solicitudes HTTP se reducen.
d) Imágenes en línea: aunque esta práctica no es compatible con muchos navegadores, podemos intentarlo una vez. Usamos datos: esquema de URL para incrustar la imagen en la página real. Esto aumenta el tamaño de su documento HTML pero reduce las solicitudes HTTP

2. Use una red de entrega de contenido –
La proximidad del usuario a nuestro servidor web tiene un impacto en los tiempos de respuesta. Implementar nuestro contenido en varios servidores dispersos geográficamente hará que nuestras páginas se carguen más rápido desde la perspectiva del usuario.
Una red de entrega de contenido (CDN) es una colección de servidores web distribuidos en múltiples ubicaciones para entregar contenido de manera más eficiente a los usuarios. El servidor seleccionado para entregar contenido a un usuario específico es
típicamente basado en una medida de proximidad de red. Esto ayudará para descargas paralelas. Los algoritmos utilizados son el algoritmo de reconocimiento de jerarquía, el algoritmo de reemplazo de réplica, etc.

3. Caché – Encabezado de control –
Tenemos dos aspectos para esto:
Para componentes estáticos: implemente la política “Nunca caducar” configurando el encabezado Expira en el futuro
Para componentes dinámicos: use un encabezado de Cache-Control apropiado para ayudar al navegador con solicitudes condicionales
Los navegadores (y servidores proxy) usan un caché para reducir la cantidad y el tamaño de las solicitudes HTTP y, por lo tanto, hacer que las páginas web se carguen más rápido. Un servidor web usa el encabezado Expires en la respuesta HTTP para decirle al cliente
cuánto tiempo se puede almacenar en caché un componente.
Si su servidor es Apache, use la directiva ExpiresDefault para establecer una fecha de vencimiento relativa a la fecha actual.

4. Componentes Gzip –
La compresión reduce los tiempos de respuesta al reducir el tamaño de la respuesta HTTP.
A partir de HTTP / 1.1, los clientes web indican compatibilidad para la compresión con el encabezado Accept-Encoding en la solicitud HTTP. Aceptar-Codificación: gzip.
Si el servidor web ve este encabezado en la solicitud, puede comprimir la respuesta utilizando uno de los métodos enumerados por el cliente. El servidor web notifica esto al cliente web a través del encabezado Content-Encoding en
la respuesta. Codificación de contenido: gzip
Gzipping generalmente reduce el tamaño de respuesta en aproximadamente un 70%. Aproximadamente el 90% del tráfico actual de Internet viaja a través de navegadores que afirman ser compatibles con gzip.

5. CSS –
Siempre haga una práctica para poner sus hojas de estilo siempre en la parte superior. Esto se debe a que, al colocar hojas de estilo en el HEAD, la página se renderizará progresivamente.

6. Ponga guiones en la parte inferior
El problema causado por los scripts es que bloquean las descargas paralelas. Por lo tanto, preferimos incluir nuestros scripts en la parte inferior de la sección HEAD de la página web. Porque si un script se está descargando, bloqueará otros
descargando en la página web.

7. Evita las expresiones CSS
Las expresiones CSS son una forma poderosa (y peligrosa) de establecer propiedades CSS de forma dinámica. Pero es a la vez un movimiento feliz y triste. Las expresiones CSS se usaron después de IE5, pero quedarán en desuso con IE8.
El problema con las expresiones es que se evalúan con más frecuencia de lo que la mayoría de la gente espera. No solo se evalúan cuando la página se representa y cambia de tamaño, sino también cuando se desplaza la página e incluso cuando el usuario mueve el mouse sobre la página.

8. Hacer JS y CSS externo
El uso de archivos externos en el mundo real generalmente produce páginas más rápidas porque el navegador almacena en caché los archivos JavaScript y CSS. JavaScript y CSS que están integrados en documentos HTML se descargan cada vez que se solicita el documento HTML. Esto reduce la cantidad de solicitudes HTTP que se necesitan, pero aumenta el tamaño del documento HTML. Por otro lado, si JavaScript y CSS están en archivos externos almacenados en caché por el navegador, el tamaño del documento HTML se reduce sin aumentar el número de solicitudes HTTP.

9. Reduce las búsquedas de DNS
El Sistema de nombres de dominio (DNS) asigna nombres de host a direcciones IP, del mismo modo que las guías telefónicas asignan los nombres de las personas a sus números de teléfono. Cuando escribes Yahoo! en su navegador, una resolución DNS contactada por el navegador devuelve la dirección IP de ese servidor. DNS tiene un costo. Normalmente, el DNS tarda entre 20 y 120 milisegundos para buscar la dirección IP de un nombre de host determinado. El navegador no puede descargar nada de este nombre de host hasta que se complete la búsqueda de DNS.
Las búsquedas de DNS se almacenan en caché para un mejor rendimiento. Este almacenamiento en caché puede ocurrir en un servidor de almacenamiento en caché especial, mantenido por el ISP del usuario o la red de área local, pero también hay almacenamiento en caché que ocurre en la computadora del usuario individual. La información de DNS permanece en la memoria caché de DNS del sistema operativo (el “Servicio de cliente DNS” en Microsoft Windows). La mayoría de los navegadores tienen sus propios cachés, separados del caché del sistema operativo. Mientras el navegador mantenga un registro DNS en su propia caché, no molesta al sistema operativo con una solicitud de registro.
Internet Explorer almacena en caché las búsquedas de DNS durante 30 minutos de forma predeterminada, según lo especificado por la configuración del registro DnsCacheTimeout. Firefox almacena en caché las búsquedas de DNS durante 1 minuto, controlado por la configuración de configuración network.dnsCacheExpiration. (Fasterfox cambia esto a 1 hora).

10. Minify JS y CSS
La minimización es la práctica de eliminar caracteres innecesarios del código para reducir su tamaño y así mejorar los tiempos de carga. Cuando se minimiza el código, se eliminan todos los comentarios, así como los caracteres de espacio en blanco innecesarios (espacio, nueva línea y tabulación). En el caso de JavaScript, esto mejora el rendimiento del tiempo de respuesta porque se reduce el tamaño del archivo descargado. Dos herramientas populares para minificar el código JavaScript son JSMin y YUI Compressor. El compresor YUI también puede minimizar CSS.
11. Evita los redireccionamientos
Los redireccionamientos se realizan utilizando los códigos de estado 301 y 302. Aquí hay un ejemplo de los encabezados HTTP en una respuesta 301:
HTTP / 1.1 301 movido permanentemente
Ubicación: IANA – Dominios de ejemplo
Tipo de contenido: texto / html
El navegador lleva automáticamente al usuario a la URL especificada en el campo Ubicación. Toda la información necesaria para una redirección está en los encabezados. El cuerpo de la respuesta suele estar vacío. Lo principal a recordar es que los redireccionamientos ralentizan la experiencia del usuario. Insertar una redirección entre el usuario y el documento HTML retrasa todo en la página ya que no se puede procesar nada en la página y no se puede comenzar a descargar ningún componente hasta que llegue el documento HTML. Usar una redirección para conectar dos sitios web es simple y requiere poco codificación adicional Aunque el uso de redireccionamientos en estas situaciones reduce la complejidad para los desarrolladores, degrada la experiencia del usuario.
12. Eliminar scripts duplicados
Daña el rendimiento incluir el mismo archivo JavaScript dos veces en una página. Cuando sucede, los scripts duplicados perjudican el rendimiento al crear solicitudes HTTP innecesarias y una ejecución de JavaScript desperdiciada. Las solicitudes HTTP innecesarias ocurren en Internet Explorer, pero no en Firefox. En Internet Explorer, si un script externo se incluye dos veces y no se puede almacenar en caché, genera dos solicitudes HTTP durante la carga de la página. Incluso si la secuencia de comandos se puede almacenar en caché, se producen solicitudes HTTP adicionales cuando el usuario vuelve a cargar la página. Al incluir la misma secuencia de comandos nuevamente, se pierde tiempo evaluando la secuencia de comandos varias veces. Esta ejecución redundante de JavaScript se produce tanto en Firefox como en Internet Explorer, independientemente de si la secuencia de comandos es almacenable en caché
Una alternativa en PHP sería crear una función llamada insertScript.

Además de evitar que el mismo script se inserte varias veces, esta función podría manejar otros problemas de script.
13. Configurar etiquetas de entidad (ETags) –
Un ETag es una cadena que identifica de forma exclusiva una versión específica de un componente. Las etiquetas de entidad (ETag) son un mecanismo que los servidores web y los navegadores utilizan para determinar si el componente en la memoria caché del navegador coincide con el del servidor de origen. Etiquetas generadas por Apache e IIS para el mismo componente exacto no coincidirá de un servidor a otro. Si los ETag no coinciden, el usuario no recibe la pequeña y rápida respuesta 304 para la que fueron diseñados los ETag; en su lugar, obtendrán una respuesta normal de 200 junto con todos los datos para el componente. Si aloja su sitio web en un solo servidor, esto no es un problema. Pero si tiene varios servidores que alojan su sitio web, y está utilizando Apache o IIS con la configuración ETag predeterminada, sus usuarios obtienen páginas más lentas, sus servidores tienen una carga más alta, está consumiendo un mayor ancho de banda y los servidores proxy no están ‘ t almacenar en caché tu contenido de manera eficiente.
14. Hacer Ajax Cascheable-
Una de las ventajas de Ajax es que proporciona comentarios instantáneos al usuario porque solicita información de forma asincrónica desde la web de backend Parallels Confixx para mejorar el rendimiento, es importante optimizar las respuestas de Ajax. La forma más importante de mejorar el rendimiento de Ajax es hacer que las respuestas se puedan almacenar en caché. A pesar de que sus respuestas de Ajax se crean dinámicamente y pueden ser aplicables solo a un solo usuario, aún pueden almacenarse en caché.
15. Vaciar el búfer temprano
Cuando los usuarios solicitan una página, el servidor de fondo puede tardar entre 200 y 500 ms para unir la página HTML. Durante este tiempo, el navegador está inactivo mientras espera que lleguen los datos. En PHP tienes la función flush (). Le permite enviar su respuesta HTML parcialmente lista al navegador para que el navegador pueda comenzar a buscar componentes mientras su back-end está ocupado con el resto de la página HTML. Un buen lugar para considerar el enjuague es justo después del HEAD porque el HTML para el head es generalmente más fácil de producir y le permite incluir cualquier archivo CSS y JavaScript para que el navegador comience a buscar en paralelo mientras el backend aún se está procesando.
Ejemplo:-



16. Use GET para Ajax Request-
POST se implementa en los navegadores como un proceso de dos pasos:
-Enviando los encabezados primero.
-entonces enviando datos.
Por lo tanto, es mejor usar GET, que solo requiere un paquete TCP para enviar. La longitud máxima de URL en IE es de 2K, por lo que si envía más de 2K de datos, es posible que no pueda usar GET. GET está destinado a recuperar información, por lo que tiene sentido usar GET cuando solo solicita datos.
17. Componentes de carga posterior
Descubra el contenido y los componentes, que no son necesarios para representar la página. El código JavaScript y las bibliotecas que arrastran y sueltan y las animaciones podrían ser estos, porque arrastrar elementos en la página se produce después de la representación inicial. JavaScript puede mejorar la experiencia del usuario pero debes asegurarte de que la página funcione incluso sin JavaScript. Entonces, después de asegurarse de que la página funciona bien, puede mejorarla con algunos scripts cargados posteriormente que arrastran y sueltan y animaciones.
18. Componentes de precarga
Al precargar los componentes, puede aprovechar el tiempo que el navegador está inactivo y solicitar los componentes (como imágenes, estilos y scripts) que necesitará en el futuro. De esta manera, cuando el usuario visite la siguiente página, podría tener la mayoría de los componentes ya está en el caché y su página se cargará mucho más rápido para el usuario. En realidad, hay varios tipos de precarga:
a) Precarga incondicional: tan pronto como se activa la carga, continúa y busca algunos componentes adicionales.
b) Precarga condicional basada en una acción del usuario, adivina hacia dónde se dirige el usuario y precarga en consecuencia.
c) Precarga anticipada: precargue por adelantado antes de lanzar un rediseño.
19. Reduzca el número de componentes DOM
Una página compleja significa un acceso DOM (Etiquetas HTML) más lento en JavaScript. Un alto número de elementos DOM en su página significa que el marcado de la página debe mejorarse sin eliminar ningún contenido. No use tablas anidadas para fines de diseño. agregue más

s solo para solucionar problemas de diseño. Hay una forma mejor y más semánticamente correcta de hacer su marcado.
La cantidad de elementos DOM es fácil de probar, solo escriba la consola de Firebug:
document.getElementsByTagName (‘*’). length
20. Componentes divididos a través de dominios
Puede maximizar las descargas paralelas dividiendo los componentes en varios dominios, pero no use más de 2-4 dominios debido a la penalización de búsqueda de DNS. Por ejemplo, puede alojar su contenido HTML y dinámico en el desarrollo de software del Condado de Orange y dividir componentes estáticos entre http://www.static1.org y http://www.static2.org .

Algunas técnicas:

  1. Servidor más rápido (no se encuentre en un servidor GoDaddy con más de 2,000 sitios).
  2. Red más rápida al servidor (o centros de datos distribuidos)
  3. Almacenamiento en caché de elementos / páginas / consultas lentas y solicitadas con frecuencia (barniz o un servicio similar, MemCache o REDIS)
  4. Use un CDN para una entrega de activos más rápida
  5. Comprimir respuestas a nivel del servidor
  6. Paralelizar descargas (hasta que aparezca HTTP2, entonces puede ser contraproducente)
  7. Minificar CSS / JS
  8. Comprimir activos de imagen y eliminar metadatos innecesarios. Sirviendo los tamaños de activos apropiados (no publique una imagen enorme y luego CSS la reduzca)
  9. Ponga índices en las consultas correctas de la base de datos, use el tipo de base de datos correcto, optimice sus consultas o resuelva el problema de manera diferente o use un almacén de datos diferente (como ElasticSearch para búsquedas de texto)
  10. Utilice un lenguaje más rápido u optimice su idioma (como el almacenamiento en caché de OpCode y APC para PHP)
  11. Retrasar la carga de algunos activos más grandes o partes de su sitio con JS carga diferida o diferida (Facebook y Twitter hacen mucho, pero no es genial para Google).
  12. ¿Mencioné CACHING!

Hay toneladas de técnicas y algunas son excesivas dependiendo de su sitio, tráfico y problema exacto. También hay muchas herramientas que pueden ayudarlo a descubrir cuál es el problema (Google PageSpeed, New Relic, etc.)

Hay muchas maneras de aumentar la velocidad del sitio web.

1. CSS / JavaScript Minified

Al minimizar (eliminar espacios, código comentado) archivos CSS y JavaScript, puede aumentar la velocidad de su página.

2. Cargando recursos asincrónicamente

Loading Resources (CSS / JS) asincrónicamente hace que sus páginas web sean increíblemente rápidas. Porque su contenido no estará esperando que se cargue ningún recurso.

3. Habilitar la compresión

La compresión reduce los tiempos de respuesta al reducir el tamaño de la respuesta HTTP. Gzipping generalmente reduce el tamaño de respuesta en aproximadamente un 70%. Algunas extensiones / complementos de almacenamiento en caché lo hacen automáticamente, a veces es necesario configurarlo manualmente en el nivel del servidor web.

4. Secuencia de CSS y JavaScript

Es preferible para el rendimiento que los archivos JavaScript, así como los archivos CSS, se carguen en el pie de página de su sitio para que no bloqueen la descarga de otros activos en su sitio, por lo tanto, lo ralentizan.

5. Usando CDN

Una red de entrega de contenido (CDN) es una colección de servidores web distribuidos en múltiples ubicaciones para entregar contenido de manera más eficiente a los usuarios. El servidor seleccionado para entregar contenido a un usuario específico generalmente se basa en una medida de proximidad de la red.

6. Optimiza tu HTML

Asegúrese de que la fuente de vista de la página (presione CTRL + U para ver la fuente) tenga el menor espacio.

7. Use un servidor de alojamiento rápido

Si tiene una cantidad decente de tráfico, no debe estar en hosts como Bluehost, Hostgator, GoDaddy y otros servidores web de bajo presupuesto como ese.

8. Especifique las dimensiones de la imagen

Antes de que su navegador pueda mostrar su página web, tiene que descubrir cómo diseñar su contenido alrededor de sus imágenes.

9. Servir recursos de dominios menos diferentes

A veces está utilizando más y más complementos en su sitio debido al requisito funcional, pero sin saberlo, está utilizando recursos de muchos de los dominios.

10. image lazyload

La carga diferida también es una forma efectiva de cargar un sitio web increíblemente rápido.

Aquí está la versión más explicativa de esta guía ( 15 consejos para acelerar su sitio web [actualizado] ).

Voy a mantener esto súper corto.

  • Herramientas de PageSpeed: Google tiene una herramienta que desglosará lo que ralentiza su sitio. Siga sus recomendaciones cuando sea posible. Google Chrome tiene una herramienta similar que es más técnica, pero le permitirá profundizar en archivos específicos que están ralentizando las cosas
  • minimice su CSS y JS: existen herramientas que pueden automatizar esto.
  • depure su JS y manténgalo simple.
  • Use un CDN (Content Delivery Network): Cloudflare es excelente.
  • en javascript si puede evitar volver a dibujar grandes fragmentos de html, hágalo.
  • Las imágenes pueden ser comprimidas. También hay un nuevo estándar para las imágenes receptivas, que le permite cargar solo la imagen del tamaño apropiado para el dispositivo. Solo imágenes de Google Responsive html 5.
  • en javascript, trate de no ser redundante, use funciones si necesita hacer la misma operación varias veces.
  • use complementos y herramientas de almacenamiento en caché. El caché total W3 es una opción popular para los sitios de WordPress. Memcached / Varnish cache también son increíbles.

Espero que mi respuesta breve y directa ayude.

La lista de mejores prácticas de YDN tiene 35 de las cosas más importantes para acelerar su sitio web:

http://developer.yahoo.com/perfo

De nota:

  • Hacer menos solicitudes HTTP
  • Use una red de entrega de contenido ( CDN )
  • Componentes Gzip
  • Minificar JavaScript y CSS
  • Hacer Ajax almacenable en caché

También está la herramienta YSlow ( http://developer.yahoo.com/yslow/ ) o el panel de auditoría incorporado en Chrome Inspector que puede ayudarlo a encontrar formas de mejorar el rendimiento de cualquier página web o aplicación web.

Primero debe verificar la velocidad del sitio web (Verificar la velocidad del sitio web) y luego tomar medidas para mejorar el rendimiento del sitio web.

Algunas cosas generales que debe considerar al pensar en cómo mejorar la velocidad de su sitio web:

  • Elija el servicio de alojamiento: debe elegir un proveedor de alojamiento profesional, ya que esto puede afectar la velocidad de su sitio web.
  • Habilite el almacenamiento en caché del navegador: el almacenamiento en caché puede ayudar a acelerar el proceso de carga para los visitantes que ya visitaron su página.
  • Minimice los redireccionamientos: la cantidad de redireccionamientos puede reducir el tiempo de carga, por lo que debe intentar minimizar el uso de esos.
  • Repare las URL rotas: no solo las páginas rotas son malas para su SEO, sino que también pueden tener un impacto negativo en el rendimiento de su sitio web. Utilice algunos de los verificadores de enlaces disponibles en línea para detectar y corregir las URL rotas que tiene en su sitio web.
  • Optimizar imágenes: la optimización de imágenes es importante, especialmente para conexiones lentas. De esta forma, minimizará el tamaño de la imagen, lo que ayudará automáticamente a que su sitio web se cargue más rápido. También debe agregar atributos para evitar dejar un código src de imagen vacío.
  • Optimizar CSS: el contenido de su página puede ayudarlo a aumentar la velocidad del sitio web si optimiza CSS al reducir el tamaño del código y evitar el contenido duplicado.

No hay una forma corta de responder esta pregunta. Pero aquí hay algunos pasos y recomendaciones.

  1. Optimización de imagen (¡muy importante!)
  2. Reducir solicitudes HTTP
  3. Minificar CSS y Javascript
  4. Ruta crítica y recursos de bloqueo de procesamiento (CSS + JS)
  5. Reduzca la latencia con un CDN (sin complicaciones)
  6. Tiempo hasta el primer byte (TTFB)
  7. Evita los redireccionamientos 301
  8. Almacenamiento en caché
  9. Prefetch y Preconnect
  10. HTTP / 2
  11. PHP7 o HHVM
  12. Rendimiento de fuentes web
  13. Protección Hotlink
  14. Habilitar compresión Gzip
  15. Infraestructura
  16. Corregir errores 404
  17. Servir imágenes a escala
  18. Optimización de bases de datos

Vea una explicación más detallada de todo lo anterior aquí: 18 consejos para la optimización del rendimiento del sitio web

Comience probando la velocidad real de carga de la página y luego puede usar algunas herramientas para optimizarla. Aquí hay una lista de recursos que puede usar: Acelere la carga de su página – Herramientas para propietarios y desarrolladores de sitios

Cuando se trata de wordpress, puedo compartir algunos recursos valiosos que pueden responder a su pregunta:
Cómo construir un sitio web 10 veces más rápido con las herramientas de WordPress
¡Espero que ayude!