SlideShare a Scribd company logo
FFrroonntteenndd UUsseerrggrroouupp RRhheeiinn--MMaaiinn 
11oo..0099..22001144 
WWaalltteerr EEbbeerrtt 
AAbboovvee tthhee ffoolldd
http://boagworld.com/dev/are-media-queries-the-answer-to-the-fold/
PageSpeed Insights misst Möglichkeiten zur Steigerung der 
Leistungsfähigkeit einer Seite in folgender Hinsicht: 
● Erforderliche Zeit zum Laden des ohne Scrollen sichtbaren 
Inhalts: Zeitdauer vom Anfordern einer neuen Seite durch 
einen Nutzer bis zum Rendern des ohne Scrollen sichtbaren 
Inhalts durch den Browser 
● Erforderliche Zeit zum vollständigen Laden der Seite: 
Zeitdauer vom Anfordern einer neuen Seite durch einen 
Nutzer bis zum vollständigen Rendern der Seite durch den 
Browser 
https://developers.google.com/speed/docs/insights/about
Was Zur Hoelle ?
http://wwoorrkkiinnggddrraafftt..ddee//11776//
http://www.ffrroonntteenndd--rrhheeiinnmmaaiinn..ddee//
Subjektive Wahrnehmung 
der Ladegeschwindigkeit
http://www.webpagetest.org/result/121212_RW_ED4/
https://www.youtube.com/watch?v=0wgDGTgOPds&feature=youtu.be&t=9m55s
https://developers.google.com/speed/pagespeed/insights/?url=govdata.de
Critical CSS 
<!DOCTYPE html> 
<html> 
<head> 
<style>/* Critical CSS */</style> 
</head> 
<body> 
<p class="critical">Above the fold content</p> 
<!-- "the fold" --> 
<p> 
Lorizzle cool dolizzle sit amizzle, ... 
</p> 
<link rel="stylesheet" 
type="text/css" 
href="uncritical.css" /> 
</body> 
</html>
http://css-tricks.com/authoring-ccrriittiiccaall--ffoolldd--ccssss//
Critical Content 
<!DOCTYPE html> 
<html> 
<head> 
<style>/* Critical CSS */</style> 
</head> 
<body> 
<p class="critical">Above the fold content</p> 
<!-- "the fold" --> 
<?php flush(); ?> 
<p> 
Lorizzle cool dolizzle sit amizzle, ... 
</p> 
<link rel="stylesheet" 
type="text/css" 
href="uncritical.css" /> 
</body> 
</html> 
https://www.facebook.com/notes/facebook-engineering/bigpipe-pipelining-web-pages-for-high-performance/389414033919
Above the fold content
Above the fold content
Above the fold content
Above the fold content
Javascript asynchron laden 
<script src=//example.com/scripts.js async defer> 
https://www.igvita.com/2014/05/20/script-injected-async-scripts-considered-harmful/
Hack: komplettes CSS einbetten 
<!DOCTYPE html> 
<html> 
<head> 
<style> 
<?php echo file_get_contents('/path/to/style.css'); ?> 
</style> 
</head> 
<body> 
<p> 
Lorizzle cool dolizzle sit amizzle, ... 
</p> 
</body> 
</html>
Idee: CSS in localStorage 
<!DOCTYPE html> 
<html> 
<head> 
<script> 
var css = 'body {color: #333; background: #fff;}'; 
document.write('<style>' + css + '</style>'); 
</script> 
</head> 
<body> 
<p>Lorizzle cool dolizzle sit amizzle, ...</p> 
<script> 
window.localStorage.setItem('css', css); 
</script> 
</body> 
</html>
LocalStorage-Support 
<script> 
var useLocalStorage = false; 
if ('localStorage' in window) { 
useLocalStorage = true; 
} 
</script>
CSS laden 
<script> 
var css = false, version = false; 
<?php 
$file = '/path/to/style.css'; 
$stat = stat($file); 
$version = (string) $stat['mtime']; 
if (empty($_COOKIE['version']) or 
$_COOKIE['version'] !== $version) { 
echo "version = '$version';" 
$css = file_get_contents($file); 
$css = str_replace( 
array("r", "n","'",'"'), 
array('', '', 'x27','x22'), 
trim($css) 
); 
echo "css = '$css';"; 
} ?> 
</script>
CSS ausgeben 
<script> 
if (!css && useLocalStorage) { 
css = window.localStorage.getItem('css'); 
} 
if (css) { 
document.write('<style>' + css + '</style>'); 
} else { 
document.write('<link href="/uri/to/style.css"' 
+ ' rel="stylesheet" type="text/css" />'); 
} 
</script> 
<noscript> 
<link href="/uri/to/style.css" 
rel="stylesheet" 
type="text/css" /> 
</noscript>
http://walterebert.com/playground/wwppoo//ccrriittiiccaallccssss//
Speichern 
<script> 
if (useLocalStorage && version && css) { 
var d = new Date(); 
d.setTime(d.getTime() + (30*24*60*60*1000) ); 
document.cookie='version=' + version + ';' + 
'expires=' + d.toGMTString() + '; path=/;'; 
window.localStorage.setItem('css', css); 
} 
</script>
Inline-Bilder mit base64 
<div id="logo"> 
<img src="data:image/png;base64,iVBORw…" alt="Logo" /> 
</div>
SVG mit PNG-Fallback 
<div id="logo"> 
<svg> 
... 
<image src="logo.png" /> 
</svg> 
</div> 
http://walterebert.com/playground/html5/img-svg/
http://calendar.perfplanet.com/2011/why-inlining-everything-iiss--nnoott--tthhee--aannsswweerr//
https://developers.google.com/speed/pagespeed/mod 
http://www.youtube.com/watch?v=uR5urTx8S4E
Media Queries 
CSS 
@media (max-height:600px) 
Javascript 
window.matchMedia('(max-height:600px)')
Responsive Images 
http://responsiveimages.org/ 
<picture> 
<source 
media="(min-height: 
600px)" 
srcset="big.jpg"> 
<source 
srcset="small.jpg"> 
<img src="fallback.jpg" /> 
</picture> 
<img 
src="fallback.jpg" 
srcset="small.jpg 600h, 
large.jpg" 
sizes="(max-height: 480px) 
50vh, 100vh" />
Walter Ebert 
@wltrd 
walterebert.de 
slideshare.net/walterebert

