¿Cómo hacer que un sitio web funcione más rápido?

Question

Estoy en mis primeros 3 meses de desarrollo web y he estado incursionando con algunas secuencias de comandos del lado del servidor en forma de ColdFusion, junto con algunos Javascript, JQuery y CSS.

He leído sobre la optimización de CSS y me gustaría saber cuáles son los otros factores pertinentes que contribuyen al mejor rendimiento de un sitio web. ¿Qué factores puede optimizar y optimizar un desarrollador?

¿Cuánta parte hace escoger (o más bien debería decir recomendar) un juego de navegador en particular en esta búsqueda de rendimiento?

aplausos

Answer 1

Instalación YSlowPagespeed y plugins para Firefox. Luego comience a analizar todas las formas en que su sitio no está optimizado. Esto será muy parecido a intentar tomar un sorbo de agua de una boca de incendios.

El uso de Javascript y CSS minimizados (y posiblemente agregados) junto con un buen y saludable futuro lejano es una buena manera de comenzar.

• No olvides gzip.
• Y use Etags.
• Y ponga su CSS en la parte superior del documento.
• Y ponga el javascript al final.
• Y use dominios separados para recursos estáticos.
• Y evite redireccionamientos de URL.
• Y elimine Javascript y CSS duplicados.

Y ... ¡mira lo que quiero decir sobre la boca de incendios!

Answer 2

Con ColdFusion, querrá asegurarse de que sus consultas sean cached. Utilice el analizador de consultas (si usa el servidor mssql) para asegurarse de que una página de carga lenta no sea el resultado de una consulta incorrecta. Al final de la base de datos, también querrá asegurarse de que la indexación sea correcta.

Un factor importante en el rendimiento es la cantidad de solicitudes HTTP que se envían para imágenes, archivos, etc. YSlow le mostrará esta información. Solo está disponible para Firefox.

Recomendaría this book.

Answer 3

Salida estos videos de Steve Souders (autor de YSlow):

http://www.youtube.com/watch?v=aJGC0JSlpPE

http://www.youtube.com/watch?v=BTHvs3V8DBA

Él también tiene un par de libros.

Answer 4

Sólo para resumir las cosas desde arriba:

La velocidad de un sitio web depende de algunas cosas:

• Server
• conexión
• cliente

Y en cada una de esta parte puedes hacer mejoras.

Servidor: si confía en una base de datos, compruebe si sus consultas están en caché y, lo que es más importante, compruebe si sus datos están en caché. Por ejemplo, si en cada página obtienes un menú de la base de datos, entonces puedes almacenar ese resultado en caché. Además, puede verificar su código y ver si hay espacio para la optimización. También el hardware en sí juega un papel. Si está en un plan de alojamiento compartido, tal vez el servidor esté lleno de otras aplicaciones no optimizadas que afectan negativamente al servidor.

Conexión: Aquí el YSlow y Pagespeed son útiles, así como Fiddler. Puede hacer un poco de almacenamiento en caché de contenido estático (CSS y JS). Establezca su fecha de vencimiento lejos en el futuro. Usar GZIP para reducir el contenido y combinar los archivos estáticos ayuda en cierta medida. Además, quizás el servidor tenga un ancho de banda bajo.

Cliente: si hace un javascript extraño o tiene selectores de css lentos, esto podría perjudicar el rendimiento en el cliente. Pero esto depende de la velocidad de la computadora del cliente.

Answer 5

No debe recomendar ningún navegador en particular, pero diseñe su página web con los estándares actuales con algunas correcciones para modelos más antiguos, si es necesario. Desde mi perspectiva, todo puede tener un impacto de velocidad, pero CSS es el menos importante y en ejemplos del mundo real el usuario no se dará cuenta de esto. En la mayoría de los casos, una clara separación de html y declaraciones de estilo hará el trabajo. ¿Qué tiene realmente un impacto? En primer lugar, simplemente puede arrojar dinero al problema al obtener un mejor contrato de hosting (tal vez un servidor dedicado). Otra cosa para mejorar la velocidad que tarda un sitio web en cargar es reducir la calidad de sus imágenes y el uso de CSS-Sprites. Muy a menudo en páginas web dinámicas la base de datos es un cuello de botella y, por lo tanto, el almacenamiento en caché y una buena capa de abstracción de base de datos pueden mejorar las cosas (PHP: PDO en lugar de simplemente usar mysql()). GZip su salida para el usuario. Hay muchas más cosas, pero muchas de ellas dependen mucho del idioma.

