Wie man eine ſchnelle Webſite erſtellt

Da dies ein beliebtes Thema hier auf Neocities zu ſein ſcheint, dachte ich, daß ich auch eine Seite darüber machen ſollte.

Das Übliche

Benutze kein Javaſcript, weil es langſam iſt, benutze XHTML, wenn möglich, da es ſich ſchneller und leichter parſen läßt.

Gliedere deine Seite ordentlich

Grundſätzlich ſollte ſie immer ſo ausſehen:

<!DOCTYPE html>
<html lang="de">
	<head>
		<meta charset="UTF-8">
		<title>Titel</title>
		<link href="/style.css" rel="stylesheet" type="text/css" media="all"/>
	</head>
<body>
	<header>
	Freiwillige Kopfzeile
	</header>
	
	<nav>
	Navigation hier
	</nav>
	
	<main>
	<h1>Überſchrift</h1>
	<p>Ein langweiliger Text.</p>
	</main>
	
	<footer>
	Freiwillige Fußzeile
	</footer>
</body>
</html>

Du kannſt die Seite gliedern indem du <div>-Elemente verſchachtelſt und mit "display: flex;" und "flex-direction" verſiehſt oder indem du "display: grid;" auf on <main> anwendeſt. Du kannſt deine Navigationsleiſte auch in einer ſtatiſchen Anordnung mitſcrollen laſſen indem du „display: sticky; top: 0px;“ ſtatt „display: fixed;“ verwendeſt.

Paſſe die Seite für kleine Bildſchirmbreiten an

Das iſt was ich für meine Anordnung benutze:

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

Halte deinen DOM flach

Anſtatt Dinge zu verſchachteln, ſchaue immer, ob du das Selbe mit weniger Elementen erreichen kannſt. Tiefe DOMs ſind ein Horror für Browſer. Aus eben dieſem Grund wurde CSS erfunden!

Entferne ungenutztes CSS

Der größte Einfluß auf CSS-Geſchwindigkeit iſt ungenutztes CSS. Also entferne es und benutze ja keine CSS-Frameworks. Lerne CSS ſelber zu ſchreiben.

Halte dein CSS extern

Manches CSS wird über alle Seiten hinweg benutzt und es zu Cachen ſpart Zeit. Das bezieht ſich jedoch nicht auf CSS das nur auf einer Seite benutzt wird. Denn dieſes auf allen Seiten zu verwenden, fuhrt nur wieder zu ungenutztem CSS! Wenn du willſt kannſt du dein CSS ſelbſtverſtändlich immer noch in eine externe Datei, die nur auf dieſer Seite eingebunden iſt, ſpeichern.

Keine Javaſcript-Frameworks

Wenn du Javaſcript benutzt, dann benutze keine Frameworks. Die Zeit in der Browſer verſchiedene Funktionen hatten ſind längſt vorbei. Alles was du mit einem Framework bekommſt iſt ein Haufen Müll, der nichts weiter tut, als Funktionen, die bereits in ſtandardiſierter Form exiſtieren, einzuwickeln.

Nutze Vorſchaubilder

Große Bilder brauchen Zeit und Bandbreite und ſie alle auf einmal auf der ſelben Seite zu laden iſt ein Grauen. Die Dateimanager und Bildbetrachtungsprogramme auf deinem Rechner tun das ebenfalls.

Animiere nicht mit Javaſcript oder CSS-Keyframes

Mit CSS-Transitions kannſt du meiſt das Selbe auf einem abwärtskompatiblen Weg erreichen. Sollte der Browſer CSS 3 nicht unterſtützen, iſt die Änderung ſtattdeſſen unmittelbar.

Setze Cookies mit HTTP

Du wußtest wahrſcheinlich ſchon, daß du mit Javaſcript Cookies ſetzen kannſt, aber weißt du auch, daß man das auch mit HTTP ſelbſt tun kann?

Keine pixelbaſierten Anordnungen oder Texte

