javascript - renderizado - ¿Corregir los tiempos de carga del sitio?

quitar el javascript que bloquea la visualización de contenido wordpress plugin (17)

Aquí está la lista donde puedes probar tu página web:

También para acelerar su página puede usar:

Amazon CloudFront
CloudFlare - tiene plan libre

1. Optimiza tus imágenes

Sepa cuándo usar el formato de archivo apropiado para sus imágenes. Cambiar a un formato de archivo diferente puede disminuir drásticamente el tamaño del archivo de una imagen.

GIF : es ideal para imágenes con pocos colores, como logotipos.
JPEG : es ideal para imágenes con muchos colores y detalles como fotografías.
PNG : es la opción cuando necesita imágenes transparentes de alta calidad.

Consulte estos recursos para obtener más información sobre la optimización de imágenes:

Para reducir el tamaño de tu imagen, recomendaría TinyPNG

2. No escalar imágenes

Evite utilizar una imagen más grande de la que necesita solo porque puede establecer los atributos de width y height de los elementos <img> en HTML.

_{* Si necesita una imagen de 100x100px y tiene una imagen de 700x700px, use un editor de imágenes como Photoshop o uno de estos editores de imágenes basados en web para cambiar el tamaño de la imagen a las dimensiones necesarias.} _{Esto reduce el tamaño del archivo de la imagen, lo que ayuda a disminuir los tiempos de carga de la página.}

3. Comprime y optimiza tu contenido

La tarea de comprimir el contenido de su sitio web puede tener un gran impacto en la reducción de los tiempos de carga. Al usar la compresión HTTP, todos los datos de su página web se envían en un solo archivo más pequeño en lugar de una solicitud que está llena de muchos archivos diferentes. Para obtener más información, consulte este artículo de Wikipedia sobre compresión HTTP .

También puede optimizar y comprimir sus archivos JavaScript y CSS combinándolos y minificando el código fuente.

4. Poner referencias de hoja de estilo en la parte superior

Mover las referencias de su hoja de estilo al <head> de su documento HTML ayuda a sus páginas a sentir que se está cargando más rápido porque al hacerlo permite que sus páginas muestren los estilos progresivamente. Además, no hace daño que sea el estándar W3C.

5. Ponga referencias de scripts en la parte inferior

Los navegadores solo pueden descargar dos componentes por nombre de host al mismo tiempo. Si agrega las secuencias de comandos hacia la parte superior, se bloquearía todo lo demás debajo de la carga inicial de la página. Esto hace que parezca que la página se está cargando más despacio.

Para evitar esta situación, coloque referencias de scripts lo más abajo posible en el documento HTML, preferiblemente justo antes de la etiqueta <body> cierre.

6. Coloque JavaScript y CSS en archivos externos

Si su JavaScript y CSS están directamente en su documento HTML, se descargan cada vez que se solicita un documento HTML. Esto, entonces, no aprovecha el almacenamiento en caché del navegador y aumenta el tamaño del documento HTML.

Siempre coloque su CSS y JavaScript en archivos externos; es una mejor práctica y hace que su sitio sea más fácil de mantener y actualizar.

7. Minimice las solicitudes HTTP

Al visitar una nueva página web, la mayor parte del tiempo de carga de la página se emplea para descargar componentes de esa página (por ejemplo, imágenes, hojas de estilo y scripts).

Al minimizar la cantidad de solicitudes que debe realizar una página web, se cargará más rápido. Para reducir las solicitudes HTTP de imágenes, una cosa que puede hacer es usar sprites CSS para combinar varias imágenes.

Si tiene varias hojas de estilo y bibliotecas de JavaScript, considere combinarlas para reducir el número de solicitudes HTTP.

8. Guarde en caché sus páginas web

Si usa un sistema de administración de contenido que genere dinámicamente sus páginas web, debe almacenar en caché estáticamente sus páginas web y consultas de base de datos para que pueda disminuir la tensión en su servidor y acelerar los tiempos de procesamiento de las páginas.

9. Reduce 301 redirecciones

Cada vez que se utiliza una redirección 301, obliga al navegador a una nueva URL que aumenta los tiempos de carga de la página. Si es posible, evite usar 301 redirecciones.

Actualmente, mi sitio tarda un milenio en cargarse aunque apenas contenga algo. Mi suposición es que es porque hay bastantes imágenes y JavaScript en la página.

¿Hay alguna manera de probar qué causa los largos tiempos de carga?

Aquí hay algunas cosas básicas que puede seguir para aumentar la velocidad de su sitio:

