Tom: Workshop
These are Tom's notes of the workshop
RUM = Real User Monitoring
Synthetic Testing Cheap, on every computer, no fake data
How to get data out of Google Analytics?
Durschnittszeit mit Vorsicht zu geniessen,
Jede Seite, jedes Netzwerk
Performance messen mit = MEDIAN oder 95% of the user, kein Avarage
Unterschied von 0.04 Download Zeit von HTML, zu Seitenladen 1.07 sind JS/CSS/Fonts
Can I use
Linking between Google Analytics Account und CanIUse-Account is possible, simply log in on both an link em'
Chrome Dev Tools
Keyboard shortcuts
CMD + SHIFT + P
Do the following settings
Full View
Disable Cache
Priority Column
Wenn die Grösse (schwarz) kleiner ist als grau? ==> Compressed
Warum ist Grösse (schwarz) grösser als grau ? ==> Headers werden entfernt
Beispiel Time: 432ms - 406ms => 26ms, war die effektive Zeit für ein Download (Latency Data)
Priority Column
Assets and JS have lower Priority
https://docs.google.com/document/d/1bCDuq9H1ih9iNjgzyAL0gpwNFiEP4TZS-YLRp_RuMlc/edit#
CSS Optimierung: Print CSS oder Media Queries in eigene Files stellen
Wichtige Bilder, hoch in den DOM setzen (nähe <body>) oder wir können Priority-Hints setzen, damit der Browser das Bild mit höhere Priorität früher lädt.
Neue Optimierung aktuell nur Canary, wird aber kommen: CSS im <head> verhält sich gleich wie Script. Im <head> wird es mit höchster Prio geladen, in Zukunft kann man css auch z.B. später laden (Bsp. Footer) direkt oberhalb des Footer-Divs
H/2 Priorities Pt. I:
H/2 Priorities Pt. II:
Chrome Flags
Hit the Chrome Flags with chrome://flags
Developer Tools experiments => Enabled
Settings -> Experiments
Hit SHIFT 6 times (6x) and you get all the hidden stuff
Protocol Monitor => Websocket Stuff Timeline: Event initiators => Timeline: invalidation tracking => Flicker of a site when the page repaints
Filtering
Show third party apps:
CMD + SHIFT + P => third
Show list of filters
More hidden stuff
Where did network entries came from or lead to
Hold SHIFT over the network entries, to see who loaded the entry or what Green = loaded from Red = lead to download...
Local Overrides
Create somewhere on computer a folder called .local-overrides
Goto DevTools -> Sources -> Overrides:
Select just created .local-overrides folder (might ask for permissions)
Open File with CMD + P
Make changes in a file (index, css or even image)
Save and Reload pages
Thats it -> check or analyze the difference
Speed Index
We need to get rid of the flat areas on a speed index graph
Custom Timing
Question: What is the thing, people need to see first?
Facebook: First post on timeline Banking: Wealth chart
...
<li class="search-result">
...
</li>
<script> performance.mark('firstSearchResult');
</script>
...Good practice is to use clearMarks() before mark() to be sure this is the right moment
performance.mark needs to be place in the virtual DOM, not in in app.js. SInce at the moment of measuring a performance you need to be there
LUKB.CH as example
A lot of call to action
How fast the hero image was loaded ?
How fast the user clicks to a call to action
Order of <head>
But inline <script> before loading the stylsheets, but only if you're sure the inline <script> is not using any of the css
Example:
Sky.com, <script> was above the <title> tag. So the user was not able to see which page he was loading
Put this ip address to your hosts file: 71.114.67.58 platform.twitter.com
Network
Read this book
Latecy is something we need to focus on
DNS-Prefetch
Preconnect => Better and as simple as this:
<link rel="preconnect" href="https://fonts.google.com" />
Case Study - gridbyexample
Take a look at thhe source of https://gridbyexample.com/
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Grid by Example</title>
<link rel="canonical" href="http://gridbyexample.com/">
<link rel="preconnect" href="fonts.google.com" />
<link rel="preconnect" href="platform.twitter.com" />
<link rel="preconnect" href="track.gaug.es" />
<link rel="preconnect" href="m.servedby-buysellads.com" />
<link rel="preconnect" href="d36ee2fcip1434.cloudfront.net" />
<link rel="dns-prefetch" href="fonts.google.com" />
<link rel="dns-prefetch" href="platform.twitter.com" />
<link rel="dns-prefetch" href="track.gaug.es" />
<link rel="dns-prefetch" href="m.servedby-buysellads.com" />
<link rel="dns-prefetch" href="d36ee2fcip1434.cloudfront.net" />
<script type="text/javascript">
var _gauges = _gauges || [];
(function() {
var t = document.createElement('script');
t.type = 'text/javascript';
t.async = true;
t.id = 'gauges-tracker';
t.setAttribute('data-site-id', '5923de867218b50718020ae0');
t.setAttribute('data-track-path', 'https://track.gaug.es/track.gif');
t.src = 'https://d36ee2fcip1434.cloudfront.net/track.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(t, s);
})();
</script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic" />
...Is not working...
Since fonts.googleapis.com is called way to early
href= needs a valid https:// in front, so basically right now the browser is looking for a file
Webpage Tests
Test Settings: Use Cable
Test Settings: Always run an odd number of tests, never run just one
Advanced: Check "Save response bodies"
Chromium: Check "Capture Lighthouse Report"
Add ?bulk=1 for multiple url
Last updated
Was this helpful?