How to make a faſt webſite

Since this ſeems to be a popular topic here on Neocities. I thought I'd make a page on it as well.

The Uſual

Don't uſe javaſcript becauſe it's ſlow, uſe XHTML when available becauſe it's faſter.

Structure Your Page Well

In general you ſhould always have it look like this:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<link href="/style.css" rel="stylesheet" type="text/css" media="all"/>
	</head>
<body>
	<header>
	Optional header
	</header>
	
	<nav>
	Navigation here
	</nav>
	
	<main>
	<h1>Title</h1>
	<p>Some boring text.</p>
	</main>
	
	<footer>
	Optional footer
	</footer>
</body>
</html>

You ſtructure your page with by neſting <div>s with "display: flex;" and "flex-direction" or uſing "display: grid;" on main. You can ſtill have your navigation ſcroll with the ſcreen in a ſtatic layout (which you ſhould be uſing) by uſing "display: sticky; top: 0px;" inſtead of "display: fixed;".

Adjuſt the Page for Devices With Small Width

This is what I uſe to adjuſt my layout.

@media only screen and (max-width: 50em) {
	body {
		display: initial;
	}
	#sitenav {
		height: initial;
		position: static;
	}
}

Keep Your DOM Flat

Inſtead of neſting things, always look whether you can achieve the ſame with leſs tags. Deep DOMs are a horror for browſers. That's why CSS was invented to begin with!

Remove Unuſed CSS

The biggeſt hit on CSS performance is unuſed CSS. So remove it and do not uſe any CSS frameworks. Learn CSS yourſelf.

Put CSS in an External File but Not All of It

Some CSS is uſed acroſs all pages and caſhing it ſaves the browſer ſome time but if you have a large ſite formating of individual pages for all pages will hurt your performance. Why? Becauſe it is unuſed CSS! If you want to you can ſtill put your CSS in an external file juſt dedicated to that one page.

No Javaſcript Frameworks

If you do uſe Javaſcript, do not uſe frameworks. The time where every browſer had different functions is over ſince a fucking decade. All you get is a giant ball of garbage code that does nothing more than wrap functions that already exiſt in a ſtandardiſed form.

Uſe Preview Images

Large images will take time and bandwith to load and having them all on the ſame page is a horror. Your native imageviewers and file managers on your computer do that too.

Don't Animate With Javaſcript or CSS Keyframes

Uſing CSS tranſitions you can often achieve the ſame in a backwards compatible way. If the browſer does not ſupport CSS 3 the change will ſimply be immediate inſtead.

Set Cookies Through HTTP

You probably knew that you can ſet cookies through Javaſcript but did you know you can do the ſame with HTTP itſelf? Yes, aſtoniſhing. Who would do ſomething like that nowadays?

No Pixel Baſed Layout or Text

For ſizing paddings, margins, widths, heights, and font-ſizes you ſhould uſe em or rem. For thoſe who do not know, em is juſt m ſpelled out becauſe it is the width of an M. If you ſet width, always make ſure to alſo ſet max-width to 100% to avoid the horizontal ſcroll bar. Em depends on the font-ſize of the element being ſized and is the ſame as a percentage when applied to font-ſize. (font-size:1em=font-size:100%) Rem on the other hand inherits from the root element, the html tag, and is thus not dependant on the font-ſize of the parent but on the default font-ſize. By not uſing anything but em/% or rem on font, the readers font-ſize choice in his browſer ſettings will be reſpected. And who knows better than the reader what DPI and eyeſight he has? Not even the OS knows.

Do Not Uſe UTF-8 in CSS

While it ſeems tempting to put a character like “, ”, − (real minus), ▼, ▲, ➤ or ♡ into a content attribute of ::before or ::after, do not do that! I know you can ſpecify the encoding of a CSS file but that is actually ſuppoſed to be the ſame as that of the document and Internet Explorer does not even know about it. However browſers tend to fuck up. If I reload the page 20 times in Chromium , ſome of theſe times it will ſhow multiple ASCII characters inſtead. The beſt ſolution is to ſimply uſe backſlaſh encoding for the characters in queſtion. For that I recommend that you paſte the character into Unicode-Table.com and uſe it in your CSS. Example: content: '\201CExample\201D';

Avoid CSS-Float

It is in every CSS tutorial, taught right at the ſtart. What they always forget to mention is that it does not come without its problems. There is no way to prevent ſentences from being ſquaſhed by the image at certain monitor widths, ſo that only about one word fits in each line making it unpleaſing to read. And you ſhould never uſe float for layout! Uſe flexbox or grid inſtead.

No All Caps

I know it draws a lot of attention. All thoſe ad revenue videos on Youtube have "ALL CAPS CLICK ME" titles. However that is becauſe your brain takes ſo long to read it. You ſhould make it <b>old, <u>nderlined, <i>talic, ſpaced or <big>ger inſtead. Furthermore conſider whether ſtyling is really needed. Often you can get your point acroſs better through careful wording and phraſing.