Recomiendo el uso de FireBug y loadimpact.com para realizar pruebas.

Answer 6

Menos archivos son más - CSS sprites puede ser algo a considerar. En mi experiencia, tienes que equilibrar tu archivo CSS entre velocidad y capacidad de mantenimiento: una regla más o menos no marcará la diferencia entre la noche y el día ...

Answer 7

Recomiendo leer Best Practices for Speeding Up Your Web Site y todo el contenido de Yahoo! Exceptional Performance página.

Si te gusta libros, usted puede estar interesado en High Performance Websites (Tenga en cuenta que una gran parte del contenido de este artículo está en el Best Practices for Speeding Up Your Web Site) y Even Faster Websites.

Aquí están algunos de mis reglas favoritas de Best Practices for Speeding Up Your Web Site:

• Minimizar las solicitudes HTTP
• Añadir un Expira o una
• Componentes Gzip
• Hacer JavaScript y CSS externa Cache-Control de Cabecera
• Minificar JavaScript y CSS

Además, smush.it es bueno para comprimir imágenes (que tienen un gran impacto en la velocidad de carga de una página web).

En cuanto a los navegadores, Safari 4 afirma que es "el navegador más rápido del mundo", y puedo decir que la versión para Mac es sin dudas agradable y rápida (sin mencionar elegante!). Sin embargo, las sugerencias anteriores harán una diferencia mucho mayor que el navegador que estás usando.

Steve

Answer 8

Si usted tiene un montón de javascript Es posible que desee utilizar la compresión de Javascript. Dojo proporciona una de esas herramientas SHRINKSAFE para comprimir su javascript. Busque el siguiente enlace: http://www.dojotoolkit.org/docs/shrinksafe

Hay otra herramienta abierta por google denominada velocidad de página, que puede ayudarlo a optimizar el rendimiento del sitio web. Se usó internamente antes de que fuera abierto para todos recientemente. http://google-code-updates.blogspot.com/2009/06/introducing-page-speed.html http://code.google.com/speed/page-speed/

Espero que ayude.

Answer 9

Google está recopilando todo tipo de sugerencias sobre el rendimiento en su nuevo 'Vamos a hacer la faster' páginas web aquí: http://code.google.com/intl/de-CH/speed/articles/

FYI: No toda la información en estas páginas son válidos, particularily las puntas de PHP están muy lejos .

Answer 10

Hay un plugin realmente genial para Firefox llamado Dust-Me Selectors. Escanea tus archivos css y te permite encontrar selectores que no se utilizan/se han vuelto redundantes en tu marcado.

https://addons.mozilla.org/en-US/firefox/addon/5392

También debe estar entregando su contenido estático fuera de un CDN. Las descargas paralelas de archivos estáticos acelerarán los renders de su página. Una mejor explicación aquí: http://www.sitecheck.be/tips/speed-up-your-site-using-a-cdn/

Answer 11

Para IE, ver http://www.fiddler2.com/fiddler/Perf/ El nuevo plugin para Nexpert Fiddler (http://www.fiddler2.com/fiddler2/addons/nexpert.asp) ofrece características similares a los encontrados en YSlow y Page Speed.

Answer 12

El mayor problema que tengo es la creación de páginas rápidas y bellamente diseñadas con contenido enriquecido. Esto es algo extremadamente difícil de hacer con la tecnología actual.

Answer 13

Un par de reglas básicas de las pruebas de rendimiento:

• rendimiento no significa nada si el programa/página web/lo que está mal.
• No intente mejorar el rendimiento sin tener una forma confiable de medición.
• Debe crear un perfil de su sitio/programa/lo que sea para descubrir qué es lo que hace las cosas más lentas.
  • Corrolario: No solo cambie las cosas al azar para ver si las cosas mejoran.

Answer 14

caché todo (servidor web y el almacenamiento en caché del navegador).

publicar estáticamente tanto como sea posible (es decir, para reducir la cantidad de llamadas de base de datos)

Answer 15

añadir también varios iconos a la espera de su sitio web. Muestra los íconos de tal manera que cada vez el usuario debe obtener un ícono de espera diferente, lo que debería ser efectivo para atraer al usuario. Y significa que su sitio web se cargará.