Above the fold content

4.057 Aufrufe

Veröffentlicht am

Vortrag für die Frontend Usergroup RheinMain

Veröffentlicht in: Internet
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
4.057
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
2.510
Aktionen
Geteilt
0
Downloads
5
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Above the fold content

  1. 1. FFrroonntteenndd UUsseerrggrroouupp RRhheeiinn--MMaaiinn 11oo..0099..22001144 WWaalltteerr EEbbeerrtt AAbboovvee tthhee ffoolldd
  2. 2. http://boagworld.com/dev/are-media-queries-the-answer-to-the-fold/
  3. 3. 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
  4. 4. Was Zur Hoelle ?
  5. 5. http://wwoorrkkiinnggddrraafftt..ddee//11776//
  6. 6. http://www.ffrroonntteenndd--rrhheeiinnmmaaiinn..ddee//
  7. 7. Subjektive Wahrnehmung der Ladegeschwindigkeit
  8. 8. http://www.webpagetest.org/result/121212_RW_ED4/
  9. 9. https://www.youtube.com/watch?v=0wgDGTgOPds&feature=youtu.be&t=9m55s
  10. 10. https://developers.google.com/speed/pagespeed/insights/?url=govdata.de
  11. 11. 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>
  12. 12. http://css-tricks.com/authoring-ccrriittiiccaall--ffoolldd--ccssss//
  13. 13. 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
  14. 14. Javascript asynchron laden <script src=//example.com/scripts.js async defer> https://www.igvita.com/2014/05/20/script-injected-async-scripts-considered-harmful/
  15. 15. 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>
  16. 16. 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>
  17. 17. LocalStorage-Support <script> var useLocalStorage = false; if ('localStorage' in window) { useLocalStorage = true; } </script>
  18. 18. 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>
  19. 19. 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>
  20. 20. http://walterebert.com/playground/wwppoo//ccrriittiiccaallccssss//
  21. 21. 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>
  22. 22. Inline-Bilder mit base64 <div id="logo"> <img src="data:image/png;base64,iVBORw…" alt="Logo" /> </div>
  23. 23. SVG mit PNG-Fallback <div id="logo"> <svg> ... <image src="logo.png" /> </svg> </div> http://walterebert.com/playground/html5/img-svg/
  24. 24. http://calendar.perfplanet.com/2011/why-inlining-everything-iiss--nnoott--tthhee--aannsswweerr//
  25. 25. https://developers.google.com/speed/pagespeed/mod http://www.youtube.com/watch?v=uR5urTx8S4E
  26. 26. Media Queries CSS @media (max-height:600px) Javascript window.matchMedia('(max-height:600px)')
  27. 27. 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" />
  28. 28. Walter Ebert @wltrd walterebert.de slideshare.net/walterebert

×