%nav%

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 use javaſcript because it's ſlow, uſe XHTML when available because 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;".

Adjust the Page for Devices With Small Width

This is what I use to adjust 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 just 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 browser 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.

Use 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 browser does not ſupport CSS 3 the change will ſimply be immediate instead.

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, astonishing. Who would do ſomething like that nowadays?

No Pixel Based Layout or Text

For ſizing paddings, margins, widths, heights, and font-sizes you ſhould uſe em or rem. For thoſe who do not know, em is just m ſpelled out because 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-size 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-size of the parent but on the default font-size. By not uſing anything but em/% or rem on font, the readers font-size 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

I know it ſeems tempting to put a character like “, ”, − (real minus), ▼, ▲, ➤ or ♡ into a content attribute of ::before or ::after but 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 doesn't even know about it. However browsers 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 use it in your CSS. Example: content: '\201CExample\201D';

No All Caps

I know it draws a lot of attention. All those 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. Alſo conſider whether ſtyling is really needed. Often you can get your point acroſs better through careful wording and phraſing.