Contenido posterior a la carga : al principio no cargue todas sus cosas, como archivos, imágenes o datos de JavaScript. Realice un flujo de contenido que su usuario debería ver primero y cárguelo en ese orden. Esto reducirá el tiempo de espera percibido del usuario porque podrá mirar las partes cargadas del sitio mientras se carga el resto.
Contenido previo a la carga : aproveche el tiempo de inactividad del usuario. Cargue contenido en el backgroud usando Ajax o trucos de almacenamiento en caché de imágenes, para que el usuario no se dé cuenta de que la página todavía está "funcionando". Debido a que los archivos ya están cargados previamente en la memoria caché del navegador, cuando el usuario carga la siguiente página o vista, parecerá muy rápido porque los datos ya están almacenados localmente. (En resumen, la idea principal detrás del contenido publicado y precargado es mostrarle al usuario lo que quiere al principio y luego cargar otro contenido en segundo plano antes de que necesite ver ese contenido. Use JavaScript o jQuery Ajax para cargar su contenido y guardarlos en caché.
Optimizar imágenes :
1. Reduce la calidad de las imágenes en una medida que el ojo humano no puede descifrar. Puede comprometer un poco la calidad de imagen para tamaños de archivo muy reducidos y, por lo tanto, una velocidad de descarga / carga mucho mayor.
2. No utilice el navegador para reducir imágenes: no envíe una imagen grande y deje que el navegador se escale a un tamaño significativamente más pequeño con ancho y alto de CSS. Ajuste manualmente el tamaño de su imagen aproximadamente al tamaño correcto, incluso si desea usar algunas escalas como una imagen de fondo completamente estirada.
3. Use el reemplazo de CSS para las imágenes.
4. Utilice sprites de CSS: combine sus imágenes pequeñas en una imagen y muestre la parte correcta usando CSS.
5. Hacer imágenes en caché.
Mantenga CSS en la parte superior : mantener CSS en la parte superior le hace sentir que la página se está cargando más rápido. A medida que se aplica CSS, se carga una parte del contenido.
Mantenga JavaScript en la parte inferior : JavaScript se utiliza para manipular elementos DOM, por lo tanto, cargue el elemento DOM primero para que la página se represente primero y luego cargue su script. JavaScript también bloquea descargas paralelas.
Minificar JavaScript y CSS : la reducción de CSS y JavaScript puede reducir su tamaño hasta del 50 al 30% de la copia original.
Use CSS y JavaScript externos : los archivos .css y .js se pueden almacenar en la memoria caché, por lo tanto, use archivos CSS y JavaScript externos.
Componente dividido entre dominios : divida su componente en dos o tres dominios como example.com a com1.example.com y com2.example.com . Esto le permite maximizar las descargas paralelas. No guarde más de dos o cuatro dominios, de lo contrario le dará una penalización de búsqueda de DNS.

Chrome tiene una consola donde puede ver los tiempos de carga del sitio y todo lo que necesita descargarse.

El problema principal en esta página son las imágenes grandes bg_img1.jpg, bg_img2.jpg y bg_img3.jpg. Tienen un tamaño entre 0.91MB y 1.45MB.

En este caso, usaría Chrome y la barra de herramientas Dev (pestaña Red) para ver cuáles son los elementos pesados.

Entonces: Sí, realmente necesitas arreglar tu sitio. La gente no esperará para cargar un sitio, particularmente un sitio personal / profesional. Lo más importante que veo en su sitio es la compresión / optimización de imágenes casi inexistente. Aquí hay algunas pautas:

Use archivos JPEG para fotografías y degradados. Use PNG (o GIF) para arte lineal o texto . Esto tiene que ver con los algoritmos de compresión utilizados para cada tipo de imagen.

Por lo general, una tasa de compresión JPEG del 80% es bastante buena para la mayoría de las imágenes en la web, incluidas todas las tomas de miniaturas / galerías. Por ejemplo, este JPEG aquí: http://www.jj-triggs.com/images/page4_img3.jpg tiene 25k. 25k !!! ¡Eso es ENORME, y tienes 15 de ellos en la página! Con una tasa de compresión del 80% (tamaño de imagen de 7k) puedo detectar algunos artefactos de compresión, pero también soy un diseñador profesional y lo estoy buscando. Incluso al 85%, el tamaño de la imagen cae a aproximadamente 8k.

Lo mismo ocurre con tus imágenes de fondo. bg_img1.jpg está llegando a aproximadamente 900k; bg_img2.jpg es 1.5 mb. ¡Esto es Loco! Particularmente dado que el paisaje urbano ya está parcialmente borroso, no hay detalles que preservar que garanticen una falta total de compresión JPEG. Reduje la compresión en bg_img2.jpg al 60%, obtuve un tamaño de archivo de <200k y casi no hay diferencia detectable en la calidad: http://cl.ly/image/230I3L3x0n1D .

A veces, cuando la imagen es el foco del contenido / sitio, está bien que sea grande y menos comprimida. Pero estas imágenes en su fondo y sus galerías simplemente no son importantes: son imágenes de fondo. No están destinados a ser estudiados. Las imágenes de la galería ídem; solo le están dando al usuario una idea de lo que obtendrán en el siguiente clic.

Use compresión JPEG selectiva. Adobe Fireworks ofrece esto: si tiene una imagen grande donde parte de ella es nítida y enfocada, pero el resto es borrosa o estará cubierta por contenido, puede seleccionar una región para la que desea una tasa de compresión JPEG más alta (digamos 85% ) y haga girar el resto de la imagen hasta el 50% o lo que sea. Por ejemplo, aquí está Cityscape con selectiva selección JPEG http://cl.ly/image/0T2z330P083r . Las partes enfocadas están al 75%; el resto está al 50% con suavizado activado.

No use gráficos para texto. En este día de TypeKit, Google Webfonts, y el control tipográfico razonable a través de CSS, casi nunca es necesario.

Reduzca la cantidad de archivos que deben transferirse. Cada imagen, archivo JavaScript, archivo CSS, etc. requieren su propia solicitud HTTP además de los tiempos de descarga.

Aquí hay algunos artículos sobre compresión de imagen y tiempos de descarga:

Es una respuesta larga ... pero creo que proporciona suficientes detalles para algunos enfoques básicos para mejorar el rendimiento de un sitio. La siguiente respuesta también será aplicable a casi cualquier sitio. Cualquier ejemplo específico proporcionado a continuación podría ser para la versión actual de http://www.jj-triggs.com/

En los puntos a continuación, me refiero al uso del complemento Net Panel of Firebug en Firefox, pero otros navegadores también tienen herramientas similares con casi el mismo enfoque que he mencionado.

Instala Firebug en Firefox y abre tu sitio web. Habilita Firebug para tu sitio (F12). Habilite el panel Net Firebug si no está habilitado ya.

Su sitio: http://www.jj-triggs.com/ - tarda de 5 a 6 segundos en mi sistema para repetir las visitas (para esta respuesta, no he mencionado los enfoques para mejorar esto), pero la primera visita tomó alrededor de 60 segundos. (Los puntos a continuación se centran en cómo mejorar eso) La mayoría de los puntos mencionados a continuación mejorarían su sitio para la primera carga (o recargas nuevas)

Después de haber cargado la página, para probar nuevas cargas, puede usar Ctrl + F5, Ctrl + R, Ctrl + Shift + R (dependiendo del navegador). Controle el Panel de red de Firebug cuando la página se está cargando.

Cuánto tiempo demora un sitio depende de:

- The speed of the site host server (seems OK, nothing much to do for now) - Visitor''s connection speed (cannot do anything for it) - Everything else (where you need to fix many things). The important approaches to resolve them are listed below: - Serve the user files with less size but same content: - Approach: Enable gzip on files which contain text contents (*.js, *.css, *.html etc) (currently your site does not use gzip) - How to identify: In Net panel, expand the HTTP request details for a file, in the Headers tab of the expanded details, Content-Encoding field should show the value gzip. - Solution: It might need you to modify .htaccess file (or some other approach based on the server) Search on Google or to see how to enable it. - Approach: Use minified JS and CSS files - How to identify: In Net panel, expand the HTTP request details for a JS/CSS file, in the Response tab of the expanded details, the code should be a minified version (no whitespace characters) of the file. - Solution: Use either the minified JS/CSS files as provided by the library. Or you can minify them yourself by using tools like "JSMin" or "YUI (CSS and JS) Compressor" - Approach: - Serve the user optimum images, i.e., less size with good enough quality - How to identify: - In Net Panel, go to Images tab > Sort by size - Generally the size of the images should be ... 1kb to 30kb for simple icons and logos and 20kb to 250kb for photos and large backgrounds. - Solution: - Compress the large images with softwares like GIMP (free) or Photoshop. - Approach: - Load the files from a CDN if possible - eg: Load jQuery, jQuery UI etc from popular but still free CDN - Advantage even for first visit: If the user has visited any other site which refers to the same path, it would be fetched from the cache itself - How to identify: - Check the Net panel''s "Domain" column for popular libraries like jQuery, jQuery UI etc. They should be getting loaded from a popular CDN such as Google. - Solution: - Include JS and CSS from (Google) CDN if available. - Approach: - Load CSS before JS - It may not necessarily help much with faster loading completion, but it usually gives a faster feeling of load because your CSS gets applied as soon as possible. - How to identify: - Check the Timeline column in Net panel. Usually CSS files should be the getting loaded before JS. - Solution: - Move the <script> tags towards the bottom of the page. - Approach: - Wherever possible, load third-party components like Google Maps dynamically after the page load has completed - How to identify: - Check the Timeline column in Net panel. The 3rd-party components should usually begin loading after almost all the other code for the site has loaded. - Solution: - The solution would depend on the third-party component and might be a bit tricky. Generally, loading the 3rd-party JavaScript after a small delay (using window.setTimeout and code to dynamically add script tags) would provide you better performance compared to loading the 3rd-party JS using plain HTML.

Creo que solucionar estos problemas mencionados podría reducir su (http://www.jj-triggs.com/) primer tiempo de carga al 10-30% del tiempo que lleva actualmente.

Firefox / Chrome / IE: presione F12, que abre un panel de desarrolladores, donde podrá encontrar un panel de red.

O prueba: pingdom

Instale el complemento FireBug en FireFox, luego cargue su sitio con la pestaña NET abierta en FireBug. Puedes ver cuánto tarda cada carga en cargarse.

Parece que hay dos imágenes de fondo que tardan más de 20 segundos en cargarse.

Las otras respuestas aquí hacen un buen trabajo al detallar herramientas de depuración del rendimiento y sugerencias para mejorar los tiempos de carga, por lo que no las repetiré.

Su principal problema es que carga absolutamente todo en su sitio antes de mostrar su página de inicio al visitante . Esto es innecesario y es el principal contribuyente a la percepción de que su sitio se carga lentamente.

Puedo entender que desea precargar tanto como sea posible, de modo que cuando el visitante navegue por su sitio, todo parezca que se carga al instante. Sin embargo, todo lo que hace es mover los pequeños tiempos de carga para cada sección en un gran tiempo de carga inicial. Cuando un visitante puede navegar solo por un área de su sitio, todavía está pagando por el tiempo de carga de todo el sitio, en lugar de solo las secciones que visita.

La forma más fácil de implementar pequeños tiempos de carga es dividir cada sección en su propia página y luego cargar solo lo que muestra en esa página. Los recursos como Javascript y CSS generalmente se almacenan en caché bastante bien, por lo que normalmente no tiene que preocuparse de que los tiempos de carga afecten a otra cosa que no sea su página de inicio.

Alternativamente, suponiendo que desea mantener todo su sitio en una página, deberá agregar dinámicamente las diversas subsecciones a la página utilizando Javascript, una vez que todo lo que se requiere para su página de inicio haya terminado de cargarse y la barra de progreso se haya ocultado. Sí, si el visitante hace clic rápidamente en una subsección, verá que se carga su contenido, pero si solo está interesado en la sección Contáctame, podrá obtener la información que necesita mucho antes. sin siquiera darse cuenta de que las otras secciones aún no se han cargado por completo.

Eso, y no uses imágenes de fondo enormes. Está bien ampliar una imagen de menor resolución para llenar la pantalla, y subir el nivel de compresión JPEG para disminuir el tamaño del archivo. Es una imagen de fondo y no debe ser un punto focal; deje las imágenes de alta resolución para su cartera. :)

Pruebe su página aquí. PageSpeed Insights: Google Developers y verá todas las sugerencias para hacer que su sitio sea más rápido.

Si bien esta es una pregunta anterior, me gustaría lanzar una herramienta adicional EXCELENTE que se puede usar para encontrar problemas de rendimiento en un sitio web.

La herramienta de edición gratuita AJAX de Compuware (dnyaTrace) me ha ayudado a resolver algunas cosas que me perdí en algunos de mis sitios en el pasado ... Recuerdo tener problemas de almacenamiento en caché (relacionados con htaccess) que descubrí usando la herramienta, entre otros consejos excelentes.

En cualquier caso, actualmente se puede descargar aquí: http://www.compuware.com/en_us/application-performance-management/products/ajax-free-edition/overview.html

También podría tener un cheque aquí: sitio de prueba

Esta prueba muestra que las imágenes son un gran contribuyente a su tiempo de carga. En particular, imágenes de fondo que parecen no estar optimizadas y pesan 1.4 MB

Estudie esto, reduzca el número de solicitudes, reduzca la escala de las imágenes, difiera la carga y comience a reducir el tiempo de carga

Descargo de responsabilidad: soy uno de los dev invovlved en la herramienta gratuita anterior

Tengo algunas sugerencias para mejorar el tiempo de carga:

Está utilizando tres imágenes de fondo, mientras que solo se muestra una. Elimine los otros dos o cárguelos más tarde.
Convierta imágenes PNG a JPEG y vea si puede ahorrar en tamaño.
Cargue archivos JavaScript estándar desde el repositorio de cdn en lugar de cargarlos desde su servidor. Existe una buena posibilidad de que el archivo se encuentre en su caché.
Minifica tus archivos de JavaScript después de concatenarlos, si no lo has hecho.

Todos mencionan problemas relacionados con el tráfico de la red, pero la carga de la página también puede deberse a JavaScript. Aquí hay algunos trucos que he aprendido sobre ese tema ...

Las herramientas para desarrolladores de Chrome tienen un generador de perfiles integrado en el navegador. Puede iniciarlo abriendo las herramientas de desarrollador, haciendo clic en los perfiles, haciendo clic en Inicio y realizando cualquier tarea que desee.

Este generador de perfiles le indicará dónde se está gastando su tiempo de solicitud y qué funciones están ocupando la mayor parte de su tiempo.

Dado que JavaScript tiene un solo hilo si realiza muchas cosas en la aplicación "init", su página no responderá durante un corto período de tiempo. ¿Cómo puedes saber si hay algún JS que está bloqueando? Bueno, el síntoma principal es cuando desplazas la rueda del mouse o haces clic en las cosas, no ocurre nada durante un tiempo notable en la carga de la página.

¿Qué sucede con tus eventos de desplazamiento y clics durante este tiempo? Bueno, se colocan en la cola del evento. Se llama a la cola de eventos siempre que no se esté ejecutando otro JavaScript. A menudo, la raíz puede rastrear la causa de estos problemas haciendo clic en el botón "Pausa" en un depurador JS y explorando el seguimiento de la pila ... sí, así de lenta es la ejecución.

A continuación hay algunos problemas / soluciones

Problema: página que no responde, en la carga de la página

En general, hay 2 formas de solucionar este tipo de problemas: - Primero (el método no tan bueno, pero a menudo razonable) puede tomar costosas operaciones que pueden ejecutarse en un bucle for en la carga de la página y arrojarlas en un setTimeout(fn, 0) Nota: 0 es en realidad 4ms o 5ms y su operación se lanza a la cola de eventos. Esto permite que se carguen más partes de la aplicación antes de tener que hacer mucho trabajo pesado. - Segundo, crea tu aplicación de forma que estas operaciones solo se ejecuten cuando sean necesarias en lugar de arrojar todo en la página ''listo'' o ''cargar''. Esto es en gran medida una medida preventiva o un refactor. En general, es difícil desenredar este tipo de problemas.

Problema: Hacer clic / interactuar es lento (después de la carga de la página)

Generalmente puede resolver esto haciendo un mejor trabajo delegando eventos. El burbujeo de eventos es algo que todos deberían saber en JS. En resumen, piense cómo un evento click en 1 objeto es realmente un clic que ocurre en cada padre que contiene ese objeto. La delegación está usando ese hecho para permitirle crear 1 controlador para muchos elementos DOM que hacen lo mismo / similar. Lea los documentos para on método jQuery''s on y realmente concéntrese en cómo usar el parámetro filter , y qué e.currentTarget vs e.target vs this son.

Problema: esperando demasiado tiempo para llamadas AJAX iniciales

Una forma de solucionar esto es hacer la solicitud AJAX antes. Puede colocar la solicitud en la carga de la página, pero antes de que la página esté lista. Luego, su solicitud se paralelizará con el resto de los activos de su página que se están cargando.

Problema: Demasiados archivos JS

Hoy en día, la gente usa sistemas de módulos (echa un vistazo a AMD y CommonJS), pero la manera más básica de resolver el hecho de tener demasiado tráfico de red que demora la carga de la página es consumir todos tus archivos JS. Ahora bien, si tiene 100k líneas de JS, entonces tendrá el problema opuesto (compilar JS lleva demasiado tiempo y necesita dividir sus archivos). En general, agrupar todo es una solución rápida. También podría dividir el tráfico de su red en múltiples subdominios. Esto te permitirá paralelizar más descargas. Creo que los navegadores tienen un límite de 6 descargas por dominio en este momento. Un CDN también ayudaría a esto.

Use el YSlow YSlow para Firefox. Le dará un análisis detallado de varios segmentos de rendimiento.

puedes probar este site y pingdom donde puedes consultar el rendimiento diario de tu sitio