Notas Personales
Esta página fue abandonada por dos años hasta que decidí volver a Neocities, en ese tiempo terminé el colegio y entré a la universidad. Ahora voy por mi cuarto semestre y pensé que sería apropiado hablar de como muchos de los webmasters aquí no siguen las mejores prácticas al hacer sus páginas, lo que puede llevar a mayores tiempos de carga y peor experiencia del usuario.
Aclaro que no intento actuar superior o dar la impresión de que soy una autoridad en este tema. Si te pones a analizar esta página encontrarás muchos errores causados por mi inexperiencia.
Todo lo que se hablará aquí es fácil de arreglar añadiendo un par de líneas a tus archivos html o css.
Resumen
Simplemente descarga la extensión de google lighthouse y haz las cosas que dice, hará que tu página sea más veloz y fácil de usar.
Fuentes
1) No descargar tus fuentes
Si usas fuentes, deberías descargarlas a tu computador y definirlas usando la regla font-face en css, esto hará que tu sitio cargue bastante más rápido
Aquí hay un ejemplo genérico (esto va en tu stylesheet). Asegúrate que [nombre] sea el mismo que ya estabas usando y no tendrás que hacer más cambios.
@font-face {
font-display: swap;
font-family: [nombre];
font-style: normal;
font-weight: 400;
src: url('[path].woff2') format('woff2');
}
2) No poner font-display en swap
Como puedes ver en el ejemplo de arriba, el parámetro font-display está en swap, hacer esto evita que haya texto invisible en tu página mientras carga
3) Fuente fallback y formato
Finalmente, te diré que descargues tus fuentes en formato .woff2 y selecciones fuentes fallback. Si tus fuentes son de google fonts te recomiendo que uses gwfh que te permite descargar fuentes en .woff2 y te dá el CSS necesario al instante.
FPor ejemplo aquí defino una fuente para mi body y una fuente fallback que se va a usar si la primera falla por algún motivo (es la fuente despues de la coma, puedes colocar múltiples fallbacks y se usarán en orden de izquierda a derecha)
body {
font-family: Jersey10, sans-serif;
}
Accesibilidad
1) No añadir texto alternativo
Este es bastante simple, cuando coloques una imagen en html, asegúrate de llenar el atributo 'alt'
<img src="[path]" alt="descripción de imagen">
2) Falta de contraste
Tus fuentes y fondos deberían tener sufieciente contraste para que se pueda leer sin problemas, puedes usar WebAIM contrast checker para revisar si tus colores son lo suficientemente distintos.
3) No usar landmarks
No deberías usar divs genéricos para todo, asegúrate de señalar que parte del contenido es cual con landmarks
<header> para banners y similares en la parte superior
<nav> para links de navegación
<main> para links de navegación
<aside> para contenido adicional
<footer> información de contacto o copyright
<search> barras de búsqueda
Misceláneos
1) Forzar carga de JS al inicio
Al seleccionar un script, usa el atributo 'defer' para que la página pueda cargar por completo antes que javascript se ejecute.
<script src="[path].js" defer></script>
2) No usar altura y ancho explícitos
En CSS asegúrate de poner el ancho y altura de tus imagenes, esto hace que la página reserve el espacio que van a ocupar mientras está cargando.
#[id de imagen] {
width: [número]px;
height: [número]px;
}
Rendirse
Si te rindes, nunca puedes mejorar, asegúrate de no hacerlo, sigue actualizando tu página y probando cosas nuevas.
Pásalo bien y gracias por leer. Aún no tengo una sección de comentarios o algo similar pero si hay algo que quieras decirme, déjame un comentario en mi perfil de Neocities!