\documentclass[a4paper, 11pt]{article}
\renewcommand{\familydefault}{\sfdefault}
\usepackage{a4wide}
\usepackage[utf8]{inputenc}
\usepackage[ngerman]{babel}
\usepackage{color}
\usepackage{graphicx}
\usepackage{setspace}
\usepackage{ulem}
\usepackage{listings}
\usepackage{float}
\usepackage[rflt]{floatflt}
\usepackage{tabularx}
\setlength{\parindent}{0pt}
\title{Website Optimierung nicht nur für die Suchmaschine}
\usepackage[
pdftitle={Website Optimierung nicht nur für die Suchmaschine}
pdfsubject={}
pdfauthor={Udo Schmal}
pdfkeywords={Connection, DNS Lookup, Socket, SSL Negotiation, Request, Response, Receive, Render}
]{hyperref}
\definecolor{darkblue}{rgb}{0,0,.5}
\hypersetup{pdftex=true, colorlinks=true, breaklinks=true, linkcolor=darkblue, menucolor=darkblue, pagecolor=darkblue, urlcolor=darkblue}
\begin{document}Website Optimierung nicht nur für die Suchmaschine
\singlespacing
{\Large \textbf{\label{sec:headline}Page Speed}}

\singlespacing
{\LARGE \textbf{\label{sec:title}Website Optimierung nicht nur für die Suchmaschine}}

Es gibt zahlreiche SEO-Tools, sowohl freie als auch kostenpflichtige aber es gibt nicht das eine allumfassende Tool und so ist man gezwungen sich seine Informationen aus einer Vielzahl von Tools zusammen zu suchen.

