Personal Notes
This site was abandoned for two years before I decided to come back to Neocities, in that time I got out of school and entered university. Now I'm going into my fourth semester and I felt like it was appropiate to talk about how a lot of webmasters here don't follow best practices when making sites, which can lead to bad load times and worse user experience.
Of course I'm not trying to act superior or give the impression that I'm some kind of authority on this matter. This website is riddled with mistakes I made because of my own inexperience.
Everything that I'm going to talk about here is easily fixable by writting a couple lines into your html or css files.
tldr
Just get the google lighthouse extension and do what it tells you to do, it'll help make your site faster and easier to use.
Fonts
1) Not storing fonts locally
If you use any fonts, you should just download them to your computer and define them using the font-face rule in css, this will shorten load times quite a bit
Here is a generic example (this goes on your stylesheet). Make sure the [name] is the same as the one you were using before and you won't have to do any more changes.
@font-face {
font-display: swap;
font-family: [name];
font-style: normal;
font-weight: 400;
src: url('[path].woff2') format('woff2');
}
2) Not setting font-display to swap
As you can see on the example above, the parameter font-display is set to swap, do this so your site doesn't show invisible text before the font finishes loading
3) Fallback font and format
Finally, I'll tell you download your fonts in .woff2 format because it's the best for websites and set a fallback font. If you use fonts from google fonts, I recommend you use gwfh which let's you download the fonts and provides de CSS right away.
For example here I set a font for my body and a fallback font which will come into action if the first one fails at any point (putting another font after the coma, you can use multiple fallbacks and they'll be read from left to right).
body {
font-family: Jersey10, sans-serif;
}
Accesibility
1) Not adding alt text for images
This one's pretty simple, whenever you place an image via html, make sure to fill out the 'alt' parameter
<img src="[path]" alt="description of image">
2) Not having enough contrast
Your font and background colors should have enough contrast for users to be able to read without issues. You can use the WebAIM contrast checker to know if your colors are different enough.
3) Not using landmarks
Instead of using generic divs for everything, make sure you signal which part of your page is which with landmarks
They work just like divs and will help users with screen readers to navigate your site
<header> for banners and such at the top of the site
<nav> for navigation links
<main> for the main content
<aside> for side content
<footer> contact or copyright info at the bottom
<search> for search bars
Misc
1) Forzing JavaScript to load at the start
When using the script tag make sure to add the 'defer' atribute so your page loads fully before the script starts executing
<script src="[path].js" defer></script>
2) Not setting explicit dimensions
On CSS, make sure to define the width and height of your images so that the page reserves the space they'll use and prevent layout shifts.
#[image id] {
width: [number]px;
height: [number]px;
}
Giving up
If you give up you can never improve, so make sure you never give up. Keep updating your site, learn new things and try new styles.
Have a nice day, and thanks for reading. I don't have a comment section on this site right now, so if you have anything you want to tell me, leave a comment on my Neocities profile!