More Related Content

More from Walter Ebert

FrOSCon 2023: WordPress als ActivityPub-Instanz
FrOSCon 2023: WordPress als ActivityPub-InstanzFrOSCon 2023: WordPress als ActivityPub-Instanz
FrOSCon 2023: WordPress als ActivityPub-Instanz
Walter Ebert
 
Hero Video Performance - DrupalCamp Ruhr
Hero Video Performance - DrupalCamp RuhrHero Video Performance - DrupalCamp Ruhr
Hero Video Performance - DrupalCamp Ruhr
Walter Ebert
 
Sicherheit für WordPress
Sicherheit für WordPressSicherheit für WordPress
Sicherheit für WordPress
Walter Ebert
 
WordPress aufräumen - WordCamp Stuttgart
WordPress aufräumen - WordCamp StuttgartWordPress aufräumen - WordCamp Stuttgart
WordPress aufräumen - WordCamp Stuttgart
Walter Ebert
 
WordPress aufräumen
WordPress aufräumenWordPress aufräumen
WordPress aufräumen
Walter Ebert
 
Hero Video Performance
Hero Video PerformanceHero Video Performance
Hero Video Performance
Walter Ebert
 
WordPress-Webseiten umziehen / online stellen
WordPress-Webseiten umziehen / online stellenWordPress-Webseiten umziehen / online stellen
WordPress-Webseiten umziehen / online stellen
Walter Ebert
 
Using browser settings for performance
Using browser settings for performanceUsing browser settings for performance
Using browser settings for performance
Walter Ebert
 
Das richtige WordPress-Theme finden
Das richtige WordPress-Theme findenDas richtige WordPress-Theme finden
Das richtige WordPress-Theme finden
Walter Ebert
 
WordPress Health Check - WordCamp Würzburg
WordPress Health Check - WordCamp WürzburgWordPress Health Check - WordCamp Würzburg
WordPress Health Check - WordCamp Würzburg
Walter Ebert
 
WordPress Health Check
WordPress Health CheckWordPress Health Check
WordPress Health Check
Walter Ebert
 
Making WordPress fast(er)
Making WordPress fast(er)Making WordPress fast(er)
Making WordPress fast(er)
Walter Ebert
 
Testumgebungen für WordPress
Testumgebungen für WordPressTestumgebungen für WordPress
Testumgebungen für WordPress
Walter Ebert
 
