Consejos de diseño de sitios web: cómo reducir el tiempo de carga del sitio web - inteligenciaes

Consejos de diseño de sitios web: cómo reducir el tiempo de carga del sitio web

Un aspecto importante del diseño de un sitio web es reducir el tiempo de carga de la página web al mínimo posible. Un diseño de sitio web esbelto es, en cierto modo, como una mujer atlética atractiva, así que llamemos a este artículo “Un programa de pérdida de peso de sitio web” que lo ayudará a que sus páginas web se carguen mucho más rápido.

¿Por qué es tan importante reducir el tiempo de carga del sitio web?

Un sitio web tiene alcance global, pero las velocidades de conexión a Internet en varios países no son las mismas. Todavía existen muchos accesos telefónicos y conexiones de banda ancha lentas. Una investigación publicada recientemente ha revelado que, a menos que se gasten cantidades masivas en mejorar la infraestructura de Internet, la velocidad de conexión global promedio puede mostrar una caída para 2010. Incluso para aquellos que tienen conexiones de alta velocidad, la cantidad total de sitios web relevantes en Internet está creciendo. rápido. Esto se traduce directamente en menos tiempo dedicado por el espectador por página web. En términos generales, la paciencia es un bien escaso en el mundo actual de reducción de la relación entre recursos y consumo. ¿Quiere descuidar una gran proporción de clientes potenciales en todo el mundo solo porque el tiempo de carga de su página web es lento? Si no es así, siga los pasos a continuación para reducir el tiempo de carga del sitio web.

Las mujeres suelen trabajar en recortar las caderas, dar forma a las piernas y eliminar la celulitis en varios lugares. Del mismo modo, he clasificado a continuación el “programa de pérdida de peso del sitio web” en tres categorías “amplias”: gráficos, código y otros factores. Tenga en cuenta que debe seguir meticulosamente tantos pasos como pueda para eliminar la grasa redundante del diseño de su sitio web y reducir el “tiempo de carga del sitio web” al mínimo.

PROGRAMA DE PÉRDIDA DE PESO DEL SITIO WEB

