I write my own HTML for my website. I like the task and it's enjoyable to make a nice and simple website all on my own. The minimalism makes it load very fast and look simple but still nice.
During this time I learned a lot about making it better, faster and more "valid" in terms of html. This page exists to share this information with everyone who decides to stumble upon it.
Side Note: Writing my own HTML also makes the website not only valid but also very fast. In google lighthouse tests my site gets mostly 100/100 score.
It's good to check your webpages with the w3c validator to see if they are in a valid format.
You can use the https://validator.w3.org/ for that.
Hint: A <p> tag can only contain inline text elements and neither pictures nor divs. Watch out for that if you write your own pages.
Also don't forget about the doctype and lang="en" at the top.
Another good thing to check your website with is google lighthouse. Go to https://developers.google.com/speed/pagespeed/insights/ and enter your website. It will tell you all things you could do better and give you a score based on speed, validity and optimization.
You should always optimize and compress your images. The bigger the image the more bandwidth is used for every person that accesses your webpage.
You should have the image not bigger than what you are displaying it as. Putting a full HD image as a 64x64 profile picture on your webpage is bad, as it's wasting a lot of bandwidth for information that the user can't see.
In short: Don't make them larger than they have to be.
Resizing can be done with any tool you want.
Optimization and compression can be done with these 2 simple linux commandline tools (for png and jpg each their own):
# JPG (lossless): jpegoptim <filename> # for all images in folder: jpegoptim * # PNGs (lossy, but not noticable) pngquant -s 1 -f <filename> # for all images in folder: pngquant -s 1 -f --ext .png *.pngWith this the PNGs went from 7.7MB down to 2.6MB (24 files in total) without any noticable difference! The jpg files were also compressed around 50%, which means 50% less bandwidth for your server! (in this context)
First and foremost: Do you really need an extra mobile view for your webpage?
If you do your own website minimalistic enough you don't need a mobile view, as the desktop version will smoothly transition into a readable mobile one.
And if your desktop website doesn't fit into mobile: Do you really need it to be? If you have a nice gallery-like design you could make it desktop only, there is no shame in having no mobile version, you could always add one later if you really want to.
You already compressed your images, but you could also compress your text-based files too.
On NGINX you can enable compression for html and css files, which saves lots of bandwidth in the long run. It doesn't take up too much CPU and is quite fast. It is recommended to do compression on NGINX if you use a backend like NodeJS or similar, as NGINX is built for speed and doing double the compression is just wasting CPU time.
To enable compression in NGINX: Simply add the gzip on; in your server-block.
Hint: gzip only compresses HTML files by default.
Examples compressions: 22.7KB HTML to 9.4KB
(You can see the compression if you press F12 and look at the "transfered" and "size" tabs of the Networkanalysis tab.)
You could also enable NGINX caching and set the expiry time for images and css files for the client to a month or longer, so that they don't request your resources too often.
If you really want to go all out you could also minify your CSS and JS files to save even more bandwidth, but this could make your files unreadable for normal humans (if you need them to be readable).
You could also disable log entries for image, js and css files, as writing to log is a serial and thus slow process.
A list of other things you should do before putting your website online: