Markus: Workshop

Feed

Implements

Research

Seek Assistance

Google Analytics

Page Load Time ist die Zeit über alle Geräte, Länder etc. Server Resources machen die Page langsamer. Optimierung CSS IMG Fonts, etc. machen die Website faster. Langsamer DNS macht auch eine langsame Loadtime.

Site Speed Page ist eine gute Analyse Seite um zu sehen welche Seite am langsamsten ist.

Bounce Rate sollte sehr konstant sein.

Mit einem Twitter embedded wird die Load Zeit sehr langsam. IFrame in eine Seite kann die Seite auch sehr langsam machen. 3Party include kann eine Seite auch sehr langsam machen.

Mobile ist immer langsamer als eine Desktop connection.

In Destribiution Tab: Die meisten Ladezeiten sind schneller als eine sek. Map overlay zeigt in welchen Länder die Seite langsam ist.

Can i use Website

Brotli ist ein Datenkompressions-Algorithmus auf Basis von LZ77 und Huffman-Kodierung,

Console Dev Tools

Network

Die obere Zahl ist die Downloaded grösse, die untere Zahl ist die gespeicherte Grösse

Time

obere Zahl wie lange geht es für alles zum Downloaden. Die untere Zahl ist reverse für Network.

Right Klick (Priority)

Zeigt eine neue Spalte welche High or Low zeigt.

CSS hat eine Highest Priority wenn css optimiert ist. Script early hat eine High Priority Script late hat eine Medium Priority Script async hat eine Low Priority Font hat eine Highest Priority Font preload hat eine High Priority Imports and Images haben eine High Priority Media and SVG haben Low Priority XHR hat eine Hight Priority Wenn ein CSS im Body Tag ist, wird es wie ein Script mit Hight Priority behandelt und nicht mit Highest.

Dev Tool Experiments

chromstatus.com Liste vieler Features

Filter:

larger-then:100k -status-code:200 mime-type:text etc.

Shift Key Magic

Shift über dem File mit grün download File und rot gedownloaded by Rechte Maustaste auf das File und Block this request. Jetzt wird die Seite geladen, ohne dass das File geladen wird und es kann Auswirkungen auf die Ladezeit haben.

Github

Local overrides

Anpassungen werden in den lokalen Ordner geladen und viel schneller geladen.

WPOstats.com

Case studies and experiments demonstrating the impact of web performance optimization (WPO) on user experience and business metrics.

webworldwide.io

The web isn't experienced the same way everywhere. Select a country to learn more.

whatdoesmysitecost.com

Find out how much it costs for someone to use your site on mobile networks around the world.

Timings

Es ist wichtig, wie schnell die wichtigste Information ersichtlich ist. Z.B. bei Facebook wie schnell der aktuellste Post ersichtlich ist. Als zweites kommt das ganze Gerüst.

User Timing API

performance.clearMarks() then performance.mark()

Speedcurve.com

See how real peopleexperience the speed of your website.

console.timeStamp() https://developer.mozilla.org/en-US/docs/Web/API/Console/timeStamp

Javascript wird erst geladen, wenn das CSS fertig geladen ist.

Tech Book

High Performance Browser Networking (O'Reilly)High Performance Browser Networking

Requestmap

http://requestmap.webperf.tools/render/190716_Q3_c9d83e13df2f52f2846c1b0fc66baa30requestmap.webperf.tools

TCP Connections

Im ersten Packet werden 14600 Bytes transportiert. Je grösser die Website ist, umso mehr Connections müssen gemacht werden. Die Pakete sind 10,20,40,80 etz.

DNS Prefetch

Preconnect

Preconnect als erstes, weil Chrom das als erstes interpretiert. Firefox hat einen Bug, damit nicht beide in das rel Element integriert werden kann. rel="preconnect dns-prefetch" funktioniert so nicht.

Gridbyexample

Grid by Examplegridbyexample.com

Subresources

Download Fonts parallel während das CSS heruntergeladen wird. !NICHT VERWENDEN!

Preload

rel="preload" verwenden und nicht Subresources. Bei diesen fehlen diverse Features. Preload wird immer direkt nach dem laden des CSS heruntergeladen.

Web Page Test

https://www.webpagetest.org/www.webpagetest.org

Immer mehrer Testcases machen, damit ein Durchschnitt genommen werden kann. Bei nur einem Test, werden eventuelle Fehler nicht gesehen. Hidden Feature: /?bulk=1&trottle_cpu=4 Bulk kann mehre Seite gleichzeitig testen. Statistik: Ja steiler die Statistik ist, je besser ist es. Rote Linien über die ganze Zeit sind 404. Gelbe Linien sind Redirects. Ist eine Linie immer wieder unterbrochen, das ist eine Javascript execution. Linien haben dunkle und helle stellen. Das sind unterschiede von Daten senden und Daten empfangen.