Anuncio
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 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 continué diseñando sitios web basados en eso.
Finalmente me di por vencido diseño y desarrollo web ¿Quieres aprender diseño web? 7 canales de YouTube para comenzarYouTube tiene miles de videos y canales para principiantes en diseño web. Aquí vemos algunos de los mejores para comenzar. Lee mas 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ía en tu contenido de calidad y no necesitas 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 miles de páginas 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, es mucho más fácil hacerlo.
Aquí hay algunos consejos para recortar la grasa, sin ningún orden en particular.
1. Use 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.
Cen ascenso Style Sheets (CSS) apareció y realmente ayudó al problema de usar tablas para el diseño. Desafortunadamente, los fabricantes de navegadores parecen no poder 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 mostraba en Safari. No me hagas comenzar IE5 en una Mac. Todavía estoy en terapia por eso.
Utilice solo tablas para diseñar el contenido que debe estar en un formato tabular Tableizer: generar tabla HTML a partir de hoja de cálculo de Excel Lee mas - 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. Aprendiendo CSS Los 5 mejores sitios para aprender CSS en línea Lee mas hará 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". Aprende tu 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 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 PAGSllamadas 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 comentarios 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. Quizás haya un guión de reloj y un guión de calendario y quizás 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í, puede 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 "encogerá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 su tamaño con HTML no hace que el tamaño del archivo sea más pequeño. De hecho, puede llevar más tiempo cargar, 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.
Con más de 20 años de experiencia en TI, capacitación y oficios técnicos, es mi deseo compartir lo que he aprendido con cualquiera que esté dispuesto a aprender. Me esfuerzo por hacer el mejor trabajo posible de la mejor manera posible y con un poco de humor.