5 consejos HTML para crear un sitio web gratuito de carga rápida

Mi HsipText METROArkup Llas habilidades de lenguaje (HTML) están oxidadas con seguridad, pero quizás eso me califica para este artículo. De vuelta en el día cuando Amigos todavía estaba en la televisión y AOL enviaba montañas rusas y mini frisbees diariamente, estaba creando sitios web para cargar en módems de acceso telefónico. Con el paso del tiempo, tuve el descaro de pensar que todavía hay muchas personas con conexiones que no son de banda ancha (dial-up) y seguí diseñando sitios web basados ​​en eso..

Finalmente, dejé el diseño y desarrollo web ¿Quieres aprender diseño web? 7 canales de YouTube para comenzar ¿Desea aprender diseño web? 7 canales de YouTube para comenzar YouTube tiene miles de videos y canales para principiantes en diseño web. Aquí vemos algunos de los mejores para comenzar. cuando la calidad del contenido comenzó a dejarse de lado por la cantidad de contenido. Sitios flash, muchas imágenes, ventanas emergentes, ventanas subyacentes, controles deslizantes, etc. Confíe en su contenido de calidad y no necesita esta pelusa. Confíe en su contenido y puede hacer que su sitio web sea increíblemente rápido.

Con un sitio web alojado en un servicio gratuito, más rápido es seguro mejor. ¿Por qué? Porque 'gratis' tiende a atraer a muchas personas y el servidor tiene que distribuir su página más las páginas de miles de otras personas que no están optimizadas. Es como tratar de pasar un convoy de Kenworths tirando troncos con tus cerdos Jimmy haulin '. Pero si tienes un Porsche pequeño, eso es mucho más fácil de hacer.

Aquí hay algunos consejos para recortar la grasa, sin ningún orden en particular..

1. Use las tablas con moderación

Las tablas son un catch-22. Al principio, se usaban para diseñar el diseño y poner el contenido en formato de tabla. A medida que los diseños de diseño se volvieron más complejos, las tablas se hicieron más grandes y más anidadas, y eso siempre significa una disminución en el tiempo de carga.

dosubiendo Style Sheets (CSS) apareció y realmente ayudó al problema de usar tablas para el diseño. Desafortunadamente, los fabricantes de navegadores no pudieron entender la idea de los estándares, y aún no pueden. Lo que se veía genial en CSS en Firefox parecía el desayuno de un perro en IE y posiblemente ni siquiera se renderizaba en Safari. No me hagas empezar a usar IE5 en una Mac. Todavía estoy en terapia por eso.

Utilice solo tablas para diseñar el contenido que debe estar en formato tabular Tableizer: Generar tabla HTML a partir de hoja de cálculo Excel Tableizer: Generar tabla HTML a partir de hoja de cálculo Excel, como una lista de precios o estadísticas de hockey. Eso reduce el número de tablas y la profundidad de anidación, lo que significa tiempos de carga más rápidos. Aprender CSS Los 5 sitios principales para aprender CSS en línea Los 5 sitios principales para aprender CSS en línea harán una gran diferencia, si debe tener un diseño elegante.

2. Use HTML para crear color

Sí, soy canadiense, así que es color con una 'u' para mí. Sé que HTML está centrado en América, por lo que el atributo es 'color'. Aprenda sus códigos de color hexadecimales y úselos para animar el contenido en lugar de las imágenes.

Intente agregar el atributo de color a sus elementos HTML para darle vida. Esto funciona especialmente bien en tablas, o la etiqueta del cuerpo, como tal:

Si fuera un navegador, ¿sería más rápido al cargar 7 caracteres simples de #FF00FF ¿O una imagen de 10 × 10 píxeles del color fuschia unos miles de veces? Esa es una pregunta retórica, usted en la fila de atrás. Baja la mano.

3. Enlace a guiones / hojas de estilo

Si usa un cierto JavaScript (JS) o CSS repetidamente en todo su sitio web, piense en crear su propio archivo y llamarlo, en lugar de ponerlo en cada página. Dado que un navegador tiende a almacenar en caché un archivo y llamarlo primero antes de consultar con el servidor, su navegador ya tendrá ese script o CSS listo para usar. Eso significa menos HsipText Transfer PAGllamadas rotocol (HTTP) lo que significa una página de carga más rápida.

Cómo llamar a un JavaScript externo:

->

¿Por qué puse esas etiquetas de comentario alrededor de la llamada para JavaScript? Porque no todos los navegadores están configurados para leer scripts. Agregar las etiquetas de comentarios hace que los navegadores con secuencias de comandos deshabilitadas simplemente lo omitan, en lugar de dar mensajes de error molestos.

Cómo llamar a una hoja de estilo en cascada externa:

Es así de simple. El atributo href es donde establece la ubicación de su hoja de estilo. El resto de los atributos le dicen al navegador cuál es ese archivo, por lo que sabe qué hacer con él..

Algunos desarrolladores pueden usar el @importar Método para llamar a una hoja de estilo. En Internet Explorer, esto es como tener su etiqueta en la parte inferior de su archivo, haciendo que cargue toda la página y ENTONCES renderice los estilos en ella. No está bien.

4. Combina tus scripts de uso común en un archivo

Muchos desarrolladores web usarán los mismos scripts una y otra vez. Tal vez haya un guión de reloj y un guión de calendario y tal vez algún tipo de guión de efectos especiales que usarán en cada página. En lugar de tener 3 archivos separados, con 3 llamadas HTTP separadas, coloque los scripts en un archivo y llámelo una vez. Eso reduce sus llamadas HTTP en un 66% y también se almacena en caché. ¡Aceleras demonio, tú! Antes de volver a levantar la mano, sí, puedes hacer lo mismo con los archivos CSS.

5. No use HTML para cambiar el tamaño de sus imágenes

Si desea utilizar una imagen de 1000 × 1000 píxeles en su página web, pero desea que solo tenga 250 × 250 píxeles, cámbiela en un editor de imágenes. Algunas personas 'reducirán' la imagen usando HTML de la siguiente manera:

Si esa imagen de 1000 × 1000 píxeles tiene un tamaño de archivo de 2 MB, cambiar el tamaño con HTML no hace que el tamaño del archivo sea más pequeño. De hecho, puede llevar más tiempo cargarlo, porque ahora el navegador tiene que poner 10 libras de caca en una bolsa de 2 libras, por así decirlo. No es una tarea fácil..

Esperemos que estos consejos te ayuden. Dame un saludo en los comentarios si los usas o tienes otras ideas de optimización de HTML para compartir.