Um die Größen von Innen- und Außenabſtänden, Breiten, Höhen, und Schriftgrößen feſtzulegen, ſollte man em oder rem benutzen. Für die, die es noch nicht wiſſen: em iſt nur m ausgeſprochen, weil es die Breite eines M iſt. Wenn du die Breite ſetzt, ſtelle immer ſicher auch max-width auf 100% zu ſetzen, um horizontale Bildlaufleiſten zu vermeiden. Em hängt von der Schriftgröße des Elements ab und verhält ſich wie Prozent, wenn es als Schriftgröße benutzt wird. (font-size:1em=font-size:100%) Rem auf der anderen Seite erbt von dem Wurzelelement, dem html-Element, und iſt deshalb nicht von der Schriftgröße des Elternelements abhängig, ſondern der Standardſchriftgröße. Indem man nichts anderes als em/% oder rem auf Schriftgrößen anwendet, wird die Schriftgrößeneinſtellung des Leſers geachtet. Und wer ſoll beſſer wiſſen, welche DPI und Sehkraft der Leſer hat, als er ſelbſt? Nicht einmal das Betriebsſyſtem weiß das.

Kein UTF-8 in CSS

Es mag zwar verlockend erſcheinen Zeichen wie “, ”, − (real minus), ▼, ▲, ➤ oder ♡ in ein content-Attribut eines ::before oder ::after zu ſetzen, aber tu es nicht! Man kann zwar die Kodierung in CSS angeben, aber ſie ſollte eigentlich die Selbe wie die des Dokoments ſein und Internet Explorer weiß nicht mal davon. Allerdings ſcheinen ſich Browſer nicht daran zu halten. Wenn ich die Seite in Chromium 20 mal neulade, werden manchmal dann doch mehrere ASCII-Zeichen angezeigt. Die beſte Löſung iſt einfach die Rückwärtsſtrichnotation zu verwenden. Dazu empfehle ich das Zeichen einfach auf Unicode-Table.com einzufügen und es in deinem CSS zu verwenden. z.B.: content: '\201EBeiſpiel\201C';

Vermeide CSS-Float

In jedem CSS-Anleitung, gleich am Anfang erklärt. Was immer vergeſſen wird zu erwähnen, ist daß es nicht problemlos iſt. Es gibt keine Möglichkeit zu verhindern, daß Sätze von einem Bild am Bildſchirmrand zerquetſcht werden, ſo das z.B. nur ein Wort in jede Zeile paßt, was ſehr unbequem zu leſen iſt. Des Weiteren ſollte man float nie für die Anordnung der Seitenelemente hernemen, ſondern flexbox oder grid.

Schreibe nicht in Großbuchſtaben

Ich weiß, daß es viel Aufmerkſamkeit erregt. All dieſe werbefinanzierten Videos auf YouTube mit „GOSSBUCHSTABEN KLICK MICH AN“-Titeln. Das liegt jedoch daran, das du länger brauchſt, um die Worte zu verſtehen. Du kannſt den Text ſtattdeſſen auch <b> fett, <u> unterſtrichen, <i> ſchräg, geſperrt oder <big> größer machen. Überlege auch, ob Formatierung wirklich nötig iſt. Oft kannſt du deinen Punkt beſſer vermitteln, indem du auf Wortwahl und Ausdrucksweiſe achteſt.

Sprachkodes

Die Sprachkodes für das lang-Attribut kannſt du hier nachſchlagen. Dabei kann man unterſchiedlich ſpezifiſch werden, wenn dies gewünſcht oder erforderlich iſt. Ich benutze hier „de-latf“, was für „Deutſch in Fraktur“ ſteht, aber ich könnte auch „de-Latf-DE-1901“ verwenden. Das bedeutet dann „Deutſch in Fraktur in Deutſchland mit den Rechtſchreibregeln von 1901“. Groß- und Kleinſchreibung darf hierbei vernachläſſigt werden. Lediglich, die Reihenfolge muß beachtet werden. Normalerweiſe reicht der Sprachkode aus, es ſei denn du benutzt ein anderes Schriftſyſtem oder möchtest Stellen in Dialekt oder Schreibvariante anders formatieren.

HTML-Aufklappmenüs

Microsoft verwendet auf ſeinen „Download Center“-Seiten immer noch Javaſcript-Aufklappmenüs. Dabei gibt es eine HTML-Entſprechung, die in allen Browſern funktioniert. Deshalb wollte ich das hier erwähnt haben.