UNA. RECORTE los gráficos (Caderas delgadas 🙂

1. Evite el diseño web gráfico pesado o complicado

Los diseños de sitios web que usan muchas imágenes (especialmente aquellos con efectos especiales) generalmente tardan mucho en cargarse. ¿Qué sucede si un sitio web atractivo sigue perdiendo visitantes valiosos solo porque sus páginas web tardan demasiado en cargarse? Trate de ser discreto y use menos cantidad de imágenes/gráficos mientras mantiene la apariencia y el impacto del diseño del sitio web. Recuerde que los motores de búsqueda leen fácilmente los enlaces de texto y se cargan más rápido que los botones gráficos. A veces también es posible mover imágenes grandes de una página importante a una sección como “Galería” para reducir el tiempo de carga de la página web.

Lee mas  3 consejos para usar un marcador de hierro de la manera correcta

2. Usa solo imágenes optimizadas

Optimice cada imagen en un software de edición como Photoshop. Hay diferentes formatos de imagen como GIF, JPEG, PNG, TIFF, etc., así que intente guardar las imágenes en el formato adecuado. Como regla general, GIF es más adecuado para imágenes de color uniforme y JPEG para escenas del mundo real. El GIF guardado en 256 colores debe reducirse (tanto como sea posible) a 128, 64 o 32 colores sin comprometer la calidad de la imagen. Para reducir el tiempo de carga del sitio web, los archivos JPEG deben guardarse con la menor calidad posible sin estropear el impacto de la imagen. También puede usar PNG si está seguro de que sus usuarios están usando navegadores más nuevos.

3. Especifique las dimensiones de la imagen

Al insertar imágenes en HTML, siempre mencione los atributos de alto y ancho. Esto ayuda al navegador web a conocer el tamaño de la imagen antes de cargarla. Luego, el navegador reservará el área para las imágenes mientras el resto del diseño de la página web continúa cargándose, lo que reduce el tiempo de carga del sitio web. No utilice las etiquetas de alto y ancho para reducir el tamaño de la imagen.

4. Precarga tus imágenes

Puede precargar algunas imágenes pesadas de las siguientes páginas (a las que se puede acceder haciendo clic en los enlaces dentro de la página actual) definiéndolas en el pie de página de la página web actual. Por ejemplo, img src=”nextimage” height=”1″ width=”1″ inserta una imagen de 1×1 píxeles en el pie de página que el navegador lee cuando se ha leído el código anterior. A partir de entonces, mientras su visitante está viendo su página principal, las imágenes de la página siguiente continuarán descargándose en la PC del espectador en segundo plano y reducirán los tiempos de carga de la página web subsiguiente. Esto no se recomienda para las páginas de destino directas de AdWords porque Google ha anunciado recientemente que un tiempo de carga elevado de la página web tendrá un impacto negativo en el nivel de calidad de la página de destino.

5. Optimizar archivos Flash

Animar cosas importantes puede tener un impacto en el visitante. Si es posible, evite las imágenes GIF animadas en los diseños de sitios web; en su lugar, use Flash con discreción. Utilice siempre archivos flash optimizados. Hay tantas maneras de reducir el tiempo de carga de Flash que trataré esto en un artículo aparte.

Lee mas  Cómo solucionar problemas de conexión a Internet para DSL o servicio de cable

B. TRIM el código (Piernas bien formadas 😉

1. Eliminar código inútil:

Al usar un generador de HTML, se insertan en el código algunas etiquetas adicionales o vacías, por ejemplo, romper espacios, comillas en bloque, espacios adicionales innecesarios, líneas en blanco, etc. Incluso si codifica HTML manualmente, siempre verifique manualmente el código de diseño de su sitio web y elimínelo. las etiquetas HTML vacías o innecesarias. Use DOCTYPE apropiado y cierre todos los elementos de marcado HTML. El navegador tendrá entonces menos trabajo para hacer coincidir los elementos. La codificación limpia de una página web no solo reducirá el tiempo de carga del sitio web, sino que también aumentará la proporción de texto a código y las arañas de los motores de búsqueda no tendrán que perder tiempo descifrando cosas irrelevantes.

2. Uso de CSS externo abreviado

CSS ayuda a que el código de diseño de su sitio web sea compacto y limpio, y su uso adecuado ayuda a reducir el tiempo de carga del sitio web. Defina estilos de fuente comunes, imágenes, etc. (utilizados en un conjunto de páginas web) en un solo CSS externo. Al hacer esto, no tendrá que insertar las mismas etiquetas una y otra vez en diferentes páginas; simplemente llame al CSS y aplique esa clase en particular. Con todas sus cosas repetitivas definidas en el archivo CSS, el navegador no tendrá que leer cada etiqueta de nuevo. Utilice siempre un archivo CSS externo y recuerde eliminar los estilos adicionales que no se utilicen.

Use nombres de clase más pequeños y CSS abreviado en lugar de poner cada atributo CSS en su propia línea.

Por ejemplo:

“cuerpo{

fondo: url(“imagen.jpg”);

color de fondo: #cccccc;

fondo-repetir: repetir-x;

}”

El código anterior se puede escribir de la siguiente manera cuando se usa CSS abreviado:

“cuerpo {

fondo: #cccccc url(‘imagen.jpg’) repetir-x;

}”

Un pequeño archivo CSS externo creado correctamente reducirá sustancialmente el tiempo de carga del sitio web.

3. Usa JavaScript externo

Si debe usar JavaScript, combine pequeños archivos JavaScript comunes en un solo archivo externo y luego (para navegadores más nuevos) puede comprimirlo. Esto reducirá el tiempo de carga del sitio web y no tendrá que escribir el script en cada página web; el navegador web tiene este archivo en su caché y no tendrá que descargarlo cada vez que se carga otra página web.

4. Para el diseño de sitios web basados ​​en tablas

Lee mas  The Internet Connection T3: la columna vertebral de su empresa

Evite tablas innecesarias anidadas y de página completa. Si inserta una tabla dentro de otra tabla, aumenta el tiempo de carga de la página web porque el navegador tiene que leer el contenido ubicado en la tabla más interna. Evite tablas anidadas innecesarias; en su lugar, divida su página en diferentes secciones como encabezado, cuerpo, pie de página, etc. de acuerdo con su diseño y use una tabla diferente para cada sección. Su navegador podrá cargar su página web un poco más rápido.

5. Utilice diseños de sitios web sin tablas

Cada vez que se abre un sitio web, el navegador primero debe escanear las tablas y luego cargar el contenido de la página, lo que aumenta el tiempo de carga del sitio web. Con las etiquetas CSS y DIV, puede evitar las tablas por completo y reducir sustancialmente el tiempo de carga del sitio web.

C. Otros factores que reducen el tiempo de carga del sitio web (eliminan la celulitis:-)

1. Alójese en un servidor de gama alta con conectividad rápida para reducir el tiempo de carga del sitio web.

2. Si tiene un sitio web basado en una base de datos, es más rápido y seguro colocar su contenido en un servidor y su base de datos en otro. Considere SSI para elementos de página comunes, AJAX para actualizaciones de página y archivos comprimidos Jar que se cargan más rápido en el archivo temporal.

3. Evite los archivos de música de fondo y, si es muy necesario usarlos, use formatos de archivos de música altamente comprimidos. Evite tener muchas cosas en su sitio web cargando desde otros sitios web y reduzca la cantidad de solicitudes HTTP.

4. Agregar una barra oblicua al final de un enlace como dominio.com/contacto le informa al servidor que se trata de una página de directorio y que no tiene que perder el tiempo averiguando qué tipo de archivo existe en esa dirección.

5. Usar menos redireccionamientos, Iframes, PhP y consultas a la base de datos también ayuda a reducir el tiempo de carga del sitio web.

Si ha seguido el programa de pérdida de peso del sitio web anterior y ha hecho que el diseño de su sitio web sea delgado y elegante, se emocionará cada vez que vea su rendimiento. Recuerde que los sitios web de calidad ofrecen mucho contenido nuevo. Cuando agregue nuevas páginas, no olvide aplicar los consejos anteriores para reducir el tiempo de carga del sitio web.

Leave a Comment