Modernism in Web Design
Modernism in Web DesignModernism in Web Design
Modernism in Web Design
Walter Ebert
 
WordPress Multisite
WordPress MultisiteWordPress Multisite
WordPress Multisite
Walter Ebert
 
Weniger aus Bilder holen
Weniger aus Bilder holenWeniger aus Bilder holen
Weniger aus Bilder holen
Walter Ebert
 
WordPress mit Composer und Git verwalten
WordPress mit Composer und Git verwaltenWordPress mit Composer und Git verwalten
WordPress mit Composer und Git verwalten
Walter Ebert
 
High Performance Images
High Performance ImagesHigh Performance Images
High Performance Images
Walter Ebert
 
HTTPS + Let's Encrypt
HTTPS + Let's EncryptHTTPS + Let's Encrypt
HTTPS + Let's Encrypt
Walter Ebert
 
WordPress-Templates mit Twig erstellen - PHPUGFFM
WordPress-Templates mit Twig erstellen - PHPUGFFMWordPress-Templates mit Twig erstellen - PHPUGFFM
WordPress-Templates mit Twig erstellen - PHPUGFFM
Walter Ebert
 

More from Walter Ebert (20)

FrOSCon 2023: WordPress als ActivityPub-Instanz
FrOSCon 2023: WordPress als ActivityPub-InstanzFrOSCon 2023: WordPress als ActivityPub-Instanz
FrOSCon 2023: WordPress als ActivityPub-Instanz
 
Hero Video Performance - DrupalCamp Ruhr
Hero Video Performance - DrupalCamp RuhrHero Video Performance - DrupalCamp Ruhr
Hero Video Performance - DrupalCamp Ruhr
 
Sicherheit für WordPress
Sicherheit für WordPressSicherheit für WordPress
Sicherheit für WordPress
 
WordPress aufräumen - WordCamp Stuttgart
WordPress aufräumen - WordCamp StuttgartWordPress aufräumen - WordCamp Stuttgart
WordPress aufräumen - WordCamp Stuttgart
 
WordPress aufräumen
WordPress aufräumenWordPress aufräumen
WordPress aufräumen
 
Hero Video Performance
Hero Video PerformanceHero Video Performance
Hero Video Performance
 
WordPress-Webseiten umziehen / online stellen
WordPress-Webseiten umziehen / online stellenWordPress-Webseiten umziehen / online stellen
WordPress-Webseiten umziehen / online stellen
 
Using browser settings for performance
Using browser settings for performanceUsing browser settings for performance
Using browser settings for performance
 
Das richtige WordPress-Theme finden
Das richtige WordPress-Theme findenDas richtige WordPress-Theme finden
Das richtige WordPress-Theme finden
 
WordPress Health Check - WordCamp Würzburg
WordPress Health Check - WordCamp WürzburgWordPress Health Check - WordCamp Würzburg
WordPress Health Check - WordCamp Würzburg
 
WordPress Health Check
WordPress Health CheckWordPress Health Check
WordPress Health Check
 
Making WordPress fast(er)
Making WordPress fast(er)Making WordPress fast(er)
Making WordPress fast(er)
 
Testumgebungen für WordPress
Testumgebungen für WordPressTestumgebungen für WordPress
Testumgebungen für WordPress
 
Modernism in Web Design
Modernism in Web DesignModernism in Web Design
Modernism in Web Design
 
WordPress Multisite
WordPress MultisiteWordPress Multisite
WordPress Multisite
 
Weniger aus Bilder holen
Weniger aus Bilder holenWeniger aus Bilder holen
Weniger aus Bilder holen
 
WordPress mit Composer und Git verwalten
WordPress mit Composer und Git verwaltenWordPress mit Composer und Git verwalten
WordPress mit Composer und Git verwalten
 
High Performance Images
High Performance ImagesHigh Performance Images
High Performance Images
 
HTTPS + Let's Encrypt
HTTPS + Let's EncryptHTTPS + Let's Encrypt
HTTPS + Let's Encrypt
 
WordPress-Templates mit Twig erstellen - PHPUGFFM
WordPress-Templates mit Twig erstellen - PHPUGFFMWordPress-Templates mit Twig erstellen - PHPUGFFM
WordPress-Templates mit Twig erstellen - PHPUGFFM
 

Above the fold content