\begin{itemize}
\item um eine Überblick zur Geschwindigkeitsoptimierung bekommen \href{https://pagespeed.web.dev/}{Google PageSpeed Insights}\newline
Informationen zur Antwortzeit des Servers, Bilder Optimierung, Browser Caching, Komprimierung, Weiterleitung, JavaScript,CSS und HTML Reduzierung aber auch Priorisierung sichtbarer Bereiche und Rendering blockierender JavaScripts und CSS-Resourcen
\item für einen mobilen Geschwingigkeitstest \href{https://pagespeed.web.dev/?hl=de}{Google Test my Site / Test your mobile speed}\newline
hierbei gibt Google einen warscheinlichen Wert an wie hoch der Absprung von Besuchern ist bei langsamen Websites
\item zur Suchmachinenoptimierung \href{https://search.google.com/search-console/about}{Search Console} / \href{https://www.google.com/webmasters/tools/home?hl=de}{Google Webmaster Tools}\newline
hier findet man alle Informationen die in Zusammenhang mit Googles Suchmaschine stehen, es ist allerdings auch ein Werkzeug zur Überprüfung der für die Suchmaschine wichtigen Informationsquellen und zur Optimierung z.B. in dem man eine XML Sitemap einreicht, Keywords optimiert, Strukturierte Daten Überprüft …
\item zur Codeüberprüfung \href{https://validator.w3.org/}{W3C Markup Validation Service}\newline
Informationen zur Codequalität, hierzu stehen auch Browser Plugins/Extensions zur Verfügung
\item zur Kontrolle der Ladezeiten \href{https://www.webpagetest.org/}{WebPagetest}\newline
Ladezeiten, Abhängikeiten und Ursachenermittlung wodurch Verzögerungen beim Laden einer Seite eintrten, hier gibt der \&quot;Waterfall View\&quot; noch mehr her als in den Entwickler Werkzeugen der Browser und wird durch einen \&quot;Connection View\&quot; ergänzt
\item zur Bilddaten Überprüfung \href{https://webspeedtest.cloudinary.com/}{Website Speed Test Image Analysis Tool}\newline
zeigt Altanativen auf und bietet auch optimierte Bilder zum Download an
\end{itemize}
\label{sec:connection}
\singlespacing
{\large \textbf{Zeiten die bei einem Webseitenaufruf zustande kommen}}

\begin{itemize}
\item \textbf{Blocking} (Blockiert)\newline
tritt immer dann auf wenn beim Client Resourcen fehlen z.B. wenn alle Socket-Verbindungen zu einem Server belegt sind 
\item \textbf{DNS }\textbf{Lookup} (Auflösen des Domain-Namen in eine IP-Adresse)\newline
fällt in der Regel nur beim ersten Verbindungsaufbau zu einer Domain ins Gewicht, da anschließend die Adresse zur Domain bekannt ist 
\item \textbf{Initial Socket Connect} (Verbindungsaufbau)\newline
fällt immer dann ins Gewicht wenn die Verbindung zum Server von den Kapazitäten her knapp wird bzw. der Server unter last steht und vielleicht sogar blockiert ist
\item \textbf{SSL / TLS Negotiation} (Abstimmung der Verschlüsselung zwischen Client und Server)\newline
 tritt nur bei verschlüsselten (HTTPS) Verbindungen auf, ist aufwändiger bei mehreren Zertifikaten auf einer IP und bei älteren Browsern da der Server in der Regel versucht die bestmögliche Verschlüsselung mit dem Client zu erreichen
\item \textbf{Send Request} (Senden der Anfrage)\newline
fällt selten ins Gewicht, da die zu übertragenden Datenmengen meistens sehr gering sind, außer beim File-Upload
\item \textbf{Wait for Response / Create Response} (Warten auf der Client-Seite, Entschlüsseln der Anfrage und Erstellen der Antwort auf der Serverseite)\newline
hier kommt es sehr auf die Server Hardware, der Leistungsfähigkeit des Webservices und dessen Konfiguration und bei dynamischen Inhalten auch auf die Programmierung der Ergebnis erzeugenden Routinen an, in der Regel fällt hierbei die meiste Zeit an 
\item \textbf{Receive Response / Send Response} (Übermittlung der Antwort)\newline
diese Zeit ist abhängig von der Größe der zu übertragenen Datenmenge und Optimierung der Datenübertragung, durch GZip, deflate und Brotli Komprimierung aber auch durch minifizieren von Daten, gerade bei Textdateien besteht hier ein riesiges Potential (gerade überflüssige Leerzeichen in HTML, Javascript und Stylesheets)
\item \textbf{Render Response} (Abbilden der Antwort)\newline
hier kommt es auf die Client Hardware, der Leistungsfähigkeit des Browsers aber auch auf die anzuzeigenden Daten an, je nach Komplexität des Ergebnisses, der Anzahl der nach zu ladenden Daten, der Stelle an der sie eingebunden werden und welche Operationen durchgeführt werden kann hier ein erheblicher Zeitaufwand entstehen
\end{itemize}

Wird eine Seite im Internet aufgerufen besteht sie zumeist aus vielen Elementen, meistens aus einem HTML Dokument für den Seitenaufbau, ein oder mehrere StyleSheets zur Gestaltung der Seite, ein oder mehrere JavaScripts für die Funktionalität der Seite, Schriften, Bilder, …

Des weiteren ist also folgendes zu beachten:

\begin{enumerate}
\item alle Bestandteile außer das Warten auf eine Antwort und das Rendern des Ergebnisses sind natürlich auch abhängig von der Verbindungsqualität
\item in der Regel wird von einem Client nur eine beschränkte Anzahl von gleichzeitigen Verbindungen zu einem Server aufgebaut, bei meinen Tests waren es nie mehr als 6.
\item wenn eine Anfrage zu einer längeren Wartezeit führt, ist diese Verbindung blockiert und kann nicht für andere anstehende Aufgaben genutzt werden (bis HTTP 1.1, bei HTTP 2 trifft das nicht mehr zu)
\item je mehr Daten zusammen gefasst werden können, um so weniger Requestzyklen (Send Request, Wait for Response, Receive Response) sind erforderlich, Send Request und Wait for Response entfällt in der Regel von allen angefügten Anfragen
\item das Rendern eines Ergebnisses kommt bei Einbindung eines JavaScript oder StyleSheets zum Stillstand (außer es wird asynchron angefordert) bis diese Daten nachgeladen wurden
\item nachgeladene in den Seiteninhalt eingebaute Daten führen zu einen erneuten Rendern von Teilbereichen, also ist darauf zu achten das für diese Bereiche der benötigte Platz freigehalten wird damit möglichst wenig Arbeit entsteht (also z.B. durch Breiten und  Höhenangaben bei Image-Tags)
\end{enumerate}
\end{document}