Above the fold content

Walter Ebert
Walter EbertIndependent Web & Usability Engineer um walter.ebert.engineering
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
1 von 32

Recomendados

Enlace de prezy von
Enlace de prezyEnlace de prezy
Enlace de prezyCarlos Nazario
145 views1 Folie
Paginas web von
Paginas webPaginas web
Paginas webLupiz Esquivel Garcia
189 views2 Folien
はじめてのChrome extension von
はじめてのChrome extensionはじめてのChrome extension
はじめてのChrome extensionyoshikawa_t
6.6K views49 Folien
メンテナブルでありつづけるためのCSS設計 von
メンテナブルでありつづけるためのCSS設計メンテナブルでありつづけるためのCSS設計
メンテナブルでありつづけるためのCSS設計拓樹 谷
37.1K views102 Folien
Exposiciones primera parte von
Exposiciones primera parteExposiciones primera parte
Exposiciones primera parteYuitap Angulo
45 views5 Folien
Videos von
VideosVideos
Videosgueste1da30f
1 view1 Folie

Más contenido relacionado

Más de Walter Ebert

FrOSCon 2023: WordPress als ActivityPub-Instanz von
FrOSCon 2023: WordPress als ActivityPub-InstanzFrOSCon 2023: WordPress als ActivityPub-Instanz
FrOSCon 2023: WordPress als ActivityPub-InstanzWalter Ebert
3 views31 Folien
Hero Video Performance - DrupalCamp Ruhr von
Hero Video Performance - DrupalCamp RuhrHero Video Performance - DrupalCamp Ruhr
Hero Video Performance - DrupalCamp RuhrWalter Ebert
14 views25 Folien
Sicherheit für WordPress von
Sicherheit für WordPressSicherheit für WordPress
Sicherheit für WordPressWalter Ebert
630 views31 Folien
WordPress aufräumen - WordCamp Stuttgart von
WordPress aufräumen - WordCamp StuttgartWordPress aufräumen - WordCamp Stuttgart
WordPress aufräumen - WordCamp StuttgartWalter Ebert
1.5K views32 Folien
WordPress aufräumen von
WordPress aufräumenWordPress aufräumen
WordPress aufräumenWalter Ebert
1K views24 Folien
Hero Video Performance von
Hero Video PerformanceHero Video Performance
Hero Video PerformanceWalter Ebert
1.2K views25 Folien

Más de Walter Ebert(20)

FrOSCon 2023: WordPress als ActivityPub-Instanz von Walter Ebert
FrOSCon 2023: WordPress als ActivityPub-InstanzFrOSCon 2023: WordPress als ActivityPub-Instanz
FrOSCon 2023: WordPress als ActivityPub-Instanz
Walter Ebert3 views
Hero Video Performance - DrupalCamp Ruhr von Walter Ebert
Hero Video Performance - DrupalCamp RuhrHero Video Performance - DrupalCamp Ruhr
Hero Video Performance - DrupalCamp Ruhr
Walter Ebert14 views
Sicherheit für WordPress von Walter Ebert
Sicherheit für WordPressSicherheit für WordPress
Sicherheit für WordPress
Walter Ebert630 views
WordPress aufräumen - WordCamp Stuttgart von Walter Ebert
WordPress aufräumen - WordCamp StuttgartWordPress aufräumen - WordCamp Stuttgart
WordPress aufräumen - WordCamp Stuttgart
Walter Ebert1.5K views
Hero Video Performance von Walter Ebert
Hero Video PerformanceHero Video Performance
Hero Video Performance
Walter Ebert1.2K views
WordPress-Webseiten umziehen / online stellen von Walter Ebert
WordPress-Webseiten umziehen / online stellenWordPress-Webseiten umziehen / online stellen
WordPress-Webseiten umziehen / online stellen
Walter Ebert537 views
Using browser settings for performance von Walter Ebert
Using browser settings for performanceUsing browser settings for performance
Using browser settings for performance
Walter Ebert581 views
Das richtige WordPress-Theme finden von Walter Ebert
Das richtige WordPress-Theme findenDas richtige WordPress-Theme finden
Das richtige WordPress-Theme finden
Walter Ebert320 views
WordPress Health Check - WordCamp Würzburg von Walter Ebert
WordPress Health Check - WordCamp WürzburgWordPress Health Check - WordCamp Würzburg
WordPress Health Check - WordCamp Würzburg
Walter Ebert1.8K views
WordPress Health Check von Walter Ebert
WordPress Health CheckWordPress Health Check
WordPress Health Check
Walter Ebert315 views
Making WordPress fast(er) von Walter Ebert
Making WordPress fast(er)Making WordPress fast(er)
Making WordPress fast(er)
Walter Ebert766 views
Testumgebungen für WordPress von Walter Ebert
Testumgebungen für WordPressTestumgebungen für WordPress
Testumgebungen für WordPress
Walter Ebert1.2K views
Modernism in Web Design von Walter Ebert
Modernism in Web DesignModernism in Web Design
Modernism in Web Design
Walter Ebert1.4K views
Weniger aus Bilder holen von Walter Ebert
Weniger aus Bilder holenWeniger aus Bilder holen
Weniger aus Bilder holen
Walter Ebert1.9K views
WordPress mit Composer und Git verwalten von Walter Ebert
WordPress mit Composer und Git verwaltenWordPress mit Composer und Git verwalten
WordPress mit Composer und Git verwalten
Walter Ebert1.6K views
High Performance Images von Walter Ebert
High Performance ImagesHigh Performance Images
High Performance Images
Walter Ebert5.9K views
HTTPS + Let's Encrypt von Walter Ebert
HTTPS + Let's EncryptHTTPS + Let's Encrypt
HTTPS + Let's Encrypt
Walter Ebert1.8K views
WordPress-Templates mit Twig erstellen - PHPUGFFM von Walter Ebert
WordPress-Templates mit Twig erstellen - PHPUGFFMWordPress-Templates mit Twig erstellen - PHPUGFFM
WordPress-Templates mit Twig erstellen - PHPUGFFM
Walter Ebert2K views

Above the fold content