What does pagespeed mean?
Pagespeed is the loading time of a website. The loading speed of a page is made up of two parts:
- The Wait Time To First Byte or Time To First Byte (TTFB) = response time of the server.
- Transfer Time = download duration of the HTML itself.
What influences the loading time?
When it comes to the pagespeed of a website, a distinction is made between several factors that influence the loading time. The first decisive factor is the size of the website and the associated amount of data that needs to be transferred. The latency of the web server is the second factor influencing page speed and refers to the time that elapses due to delays without data being transferred. Correct caching also plays a role in the calculation of page speed.
Why is page speed important?
Long website loading times result in a negative user experience. If a website takes too long to load, the majority of visitors will bounce early and navigate to the next website. A slow page speed therefore increases the bounce rate, which in turn worsens the Google ranking.
Website loading times as a ranking factor for SEO on Google?
Since June 2021, page speed has been considered part of Google Core Web Vitals and is therefore just as relevant as other ranking factors such as save browsing or unobtrusive interstitials such as pop-ups etc.. A website with an appropriate loading time supports search engine optimization.
How can you measure web core vitals?
The pagespeed of a website is one of the core web vitals. A Google service page can be used to generate a report on all web core vitals of the website.
When is a website "fast"?
The Google Search Console differentiates between fast and slow websites. Downloading a page that takes more than 3 seconds is classified as too slow. A page speed between 1.8 and 3 seconds is considered average. On average, mobile users leave after just 2 seconds of loading speed. A score of 85 in the pagespeed tools is therefore considered sufficient according to Google.
This article explains why it makes sense to optimize the loading time of your website and how you need to proceed to increase the speed of your website.
How is pagespeed measured?
First Contentful Paint (FCP)
Beim FCP handelt es sich um den Messwert der Ladegeschwindigkeit einer Website. Dabei wird gemessen, wie lange der Browser braucht, bis das erste Element (DOM Content) einer Website angezeigt wird, nachdem ein Nutzer auf die Website klickt. Bilder sowie nicht weiße <canvas> Elemente werden dabei ebenfalls miteinbezogen.
Speed Index
Der Geschwindigkeitsindex (=Speed Index) misst wie schnell der Inhalt beim Laden der Seite visuell dargestellt wird. Der Geschwindigkeitsindex ist ein Vergleich zwischen dem Geschwindigkeitsindex Ihrer Seite und den Geschwindigkeitsindizes echter Websites, basierend auf Daten aus dem HTTP-Archiv.
Time to Interactive (TTI)
Die “Zeit bis zur Interaktivität” misst wie lange es dauert, bis die Ressourcen, (wie z.B Navigationselemente, Buttons, Javascript) die für eine zuverlässig funktionierende und interaktive Seite notwendig sind, vollständig geladen wurden.
Eine Seite gilt als vollständig interaktiv, wenn:
- Die Seite nützliche Inhalte anzeigt, die mit dem First Contentful Paint gemessen werden.
- Event-Handler für die meisten sichtbaren Seitenelemente registriert sind.
- Die Seite auf Benutzerinteraktionen innerhalb von 50 Millisekunden reagiert.
Total Blocking Time (TBT)
= zu Deutsch “gesamte Blockierungszeit”: Misst die Gesamtzeit, in der eine Seite nicht auf Benutzereingaben wie Mausklicks, Bildschirmberührungen oder Tastatureingaben reagieren kann. Die TBT bemisst sich aus der Summe an Zeit die zwischen dem “First Contentful Paint (FCP)” und der “Time to Interactive (TTI)” vergangen ist. Jede Aufgabe, die länger als 50 ms ausgeführt wird, ist eine lange Aufgabe und wird der gesamten Blockierungszeit hinzugefügt.
Largest Contentful Paint (LCP)
Die Metrik LCP, zu Deutsch “gößtes inhaltsreiches Bild”, gibt die Renderzeit des größten im Viewport sichtbaren Bildes oder Textblocks an, relativ zum Zeitpunkt des ersten Ladevorgangs der Seite.
Cumulative Layout Shift (CLS)
Unter der kumulativen Layoutverschiebung versteht man die Bewertung aller unerwarteten Sprünge im Aufbau des Layouts einer zu ladenden Seite. Eine Layoutverschiebung tritt immer dann auf, wenn ein sichtbares Element seine Position von einem gerenderten Frame zum nächsten ändert.
Von einem Ausschlag an Layoutverschiebungen wird gesprochen, wenn eine oder mehrere einzelne Verschiebungen in kurzer Zeitspanne nacheinander auftreten. (d.h: Weniger als eine Sekunde zwischen jeder Verschiebung)
What options are there?
TTFB Optimierung
Time to First Byte (oder TTFB) ist die Dauer, zwischen der Anfrage der Website durch einen Benutzer, und dem ersten durch den Browser geladenen Bytes der Website.
Inwiefern kann dieser Zeitraum verkürzt werden?
Aktivieren des Full Page Cache
- HTML rendern bevor die erste Anfrage gesendet wird.
- Jeder anonyme Benutzer erhält eine statische HTML.
- Cookie-/Pfadbasierte Ausnahmen können ebenfalls gecacht werden.
- PHP muss hier nicht verwendet werden.
Opcode, Objekt in-Memory Cache + NVM
- Verwendung von SSDs (NVMs) anstelle von HDDs (Serverseitig).
- Vorhandener, vorverarbeiteter PHP-Code wird gespeichert.
- Häufig genutzte Objekte werden permanent im RAM gespeichert.
- Häufig genutzte Datenbank Abfragen werden im RAM gehalten.
Vorteile der Verwendung eines CDN
- Hosting in globalen Rechenzentren = nahe beim Kunden/Benutzer.
- Verwendung von Argo Routing (Cloudflare).
- Vollständig gerenderte Seiten werden vom CDN gespeichert.
- On-The-Fly Inhalts Optimierung von Inhalten.
Render Optimierung
- Optimierung des Codes durch Minifizierung
- Häufige Redirects vermeiden
- Bilder nur in ihrer benötigten Größe laden
- “Statusaktualisierung" durch progressives Rendering.
- Nicht-blockierendes CSS durch Verwendung von Inline-CSS im <head> oder dem Media-Attribut → Kritisches CSS direkt im <head>-Abschnitt.
- Reduzierung der Anwendungen von Drittanbietern.
- Rendering blockierende, externe Javascript Skripte durch async oder defer ersetzen.
Webfont Optimierung
1. Erste Schritte der Webfront Optimierung durch:
- Schriften nur in der Sprache laden die auf der Website verwendet wird
- Keine unbenutzten Gewichtungen/Schriftschnitte mitladen.
- Nur die Glyphen im CSS einbetten die auch benutzt werden.
2. Die Benutzung von Skeleton Screens
Skelett-Bildschirme (als Splash-Screens), die anzeigen, dass ein Bildschirm geladen wird, werden im Vergleich zu einem leeren Bildschirm (unsere Kontrolle) und einem Spinner als kürzere Ladezeit wahrgenommen - aber nicht viel kürzer.
Skelett Bildschirme sollten das allmähliche Laden von Inhalten nicht blockieren (echte Inhalte sollten Skelett Objekte sofort ersetzen, wenn die Daten verfügbar sind).
3. Intelligentes Vorladen
- AMP-Vorladen
- Verwendung eines universellen Hover-Preloaders
Conclusion
Optimizing website loading speed has many advantages. Around 50% of all websites are now accessed via mobile devices, and a good pagespeed index is particularly important here. In addition to the user experience, a fast website is rated favorably in the Google ranking. There are various parameters that can influence the page load time, such as the methods described in this article.
You can find more information about pagespeed here:
Book tips
