Embed Size (px)
DESCRIPTION
Vortrag für die Frontend Usergroup RheinMain
Citation preview
Above the fold Above the fold
Frontend Usergroup Rhein-Main Frontend Usergroup Rhein-Main 1o092014 1o092014
Walter EbertWalter Ebert
httpboagworldcomdevare-media-queries-the-answer-to-the-fold
httpsdevelopersgooglecomspeeddocsinsightsabout
PageSpeed Insights misst Moumlglichkeiten zur Steigerung der Leistungsfaumlhigkeit 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 vollstaumlndigen Laden der Seite Zeitdauer vom Anfordern einer neuen Seite durch einen Nutzer bis zum vollstaumlndigen Rendern der Seite durch den Browser
Was Zur Hoelle
httpworkingdraftde176httpworkingdraftde176
httpwwwfrontend-rheinmaindehttpwwwfrontend-rheinmainde
Subjektive Wahrnehmungder Ladegeschwindigkeit
httpwwwwebpagetestorgresult121212_RW_ED4
httpswwwyoutubecomwatchv=0wgDGTgOPdsampfeature=youtubeampt=9m55s
httpsdevelopersgooglecomspeedpagespeedinsightsurl=govdatade
Critical CSSltDOCTYPE htmlgtlthtmlgt ltheadgt ltstylegt Critical CSS ltstylegt ltheadgt ltbodygt ltp class=criticalgtAbove the fold contentltpgt lt-- the fold --gt
ltpgt Lorizzle cool dolizzle sit amizzle ltpgt
ltlink rel=stylesheet type=textcss href=uncriticalcss gt ltbodygtlthtmlgt
httpcss-trickscomauthoring-critical-fold-csshttpcss-trickscomauthoring-critical-fold-css
Critical ContentltDOCTYPE htmlgtlthtmlgt ltheadgt ltstylegt Critical CSS ltstylegt ltheadgt ltbodygt ltp class=criticalgtAbove the fold contentltpgt lt-- the fold --gt ltphp flush() gt
ltpgt Lorizzle cool dolizzle sit amizzle ltpgt
ltlink rel=stylesheet type=textcss href=uncriticalcss gt ltbodygtlthtmlgt
httpswwwfacebookcomnotesfacebook-engineeringbigpipe-pipelining-web-pages-for-high-performance389414033919
Javascript asynchron laden
ltscript src=examplecomscriptsjs async defergt
httpswwwigvitacom20140520script-injected-async-scripts-considered-harmful
Hack komplettes CSS einbetten
ltDOCTYPE htmlgtlthtmlgt ltheadgt ltstylegt ltphp echo file_get_contents(pathtostylecss) gt ltstylegt ltheadgt ltbodygt ltpgt Lorizzle cool dolizzle sit amizzle ltpgt ltbodygtlthtmlgt
Idee CSS in localStorage
ltDOCTYPE htmlgtlthtmlgt ltheadgt ltscriptgt var css = body color 333 background fff documentwrite(ltstylegt + css + ltstylegt) ltscriptgt ltheadgt ltbodygt ltpgtLorizzle cool dolizzle sit amizzle ltpgt ltscriptgt windowlocalStoragesetItem(css css) ltscriptgt ltbodygtlthtmlgt
LocalStorage-Support
ltscriptgtvar useLocalStorage = falseif (localStorage in window) useLocalStorage = trueltscriptgt
CSS ladenltscriptgtvar css = false version = falseltphp$file = pathtostylecss$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( x27x22) trim($css) ) echo css = $cssgtltscriptgt
CSS ausgebenltscriptgtif (css ampamp useLocalStorage) css = windowlocalStoragegetItem(css)
if (css) documentwrite(ltstylegt + css + ltstylegt) else documentwrite(ltlink href=uritostylecss + rel=stylesheet type=textcss gt)ltscriptgt
ltnoscriptgtltlink href=uritostylecss rel=stylesheet type=textcss gtltnoscriptgt
httpwalterebertcomplaygroundwpocriticalcsshttpwalterebertcomplaygroundwpocriticalcss
Speichern
ltscriptgtif (useLocalStorage ampamp version ampamp css)
var d = new Date() dsetTime(dgetTime() + (302460601000) ) documentcookie=version= + version + + expires= + dtoGMTString() + path=
windowlocalStoragesetItem(css css)
ltscriptgt
Inline-Bilder mit base64
ltdiv id=logogt ltimg src=dataimagepngbase64iVBORwhellip alt=Logo gtltdivgt
SVG mit PNG-Fallback
ltdiv id=logogt ltsvggt ltimage src=logopng gt ltsvggt ltdivgt
httpwalterebertcomplaygroundhtml5img-svg
httpcalendarperfplanetcom2011why-inlining-everything-is-not-the-answerhttpcalendarperfplanetcom2011why-inlining-everything-is-not-the-answer
httpsdevelopersgooglecomspeedpagespeedmodhttpwwwyoutubecomwatchv=uR5urTx8S4E
Media Queries
CSSmedia (max-height600px)
JavascriptwindowmatchMedia((max-height600px))
httpresponsiveimagesorg
ltpicturegt
ltsource media=(min-height 600px) srcset=bigjpggt ltsource srcset=smalljpggt ltimg src=fallbackjpg gt
ltpicturegt
ltimg
src=fallbackjpg
srcset=smalljpg 600h
largejpg
sizes=(max-height 480px) 50vh 100vh gt
Responsive Images
Walter Ebert
wltrdwalterebertde
slidesharenetwalterebert
httpboagworldcomdevare-media-queries-the-answer-to-the-fold
httpsdevelopersgooglecomspeeddocsinsightsabout
PageSpeed Insights misst Moumlglichkeiten zur Steigerung der Leistungsfaumlhigkeit 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 vollstaumlndigen Laden der Seite Zeitdauer vom Anfordern einer neuen Seite durch einen Nutzer bis zum vollstaumlndigen Rendern der Seite durch den Browser
Was Zur Hoelle
httpworkingdraftde176httpworkingdraftde176
httpwwwfrontend-rheinmaindehttpwwwfrontend-rheinmainde
Subjektive Wahrnehmungder Ladegeschwindigkeit
httpwwwwebpagetestorgresult121212_RW_ED4
httpswwwyoutubecomwatchv=0wgDGTgOPdsampfeature=youtubeampt=9m55s
httpsdevelopersgooglecomspeedpagespeedinsightsurl=govdatade
Critical CSSltDOCTYPE htmlgtlthtmlgt ltheadgt ltstylegt Critical CSS ltstylegt ltheadgt ltbodygt ltp class=criticalgtAbove the fold contentltpgt lt-- the fold --gt
ltpgt Lorizzle cool dolizzle sit amizzle ltpgt
ltlink rel=stylesheet type=textcss href=uncriticalcss gt ltbodygtlthtmlgt
httpcss-trickscomauthoring-critical-fold-csshttpcss-trickscomauthoring-critical-fold-css
Critical ContentltDOCTYPE htmlgtlthtmlgt ltheadgt ltstylegt Critical CSS ltstylegt ltheadgt ltbodygt ltp class=criticalgtAbove the fold contentltpgt lt-- the fold --gt ltphp flush() gt
ltpgt Lorizzle cool dolizzle sit amizzle ltpgt
ltlink rel=stylesheet type=textcss href=uncriticalcss gt ltbodygtlthtmlgt
httpswwwfacebookcomnotesfacebook-engineeringbigpipe-pipelining-web-pages-for-high-performance389414033919
Javascript asynchron laden
ltscript src=examplecomscriptsjs async defergt
httpswwwigvitacom20140520script-injected-async-scripts-considered-harmful
Hack komplettes CSS einbetten
ltDOCTYPE htmlgtlthtmlgt ltheadgt ltstylegt ltphp echo file_get_contents(pathtostylecss) gt ltstylegt ltheadgt ltbodygt ltpgt Lorizzle cool dolizzle sit amizzle ltpgt ltbodygtlthtmlgt
Idee CSS in localStorage
ltDOCTYPE htmlgtlthtmlgt ltheadgt ltscriptgt var css = body color 333 background fff documentwrite(ltstylegt + css + ltstylegt) ltscriptgt ltheadgt ltbodygt ltpgtLorizzle cool dolizzle sit amizzle ltpgt ltscriptgt windowlocalStoragesetItem(css css) ltscriptgt ltbodygtlthtmlgt
LocalStorage-Support
ltscriptgtvar useLocalStorage = falseif (localStorage in window) useLocalStorage = trueltscriptgt
CSS ladenltscriptgtvar css = false version = falseltphp$file = pathtostylecss$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( x27x22) trim($css) ) echo css = $cssgtltscriptgt
CSS ausgebenltscriptgtif (css ampamp useLocalStorage) css = windowlocalStoragegetItem(css)
if (css) documentwrite(ltstylegt + css + ltstylegt) else documentwrite(ltlink href=uritostylecss + rel=stylesheet type=textcss gt)ltscriptgt
ltnoscriptgtltlink href=uritostylecss rel=stylesheet type=textcss gtltnoscriptgt
httpwalterebertcomplaygroundwpocriticalcsshttpwalterebertcomplaygroundwpocriticalcss
Speichern
ltscriptgtif (useLocalStorage ampamp version ampamp css)
var d = new Date() dsetTime(dgetTime() + (302460601000) ) documentcookie=version= + version + + expires= + dtoGMTString() + path=
windowlocalStoragesetItem(css css)
ltscriptgt
Inline-Bilder mit base64
ltdiv id=logogt ltimg src=dataimagepngbase64iVBORwhellip alt=Logo gtltdivgt
SVG mit PNG-Fallback
ltdiv id=logogt ltsvggt ltimage src=logopng gt ltsvggt ltdivgt
httpwalterebertcomplaygroundhtml5img-svg
httpcalendarperfplanetcom2011why-inlining-everything-is-not-the-answerhttpcalendarperfplanetcom2011why-inlining-everything-is-not-the-answer
httpsdevelopersgooglecomspeedpagespeedmodhttpwwwyoutubecomwatchv=uR5urTx8S4E
Media Queries
CSSmedia (max-height600px)
JavascriptwindowmatchMedia((max-height600px))
httpresponsiveimagesorg
ltpicturegt
ltsource media=(min-height 600px) srcset=bigjpggt ltsource srcset=smalljpggt ltimg src=fallbackjpg gt
ltpicturegt
ltimg
src=fallbackjpg
srcset=smalljpg 600h
largejpg
sizes=(max-height 480px) 50vh 100vh gt
Responsive Images
Walter Ebert
wltrdwalterebertde
slidesharenetwalterebert
httpsdevelopersgooglecomspeeddocsinsightsabout
PageSpeed Insights misst Moumlglichkeiten zur Steigerung der Leistungsfaumlhigkeit 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 vollstaumlndigen Laden der Seite Zeitdauer vom Anfordern einer neuen Seite durch einen Nutzer bis zum vollstaumlndigen Rendern der Seite durch den Browser
Was Zur Hoelle
httpworkingdraftde176httpworkingdraftde176
httpwwwfrontend-rheinmaindehttpwwwfrontend-rheinmainde
Subjektive Wahrnehmungder Ladegeschwindigkeit
httpwwwwebpagetestorgresult121212_RW_ED4
httpswwwyoutubecomwatchv=0wgDGTgOPdsampfeature=youtubeampt=9m55s
httpsdevelopersgooglecomspeedpagespeedinsightsurl=govdatade
Critical CSSltDOCTYPE htmlgtlthtmlgt ltheadgt ltstylegt Critical CSS ltstylegt ltheadgt ltbodygt ltp class=criticalgtAbove the fold contentltpgt lt-- the fold --gt
ltpgt Lorizzle cool dolizzle sit amizzle ltpgt
ltlink rel=stylesheet type=textcss href=uncriticalcss gt ltbodygtlthtmlgt
httpcss-trickscomauthoring-critical-fold-csshttpcss-trickscomauthoring-critical-fold-css
Critical ContentltDOCTYPE htmlgtlthtmlgt ltheadgt ltstylegt Critical CSS ltstylegt ltheadgt ltbodygt ltp class=criticalgtAbove the fold contentltpgt lt-- the fold --gt ltphp flush() gt
ltpgt Lorizzle cool dolizzle sit amizzle ltpgt
ltlink rel=stylesheet type=textcss href=uncriticalcss gt ltbodygtlthtmlgt
httpswwwfacebookcomnotesfacebook-engineeringbigpipe-pipelining-web-pages-for-high-performance389414033919
Javascript asynchron laden
ltscript src=examplecomscriptsjs async defergt
httpswwwigvitacom20140520script-injected-async-scripts-considered-harmful
Hack komplettes CSS einbetten
ltDOCTYPE htmlgtlthtmlgt ltheadgt ltstylegt ltphp echo file_get_contents(pathtostylecss) gt ltstylegt ltheadgt ltbodygt ltpgt Lorizzle cool dolizzle sit amizzle ltpgt ltbodygtlthtmlgt
Idee CSS in localStorage
ltDOCTYPE htmlgtlthtmlgt ltheadgt ltscriptgt var css = body color 333 background fff documentwrite(ltstylegt + css + ltstylegt) ltscriptgt ltheadgt ltbodygt ltpgtLorizzle cool dolizzle sit amizzle ltpgt ltscriptgt windowlocalStoragesetItem(css css) ltscriptgt ltbodygtlthtmlgt
LocalStorage-Support
ltscriptgtvar useLocalStorage = falseif (localStorage in window) useLocalStorage = trueltscriptgt
CSS ladenltscriptgtvar css = false version = falseltphp$file = pathtostylecss$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( x27x22) trim($css) ) echo css = $cssgtltscriptgt
CSS ausgebenltscriptgtif (css ampamp useLocalStorage) css = windowlocalStoragegetItem(css)
if (css) documentwrite(ltstylegt + css + ltstylegt) else documentwrite(ltlink href=uritostylecss + rel=stylesheet type=textcss gt)ltscriptgt
ltnoscriptgtltlink href=uritostylecss rel=stylesheet type=textcss gtltnoscriptgt
httpwalterebertcomplaygroundwpocriticalcsshttpwalterebertcomplaygroundwpocriticalcss
Speichern
ltscriptgtif (useLocalStorage ampamp version ampamp css)
var d = new Date() dsetTime(dgetTime() + (302460601000) ) documentcookie=version= + version + + expires= + dtoGMTString() + path=
windowlocalStoragesetItem(css css)
ltscriptgt
Inline-Bilder mit base64
ltdiv id=logogt ltimg src=dataimagepngbase64iVBORwhellip alt=Logo gtltdivgt
SVG mit PNG-Fallback
ltdiv id=logogt ltsvggt ltimage src=logopng gt ltsvggt ltdivgt
httpwalterebertcomplaygroundhtml5img-svg
httpcalendarperfplanetcom2011why-inlining-everything-is-not-the-answerhttpcalendarperfplanetcom2011why-inlining-everything-is-not-the-answer
httpsdevelopersgooglecomspeedpagespeedmodhttpwwwyoutubecomwatchv=uR5urTx8S4E
Media Queries
CSSmedia (max-height600px)
JavascriptwindowmatchMedia((max-height600px))
httpresponsiveimagesorg
ltpicturegt
ltsource media=(min-height 600px) srcset=bigjpggt ltsource srcset=smalljpggt ltimg src=fallbackjpg gt
ltpicturegt
ltimg
src=fallbackjpg
srcset=smalljpg 600h
largejpg
sizes=(max-height 480px) 50vh 100vh gt
Responsive Images
Walter Ebert
wltrdwalterebertde
slidesharenetwalterebert
Was Zur Hoelle
httpworkingdraftde176httpworkingdraftde176
httpwwwfrontend-rheinmaindehttpwwwfrontend-rheinmainde
Subjektive Wahrnehmungder Ladegeschwindigkeit
httpwwwwebpagetestorgresult121212_RW_ED4
httpswwwyoutubecomwatchv=0wgDGTgOPdsampfeature=youtubeampt=9m55s
httpsdevelopersgooglecomspeedpagespeedinsightsurl=govdatade
Critical CSSltDOCTYPE htmlgtlthtmlgt ltheadgt ltstylegt Critical CSS ltstylegt ltheadgt ltbodygt ltp class=criticalgtAbove the fold contentltpgt lt-- the fold --gt
ltpgt Lorizzle cool dolizzle sit amizzle ltpgt
ltlink rel=stylesheet type=textcss href=uncriticalcss gt ltbodygtlthtmlgt
httpcss-trickscomauthoring-critical-fold-csshttpcss-trickscomauthoring-critical-fold-css
Critical ContentltDOCTYPE htmlgtlthtmlgt ltheadgt ltstylegt Critical CSS ltstylegt ltheadgt ltbodygt ltp class=criticalgtAbove the fold contentltpgt lt-- the fold --gt ltphp flush() gt
ltpgt Lorizzle cool dolizzle sit amizzle ltpgt
ltlink rel=stylesheet type=textcss href=uncriticalcss gt ltbodygtlthtmlgt
httpswwwfacebookcomnotesfacebook-engineeringbigpipe-pipelining-web-pages-for-high-performance389414033919
Javascript asynchron laden
ltscript src=examplecomscriptsjs async defergt
httpswwwigvitacom20140520script-injected-async-scripts-considered-harmful
Hack komplettes CSS einbetten
ltDOCTYPE htmlgtlthtmlgt ltheadgt ltstylegt ltphp echo file_get_contents(pathtostylecss) gt ltstylegt ltheadgt ltbodygt ltpgt Lorizzle cool dolizzle sit amizzle ltpgt ltbodygtlthtmlgt
Idee CSS in localStorage
ltDOCTYPE htmlgtlthtmlgt ltheadgt ltscriptgt var css = body color 333 background fff documentwrite(ltstylegt + css + ltstylegt) ltscriptgt ltheadgt ltbodygt ltpgtLorizzle cool dolizzle sit amizzle ltpgt ltscriptgt windowlocalStoragesetItem(css css) ltscriptgt ltbodygtlthtmlgt
LocalStorage-Support
ltscriptgtvar useLocalStorage = falseif (localStorage in window) useLocalStorage = trueltscriptgt
CSS ladenltscriptgtvar css = false version = falseltphp$file = pathtostylecss$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( x27x22) trim($css) ) echo css = $cssgtltscriptgt
CSS ausgebenltscriptgtif (css ampamp useLocalStorage) css = windowlocalStoragegetItem(css)
if (css) documentwrite(ltstylegt + css + ltstylegt) else documentwrite(ltlink href=uritostylecss + rel=stylesheet type=textcss gt)ltscriptgt
ltnoscriptgtltlink href=uritostylecss rel=stylesheet type=textcss gtltnoscriptgt
httpwalterebertcomplaygroundwpocriticalcsshttpwalterebertcomplaygroundwpocriticalcss
Speichern
ltscriptgtif (useLocalStorage ampamp version ampamp css)
var d = new Date() dsetTime(dgetTime() + (302460601000) ) documentcookie=version= + version + + expires= + dtoGMTString() + path=
windowlocalStoragesetItem(css css)
ltscriptgt
Inline-Bilder mit base64
ltdiv id=logogt ltimg src=dataimagepngbase64iVBORwhellip alt=Logo gtltdivgt
SVG mit PNG-Fallback
ltdiv id=logogt ltsvggt ltimage src=logopng gt ltsvggt ltdivgt
httpwalterebertcomplaygroundhtml5img-svg
httpcalendarperfplanetcom2011why-inlining-everything-is-not-the-answerhttpcalendarperfplanetcom2011why-inlining-everything-is-not-the-answer
httpsdevelopersgooglecomspeedpagespeedmodhttpwwwyoutubecomwatchv=uR5urTx8S4E
Media Queries
CSSmedia (max-height600px)
JavascriptwindowmatchMedia((max-height600px))
httpresponsiveimagesorg
ltpicturegt
ltsource media=(min-height 600px) srcset=bigjpggt ltsource srcset=smalljpggt ltimg src=fallbackjpg gt
ltpicturegt
ltimg
src=fallbackjpg
srcset=smalljpg 600h
largejpg
sizes=(max-height 480px) 50vh 100vh gt
Responsive Images
Walter Ebert
wltrdwalterebertde
slidesharenetwalterebert
httpworkingdraftde176httpworkingdraftde176
httpwwwfrontend-rheinmaindehttpwwwfrontend-rheinmainde
Subjektive Wahrnehmungder Ladegeschwindigkeit
httpwwwwebpagetestorgresult121212_RW_ED4
httpswwwyoutubecomwatchv=0wgDGTgOPdsampfeature=youtubeampt=9m55s
httpsdevelopersgooglecomspeedpagespeedinsightsurl=govdatade
Critical CSSltDOCTYPE htmlgtlthtmlgt ltheadgt ltstylegt Critical CSS ltstylegt ltheadgt ltbodygt ltp class=criticalgtAbove the fold contentltpgt lt-- the fold --gt
ltpgt Lorizzle cool dolizzle sit amizzle ltpgt
ltlink rel=stylesheet type=textcss href=uncriticalcss gt ltbodygtlthtmlgt
httpcss-trickscomauthoring-critical-fold-csshttpcss-trickscomauthoring-critical-fold-css
Critical ContentltDOCTYPE htmlgtlthtmlgt ltheadgt ltstylegt Critical CSS ltstylegt ltheadgt ltbodygt ltp class=criticalgtAbove the fold contentltpgt lt-- the fold --gt ltphp flush() gt
ltpgt Lorizzle cool dolizzle sit amizzle ltpgt
ltlink rel=stylesheet type=textcss href=uncriticalcss gt ltbodygtlthtmlgt
httpswwwfacebookcomnotesfacebook-engineeringbigpipe-pipelining-web-pages-for-high-performance389414033919
Javascript asynchron laden
ltscript src=examplecomscriptsjs async defergt
httpswwwigvitacom20140520script-injected-async-scripts-considered-harmful
Hack komplettes CSS einbetten
ltDOCTYPE htmlgtlthtmlgt ltheadgt ltstylegt ltphp echo file_get_contents(pathtostylecss) gt ltstylegt ltheadgt ltbodygt ltpgt Lorizzle cool dolizzle sit amizzle ltpgt ltbodygtlthtmlgt
Idee CSS in localStorage
ltDOCTYPE htmlgtlthtmlgt ltheadgt ltscriptgt var css = body color 333 background fff documentwrite(ltstylegt + css + ltstylegt) ltscriptgt ltheadgt ltbodygt ltpgtLorizzle cool dolizzle sit amizzle ltpgt ltscriptgt windowlocalStoragesetItem(css css) ltscriptgt ltbodygtlthtmlgt
LocalStorage-Support
ltscriptgtvar useLocalStorage = falseif (localStorage in window) useLocalStorage = trueltscriptgt
CSS ladenltscriptgtvar css = false version = falseltphp$file = pathtostylecss$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( x27x22) trim($css) ) echo css = $cssgtltscriptgt
CSS ausgebenltscriptgtif (css ampamp useLocalStorage) css = windowlocalStoragegetItem(css)
if (css) documentwrite(ltstylegt + css + ltstylegt) else documentwrite(ltlink href=uritostylecss + rel=stylesheet type=textcss gt)ltscriptgt
ltnoscriptgtltlink href=uritostylecss rel=stylesheet type=textcss gtltnoscriptgt
httpwalterebertcomplaygroundwpocriticalcsshttpwalterebertcomplaygroundwpocriticalcss
Speichern
ltscriptgtif (useLocalStorage ampamp version ampamp css)
var d = new Date() dsetTime(dgetTime() + (302460601000) ) documentcookie=version= + version + + expires= + dtoGMTString() + path=
windowlocalStoragesetItem(css css)
ltscriptgt
Inline-Bilder mit base64
ltdiv id=logogt ltimg src=dataimagepngbase64iVBORwhellip alt=Logo gtltdivgt
SVG mit PNG-Fallback
ltdiv id=logogt ltsvggt ltimage src=logopng gt ltsvggt ltdivgt
httpwalterebertcomplaygroundhtml5img-svg
httpcalendarperfplanetcom2011why-inlining-everything-is-not-the-answerhttpcalendarperfplanetcom2011why-inlining-everything-is-not-the-answer
httpsdevelopersgooglecomspeedpagespeedmodhttpwwwyoutubecomwatchv=uR5urTx8S4E
Media Queries
CSSmedia (max-height600px)
JavascriptwindowmatchMedia((max-height600px))
httpresponsiveimagesorg
ltpicturegt
ltsource media=(min-height 600px) srcset=bigjpggt ltsource srcset=smalljpggt ltimg src=fallbackjpg gt
ltpicturegt
ltimg
src=fallbackjpg
srcset=smalljpg 600h
largejpg
sizes=(max-height 480px) 50vh 100vh gt
Responsive Images
Walter Ebert
wltrdwalterebertde
slidesharenetwalterebert
httpwwwfrontend-rheinmaindehttpwwwfrontend-rheinmainde
Subjektive Wahrnehmungder Ladegeschwindigkeit
httpwwwwebpagetestorgresult121212_RW_ED4
httpswwwyoutubecomwatchv=0wgDGTgOPdsampfeature=youtubeampt=9m55s
httpsdevelopersgooglecomspeedpagespeedinsightsurl=govdatade
Critical CSSltDOCTYPE htmlgtlthtmlgt ltheadgt ltstylegt Critical CSS ltstylegt ltheadgt ltbodygt ltp class=criticalgtAbove the fold contentltpgt lt-- the fold --gt
ltpgt Lorizzle cool dolizzle sit amizzle ltpgt
ltlink rel=stylesheet type=textcss href=uncriticalcss gt ltbodygtlthtmlgt
httpcss-trickscomauthoring-critical-fold-csshttpcss-trickscomauthoring-critical-fold-css
Critical ContentltDOCTYPE htmlgtlthtmlgt ltheadgt ltstylegt Critical CSS ltstylegt ltheadgt ltbodygt ltp class=criticalgtAbove the fold contentltpgt lt-- the fold --gt ltphp flush() gt
ltpgt Lorizzle cool dolizzle sit amizzle ltpgt
ltlink rel=stylesheet type=textcss href=uncriticalcss gt ltbodygtlthtmlgt
httpswwwfacebookcomnotesfacebook-engineeringbigpipe-pipelining-web-pages-for-high-performance389414033919
Javascript asynchron laden
ltscript src=examplecomscriptsjs async defergt
httpswwwigvitacom20140520script-injected-async-scripts-considered-harmful
Hack komplettes CSS einbetten
ltDOCTYPE htmlgtlthtmlgt ltheadgt ltstylegt ltphp echo file_get_contents(pathtostylecss) gt ltstylegt ltheadgt ltbodygt ltpgt Lorizzle cool dolizzle sit amizzle ltpgt ltbodygtlthtmlgt
Idee CSS in localStorage
ltDOCTYPE htmlgtlthtmlgt ltheadgt ltscriptgt var css = body color 333 background fff documentwrite(ltstylegt + css + ltstylegt) ltscriptgt ltheadgt ltbodygt ltpgtLorizzle cool dolizzle sit amizzle ltpgt ltscriptgt windowlocalStoragesetItem(css css) ltscriptgt ltbodygtlthtmlgt
LocalStorage-Support
ltscriptgtvar useLocalStorage = falseif (localStorage in window) useLocalStorage = trueltscriptgt
CSS ladenltscriptgtvar css = false version = falseltphp$file = pathtostylecss$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( x27x22) trim($css) ) echo css = $cssgtltscriptgt
CSS ausgebenltscriptgtif (css ampamp useLocalStorage) css = windowlocalStoragegetItem(css)
if (css) documentwrite(ltstylegt + css + ltstylegt) else documentwrite(ltlink href=uritostylecss + rel=stylesheet type=textcss gt)ltscriptgt
ltnoscriptgtltlink href=uritostylecss rel=stylesheet type=textcss gtltnoscriptgt
httpwalterebertcomplaygroundwpocriticalcsshttpwalterebertcomplaygroundwpocriticalcss
Speichern
ltscriptgtif (useLocalStorage ampamp version ampamp css)
var d = new Date() dsetTime(dgetTime() + (302460601000) ) documentcookie=version= + version + + expires= + dtoGMTString() + path=
windowlocalStoragesetItem(css css)
ltscriptgt
Inline-Bilder mit base64
ltdiv id=logogt ltimg src=dataimagepngbase64iVBORwhellip alt=Logo gtltdivgt
SVG mit PNG-Fallback
ltdiv id=logogt ltsvggt ltimage src=logopng gt ltsvggt ltdivgt
httpwalterebertcomplaygroundhtml5img-svg
httpcalendarperfplanetcom2011why-inlining-everything-is-not-the-answerhttpcalendarperfplanetcom2011why-inlining-everything-is-not-the-answer
httpsdevelopersgooglecomspeedpagespeedmodhttpwwwyoutubecomwatchv=uR5urTx8S4E
Media Queries
CSSmedia (max-height600px)
JavascriptwindowmatchMedia((max-height600px))
httpresponsiveimagesorg
ltpicturegt
ltsource media=(min-height 600px) srcset=bigjpggt ltsource srcset=smalljpggt ltimg src=fallbackjpg gt
ltpicturegt
ltimg
src=fallbackjpg
srcset=smalljpg 600h
largejpg
sizes=(max-height 480px) 50vh 100vh gt
Responsive Images
Walter Ebert
wltrdwalterebertde
slidesharenetwalterebert
Subjektive Wahrnehmungder Ladegeschwindigkeit
httpwwwwebpagetestorgresult121212_RW_ED4
httpswwwyoutubecomwatchv=0wgDGTgOPdsampfeature=youtubeampt=9m55s
httpsdevelopersgooglecomspeedpagespeedinsightsurl=govdatade
Critical CSSltDOCTYPE htmlgtlthtmlgt ltheadgt ltstylegt Critical CSS ltstylegt ltheadgt ltbodygt ltp class=criticalgtAbove the fold contentltpgt lt-- the fold --gt
ltpgt Lorizzle cool dolizzle sit amizzle ltpgt
ltlink rel=stylesheet type=textcss href=uncriticalcss gt ltbodygtlthtmlgt
httpcss-trickscomauthoring-critical-fold-csshttpcss-trickscomauthoring-critical-fold-css
Critical ContentltDOCTYPE htmlgtlthtmlgt ltheadgt ltstylegt Critical CSS ltstylegt ltheadgt ltbodygt ltp class=criticalgtAbove the fold contentltpgt lt-- the fold --gt ltphp flush() gt
ltpgt Lorizzle cool dolizzle sit amizzle ltpgt
ltlink rel=stylesheet type=textcss href=uncriticalcss gt ltbodygtlthtmlgt
httpswwwfacebookcomnotesfacebook-engineeringbigpipe-pipelining-web-pages-for-high-performance389414033919
Javascript asynchron laden
ltscript src=examplecomscriptsjs async defergt
httpswwwigvitacom20140520script-injected-async-scripts-considered-harmful
Hack komplettes CSS einbetten
ltDOCTYPE htmlgtlthtmlgt ltheadgt ltstylegt ltphp echo file_get_contents(pathtostylecss) gt ltstylegt ltheadgt ltbodygt ltpgt Lorizzle cool dolizzle sit amizzle ltpgt ltbodygtlthtmlgt
Idee CSS in localStorage
ltDOCTYPE htmlgtlthtmlgt ltheadgt ltscriptgt var css = body color 333 background fff documentwrite(ltstylegt + css + ltstylegt) ltscriptgt ltheadgt ltbodygt ltpgtLorizzle cool dolizzle sit amizzle ltpgt ltscriptgt windowlocalStoragesetItem(css css) ltscriptgt ltbodygtlthtmlgt
LocalStorage-Support
ltscriptgtvar useLocalStorage = falseif (localStorage in window) useLocalStorage = trueltscriptgt
CSS ladenltscriptgtvar css = false version = falseltphp$file = pathtostylecss$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( x27x22) trim($css) ) echo css = $cssgtltscriptgt
CSS ausgebenltscriptgtif (css ampamp useLocalStorage) css = windowlocalStoragegetItem(css)
if (css) documentwrite(ltstylegt + css + ltstylegt) else documentwrite(ltlink href=uritostylecss + rel=stylesheet type=textcss gt)ltscriptgt
ltnoscriptgtltlink href=uritostylecss rel=stylesheet type=textcss gtltnoscriptgt
httpwalterebertcomplaygroundwpocriticalcsshttpwalterebertcomplaygroundwpocriticalcss
Speichern
ltscriptgtif (useLocalStorage ampamp version ampamp css)
var d = new Date() dsetTime(dgetTime() + (302460601000) ) documentcookie=version= + version + + expires= + dtoGMTString() + path=
windowlocalStoragesetItem(css css)
ltscriptgt
Inline-Bilder mit base64
ltdiv id=logogt ltimg src=dataimagepngbase64iVBORwhellip alt=Logo gtltdivgt
SVG mit PNG-Fallback
ltdiv id=logogt ltsvggt ltimage src=logopng gt ltsvggt ltdivgt
httpwalterebertcomplaygroundhtml5img-svg
httpcalendarperfplanetcom2011why-inlining-everything-is-not-the-answerhttpcalendarperfplanetcom2011why-inlining-everything-is-not-the-answer
httpsdevelopersgooglecomspeedpagespeedmodhttpwwwyoutubecomwatchv=uR5urTx8S4E
Media Queries
CSSmedia (max-height600px)
JavascriptwindowmatchMedia((max-height600px))
httpresponsiveimagesorg
ltpicturegt
ltsource media=(min-height 600px) srcset=bigjpggt ltsource srcset=smalljpggt ltimg src=fallbackjpg gt
ltpicturegt
ltimg
src=fallbackjpg
srcset=smalljpg 600h
largejpg
sizes=(max-height 480px) 50vh 100vh gt
Responsive Images
Walter Ebert
wltrdwalterebertde
slidesharenetwalterebert
httpwwwwebpagetestorgresult121212_RW_ED4
httpswwwyoutubecomwatchv=0wgDGTgOPdsampfeature=youtubeampt=9m55s
httpsdevelopersgooglecomspeedpagespeedinsightsurl=govdatade
Critical CSSltDOCTYPE htmlgtlthtmlgt ltheadgt ltstylegt Critical CSS ltstylegt ltheadgt ltbodygt ltp class=criticalgtAbove the fold contentltpgt lt-- the fold --gt
ltpgt Lorizzle cool dolizzle sit amizzle ltpgt
ltlink rel=stylesheet type=textcss href=uncriticalcss gt ltbodygtlthtmlgt
httpcss-trickscomauthoring-critical-fold-csshttpcss-trickscomauthoring-critical-fold-css
Critical ContentltDOCTYPE htmlgtlthtmlgt ltheadgt ltstylegt Critical CSS ltstylegt ltheadgt ltbodygt ltp class=criticalgtAbove the fold contentltpgt lt-- the fold --gt ltphp flush() gt
ltpgt Lorizzle cool dolizzle sit amizzle ltpgt
ltlink rel=stylesheet type=textcss href=uncriticalcss gt ltbodygtlthtmlgt
httpswwwfacebookcomnotesfacebook-engineeringbigpipe-pipelining-web-pages-for-high-performance389414033919
Javascript asynchron laden
ltscript src=examplecomscriptsjs async defergt
httpswwwigvitacom20140520script-injected-async-scripts-considered-harmful
Hack komplettes CSS einbetten
ltDOCTYPE htmlgtlthtmlgt ltheadgt ltstylegt ltphp echo file_get_contents(pathtostylecss) gt ltstylegt ltheadgt ltbodygt ltpgt Lorizzle cool dolizzle sit amizzle ltpgt ltbodygtlthtmlgt
Idee CSS in localStorage
ltDOCTYPE htmlgtlthtmlgt ltheadgt ltscriptgt var css = body color 333 background fff documentwrite(ltstylegt + css + ltstylegt) ltscriptgt ltheadgt ltbodygt ltpgtLorizzle cool dolizzle sit amizzle ltpgt ltscriptgt windowlocalStoragesetItem(css css) ltscriptgt ltbodygtlthtmlgt
LocalStorage-Support
ltscriptgtvar useLocalStorage = falseif (localStorage in window) useLocalStorage = trueltscriptgt
CSS ladenltscriptgtvar css = false version = falseltphp$file = pathtostylecss$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( x27x22) trim($css) ) echo css = $cssgtltscriptgt
CSS ausgebenltscriptgtif (css ampamp useLocalStorage) css = windowlocalStoragegetItem(css)
if (css) documentwrite(ltstylegt + css + ltstylegt) else documentwrite(ltlink href=uritostylecss + rel=stylesheet type=textcss gt)ltscriptgt
ltnoscriptgtltlink href=uritostylecss rel=stylesheet type=textcss gtltnoscriptgt
httpwalterebertcomplaygroundwpocriticalcsshttpwalterebertcomplaygroundwpocriticalcss
Speichern
ltscriptgtif (useLocalStorage ampamp version ampamp css)
var d = new Date() dsetTime(dgetTime() + (302460601000) ) documentcookie=version= + version + + expires= + dtoGMTString() + path=
windowlocalStoragesetItem(css css)
ltscriptgt
Inline-Bilder mit base64
ltdiv id=logogt ltimg src=dataimagepngbase64iVBORwhellip alt=Logo gtltdivgt
SVG mit PNG-Fallback
ltdiv id=logogt ltsvggt ltimage src=logopng gt ltsvggt ltdivgt
httpwalterebertcomplaygroundhtml5img-svg
httpcalendarperfplanetcom2011why-inlining-everything-is-not-the-answerhttpcalendarperfplanetcom2011why-inlining-everything-is-not-the-answer
httpsdevelopersgooglecomspeedpagespeedmodhttpwwwyoutubecomwatchv=uR5urTx8S4E
Media Queries
CSSmedia (max-height600px)
JavascriptwindowmatchMedia((max-height600px))
httpresponsiveimagesorg
ltpicturegt
ltsource media=(min-height 600px) srcset=bigjpggt ltsource srcset=smalljpggt ltimg src=fallbackjpg gt
ltpicturegt
ltimg
src=fallbackjpg
srcset=smalljpg 600h
largejpg
sizes=(max-height 480px) 50vh 100vh gt
Responsive Images
Walter Ebert
wltrdwalterebertde
slidesharenetwalterebert
httpswwwyoutubecomwatchv=0wgDGTgOPdsampfeature=youtubeampt=9m55s
httpsdevelopersgooglecomspeedpagespeedinsightsurl=govdatade
Critical CSSltDOCTYPE htmlgtlthtmlgt ltheadgt ltstylegt Critical CSS ltstylegt ltheadgt ltbodygt ltp class=criticalgtAbove the fold contentltpgt lt-- the fold --gt
ltpgt Lorizzle cool dolizzle sit amizzle ltpgt
ltlink rel=stylesheet type=textcss href=uncriticalcss gt ltbodygtlthtmlgt
httpcss-trickscomauthoring-critical-fold-csshttpcss-trickscomauthoring-critical-fold-css
Critical ContentltDOCTYPE htmlgtlthtmlgt ltheadgt ltstylegt Critical CSS ltstylegt ltheadgt ltbodygt ltp class=criticalgtAbove the fold contentltpgt lt-- the fold --gt ltphp flush() gt
ltpgt Lorizzle cool dolizzle sit amizzle ltpgt
ltlink rel=stylesheet type=textcss href=uncriticalcss gt ltbodygtlthtmlgt
httpswwwfacebookcomnotesfacebook-engineeringbigpipe-pipelining-web-pages-for-high-performance389414033919
Javascript asynchron laden
ltscript src=examplecomscriptsjs async defergt
httpswwwigvitacom20140520script-injected-async-scripts-considered-harmful
Hack komplettes CSS einbetten
ltDOCTYPE htmlgtlthtmlgt ltheadgt ltstylegt ltphp echo file_get_contents(pathtostylecss) gt ltstylegt ltheadgt ltbodygt ltpgt Lorizzle cool dolizzle sit amizzle ltpgt ltbodygtlthtmlgt
Idee CSS in localStorage
ltDOCTYPE htmlgtlthtmlgt ltheadgt ltscriptgt var css = body color 333 background fff documentwrite(ltstylegt + css + ltstylegt) ltscriptgt ltheadgt ltbodygt ltpgtLorizzle cool dolizzle sit amizzle ltpgt ltscriptgt windowlocalStoragesetItem(css css) ltscriptgt ltbodygtlthtmlgt
LocalStorage-Support
ltscriptgtvar useLocalStorage = falseif (localStorage in window) useLocalStorage = trueltscriptgt
CSS ladenltscriptgtvar css = false version = falseltphp$file = pathtostylecss$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( x27x22) trim($css) ) echo css = $cssgtltscriptgt
CSS ausgebenltscriptgtif (css ampamp useLocalStorage) css = windowlocalStoragegetItem(css)
if (css) documentwrite(ltstylegt + css + ltstylegt) else documentwrite(ltlink href=uritostylecss + rel=stylesheet type=textcss gt)ltscriptgt
ltnoscriptgtltlink href=uritostylecss rel=stylesheet type=textcss gtltnoscriptgt
httpwalterebertcomplaygroundwpocriticalcsshttpwalterebertcomplaygroundwpocriticalcss
Speichern
ltscriptgtif (useLocalStorage ampamp version ampamp css)
var d = new Date() dsetTime(dgetTime() + (302460601000) ) documentcookie=version= + version + + expires= + dtoGMTString() + path=
windowlocalStoragesetItem(css css)
ltscriptgt
Inline-Bilder mit base64
ltdiv id=logogt ltimg src=dataimagepngbase64iVBORwhellip alt=Logo gtltdivgt
SVG mit PNG-Fallback
ltdiv id=logogt ltsvggt ltimage src=logopng gt ltsvggt ltdivgt
httpwalterebertcomplaygroundhtml5img-svg
httpcalendarperfplanetcom2011why-inlining-everything-is-not-the-answerhttpcalendarperfplanetcom2011why-inlining-everything-is-not-the-answer
httpsdevelopersgooglecomspeedpagespeedmodhttpwwwyoutubecomwatchv=uR5urTx8S4E
Media Queries
CSSmedia (max-height600px)
JavascriptwindowmatchMedia((max-height600px))
httpresponsiveimagesorg
ltpicturegt
ltsource media=(min-height 600px) srcset=bigjpggt ltsource srcset=smalljpggt ltimg src=fallbackjpg gt
ltpicturegt
ltimg
src=fallbackjpg
srcset=smalljpg 600h
largejpg
sizes=(max-height 480px) 50vh 100vh gt
Responsive Images
Walter Ebert
wltrdwalterebertde
slidesharenetwalterebert
httpsdevelopersgooglecomspeedpagespeedinsightsurl=govdatade
Critical CSSltDOCTYPE htmlgtlthtmlgt ltheadgt ltstylegt Critical CSS ltstylegt ltheadgt ltbodygt ltp class=criticalgtAbove the fold contentltpgt lt-- the fold --gt
ltpgt Lorizzle cool dolizzle sit amizzle ltpgt
ltlink rel=stylesheet type=textcss href=uncriticalcss gt ltbodygtlthtmlgt
httpcss-trickscomauthoring-critical-fold-csshttpcss-trickscomauthoring-critical-fold-css
Critical ContentltDOCTYPE htmlgtlthtmlgt ltheadgt ltstylegt Critical CSS ltstylegt ltheadgt ltbodygt ltp class=criticalgtAbove the fold contentltpgt lt-- the fold --gt ltphp flush() gt
ltpgt Lorizzle cool dolizzle sit amizzle ltpgt
ltlink rel=stylesheet type=textcss href=uncriticalcss gt ltbodygtlthtmlgt
httpswwwfacebookcomnotesfacebook-engineeringbigpipe-pipelining-web-pages-for-high-performance389414033919
Javascript asynchron laden
ltscript src=examplecomscriptsjs async defergt
httpswwwigvitacom20140520script-injected-async-scripts-considered-harmful
Hack komplettes CSS einbetten
ltDOCTYPE htmlgtlthtmlgt ltheadgt ltstylegt ltphp echo file_get_contents(pathtostylecss) gt ltstylegt ltheadgt ltbodygt ltpgt Lorizzle cool dolizzle sit amizzle ltpgt ltbodygtlthtmlgt
Idee CSS in localStorage
ltDOCTYPE htmlgtlthtmlgt ltheadgt ltscriptgt var css = body color 333 background fff documentwrite(ltstylegt + css + ltstylegt) ltscriptgt ltheadgt ltbodygt ltpgtLorizzle cool dolizzle sit amizzle ltpgt ltscriptgt windowlocalStoragesetItem(css css) ltscriptgt ltbodygtlthtmlgt
LocalStorage-Support
ltscriptgtvar useLocalStorage = falseif (localStorage in window) useLocalStorage = trueltscriptgt
CSS ladenltscriptgtvar css = false version = falseltphp$file = pathtostylecss$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( x27x22) trim($css) ) echo css = $cssgtltscriptgt
CSS ausgebenltscriptgtif (css ampamp useLocalStorage) css = windowlocalStoragegetItem(css)
if (css) documentwrite(ltstylegt + css + ltstylegt) else documentwrite(ltlink href=uritostylecss + rel=stylesheet type=textcss gt)ltscriptgt
ltnoscriptgtltlink href=uritostylecss rel=stylesheet type=textcss gtltnoscriptgt
httpwalterebertcomplaygroundwpocriticalcsshttpwalterebertcomplaygroundwpocriticalcss
Speichern
ltscriptgtif (useLocalStorage ampamp version ampamp css)
var d = new Date() dsetTime(dgetTime() + (302460601000) ) documentcookie=version= + version + + expires= + dtoGMTString() + path=
windowlocalStoragesetItem(css css)
ltscriptgt
Inline-Bilder mit base64
ltdiv id=logogt ltimg src=dataimagepngbase64iVBORwhellip alt=Logo gtltdivgt
SVG mit PNG-Fallback
ltdiv id=logogt ltsvggt ltimage src=logopng gt ltsvggt ltdivgt
httpwalterebertcomplaygroundhtml5img-svg
httpcalendarperfplanetcom2011why-inlining-everything-is-not-the-answerhttpcalendarperfplanetcom2011why-inlining-everything-is-not-the-answer
httpsdevelopersgooglecomspeedpagespeedmodhttpwwwyoutubecomwatchv=uR5urTx8S4E
Media Queries
CSSmedia (max-height600px)
JavascriptwindowmatchMedia((max-height600px))
httpresponsiveimagesorg
ltpicturegt
ltsource media=(min-height 600px) srcset=bigjpggt ltsource srcset=smalljpggt ltimg src=fallbackjpg gt
ltpicturegt
ltimg
src=fallbackjpg
srcset=smalljpg 600h
largejpg
sizes=(max-height 480px) 50vh 100vh gt
Responsive Images
Walter Ebert
wltrdwalterebertde
slidesharenetwalterebert
Critical CSSltDOCTYPE htmlgtlthtmlgt ltheadgt ltstylegt Critical CSS ltstylegt ltheadgt ltbodygt ltp class=criticalgtAbove the fold contentltpgt lt-- the fold --gt
ltpgt Lorizzle cool dolizzle sit amizzle ltpgt
ltlink rel=stylesheet type=textcss href=uncriticalcss gt ltbodygtlthtmlgt
httpcss-trickscomauthoring-critical-fold-csshttpcss-trickscomauthoring-critical-fold-css
Critical ContentltDOCTYPE htmlgtlthtmlgt ltheadgt ltstylegt Critical CSS ltstylegt ltheadgt ltbodygt ltp class=criticalgtAbove the fold contentltpgt lt-- the fold --gt ltphp flush() gt
ltpgt Lorizzle cool dolizzle sit amizzle ltpgt
ltlink rel=stylesheet type=textcss href=uncriticalcss gt ltbodygtlthtmlgt
httpswwwfacebookcomnotesfacebook-engineeringbigpipe-pipelining-web-pages-for-high-performance389414033919
Javascript asynchron laden
ltscript src=examplecomscriptsjs async defergt
httpswwwigvitacom20140520script-injected-async-scripts-considered-harmful
Hack komplettes CSS einbetten
ltDOCTYPE htmlgtlthtmlgt ltheadgt ltstylegt ltphp echo file_get_contents(pathtostylecss) gt ltstylegt ltheadgt ltbodygt ltpgt Lorizzle cool dolizzle sit amizzle ltpgt ltbodygtlthtmlgt
Idee CSS in localStorage
ltDOCTYPE htmlgtlthtmlgt ltheadgt ltscriptgt var css = body color 333 background fff documentwrite(ltstylegt + css + ltstylegt) ltscriptgt ltheadgt ltbodygt ltpgtLorizzle cool dolizzle sit amizzle ltpgt ltscriptgt windowlocalStoragesetItem(css css) ltscriptgt ltbodygtlthtmlgt
LocalStorage-Support
ltscriptgtvar useLocalStorage = falseif (localStorage in window) useLocalStorage = trueltscriptgt
CSS ladenltscriptgtvar css = false version = falseltphp$file = pathtostylecss$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( x27x22) trim($css) ) echo css = $cssgtltscriptgt
CSS ausgebenltscriptgtif (css ampamp useLocalStorage) css = windowlocalStoragegetItem(css)
if (css) documentwrite(ltstylegt + css + ltstylegt) else documentwrite(ltlink href=uritostylecss + rel=stylesheet type=textcss gt)ltscriptgt
ltnoscriptgtltlink href=uritostylecss rel=stylesheet type=textcss gtltnoscriptgt
httpwalterebertcomplaygroundwpocriticalcsshttpwalterebertcomplaygroundwpocriticalcss
Speichern
ltscriptgtif (useLocalStorage ampamp version ampamp css)
var d = new Date() dsetTime(dgetTime() + (302460601000) ) documentcookie=version= + version + + expires= + dtoGMTString() + path=
windowlocalStoragesetItem(css css)
ltscriptgt
Inline-Bilder mit base64
ltdiv id=logogt ltimg src=dataimagepngbase64iVBORwhellip alt=Logo gtltdivgt
SVG mit PNG-Fallback
ltdiv id=logogt ltsvggt ltimage src=logopng gt ltsvggt ltdivgt
httpwalterebertcomplaygroundhtml5img-svg
httpcalendarperfplanetcom2011why-inlining-everything-is-not-the-answerhttpcalendarperfplanetcom2011why-inlining-everything-is-not-the-answer
httpsdevelopersgooglecomspeedpagespeedmodhttpwwwyoutubecomwatchv=uR5urTx8S4E
Media Queries
CSSmedia (max-height600px)
JavascriptwindowmatchMedia((max-height600px))
httpresponsiveimagesorg
ltpicturegt
ltsource media=(min-height 600px) srcset=bigjpggt ltsource srcset=smalljpggt ltimg src=fallbackjpg gt
ltpicturegt
ltimg
src=fallbackjpg
srcset=smalljpg 600h
largejpg
sizes=(max-height 480px) 50vh 100vh gt
Responsive Images
Walter Ebert
wltrdwalterebertde
slidesharenetwalterebert
httpcss-trickscomauthoring-critical-fold-csshttpcss-trickscomauthoring-critical-fold-css
Critical ContentltDOCTYPE htmlgtlthtmlgt ltheadgt ltstylegt Critical CSS ltstylegt ltheadgt ltbodygt ltp class=criticalgtAbove the fold contentltpgt lt-- the fold --gt ltphp flush() gt
ltpgt Lorizzle cool dolizzle sit amizzle ltpgt
ltlink rel=stylesheet type=textcss href=uncriticalcss gt ltbodygtlthtmlgt
httpswwwfacebookcomnotesfacebook-engineeringbigpipe-pipelining-web-pages-for-high-performance389414033919
Javascript asynchron laden
ltscript src=examplecomscriptsjs async defergt
httpswwwigvitacom20140520script-injected-async-scripts-considered-harmful
Hack komplettes CSS einbetten
ltDOCTYPE htmlgtlthtmlgt ltheadgt ltstylegt ltphp echo file_get_contents(pathtostylecss) gt ltstylegt ltheadgt ltbodygt ltpgt Lorizzle cool dolizzle sit amizzle ltpgt ltbodygtlthtmlgt
Idee CSS in localStorage
ltDOCTYPE htmlgtlthtmlgt ltheadgt ltscriptgt var css = body color 333 background fff documentwrite(ltstylegt + css + ltstylegt) ltscriptgt ltheadgt ltbodygt ltpgtLorizzle cool dolizzle sit amizzle ltpgt ltscriptgt windowlocalStoragesetItem(css css) ltscriptgt ltbodygtlthtmlgt
LocalStorage-Support
ltscriptgtvar useLocalStorage = falseif (localStorage in window) useLocalStorage = trueltscriptgt
CSS ladenltscriptgtvar css = false version = falseltphp$file = pathtostylecss$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( x27x22) trim($css) ) echo css = $cssgtltscriptgt
CSS ausgebenltscriptgtif (css ampamp useLocalStorage) css = windowlocalStoragegetItem(css)
if (css) documentwrite(ltstylegt + css + ltstylegt) else documentwrite(ltlink href=uritostylecss + rel=stylesheet type=textcss gt)ltscriptgt
ltnoscriptgtltlink href=uritostylecss rel=stylesheet type=textcss gtltnoscriptgt
httpwalterebertcomplaygroundwpocriticalcsshttpwalterebertcomplaygroundwpocriticalcss
Speichern
ltscriptgtif (useLocalStorage ampamp version ampamp css)
var d = new Date() dsetTime(dgetTime() + (302460601000) ) documentcookie=version= + version + + expires= + dtoGMTString() + path=
windowlocalStoragesetItem(css css)
ltscriptgt
Inline-Bilder mit base64
ltdiv id=logogt ltimg src=dataimagepngbase64iVBORwhellip alt=Logo gtltdivgt
SVG mit PNG-Fallback
ltdiv id=logogt ltsvggt ltimage src=logopng gt ltsvggt ltdivgt
httpwalterebertcomplaygroundhtml5img-svg
httpcalendarperfplanetcom2011why-inlining-everything-is-not-the-answerhttpcalendarperfplanetcom2011why-inlining-everything-is-not-the-answer
httpsdevelopersgooglecomspeedpagespeedmodhttpwwwyoutubecomwatchv=uR5urTx8S4E
Media Queries
CSSmedia (max-height600px)
JavascriptwindowmatchMedia((max-height600px))
httpresponsiveimagesorg
ltpicturegt
ltsource media=(min-height 600px) srcset=bigjpggt ltsource srcset=smalljpggt ltimg src=fallbackjpg gt
ltpicturegt
ltimg
src=fallbackjpg
srcset=smalljpg 600h
largejpg
sizes=(max-height 480px) 50vh 100vh gt
Responsive Images
Walter Ebert
wltrdwalterebertde
slidesharenetwalterebert
Critical ContentltDOCTYPE htmlgtlthtmlgt ltheadgt ltstylegt Critical CSS ltstylegt ltheadgt ltbodygt ltp class=criticalgtAbove the fold contentltpgt lt-- the fold --gt ltphp flush() gt
ltpgt Lorizzle cool dolizzle sit amizzle ltpgt
ltlink rel=stylesheet type=textcss href=uncriticalcss gt ltbodygtlthtmlgt
httpswwwfacebookcomnotesfacebook-engineeringbigpipe-pipelining-web-pages-for-high-performance389414033919
Javascript asynchron laden
ltscript src=examplecomscriptsjs async defergt
httpswwwigvitacom20140520script-injected-async-scripts-considered-harmful
Hack komplettes CSS einbetten
ltDOCTYPE htmlgtlthtmlgt ltheadgt ltstylegt ltphp echo file_get_contents(pathtostylecss) gt ltstylegt ltheadgt ltbodygt ltpgt Lorizzle cool dolizzle sit amizzle ltpgt ltbodygtlthtmlgt
Idee CSS in localStorage
ltDOCTYPE htmlgtlthtmlgt ltheadgt ltscriptgt var css = body color 333 background fff documentwrite(ltstylegt + css + ltstylegt) ltscriptgt ltheadgt ltbodygt ltpgtLorizzle cool dolizzle sit amizzle ltpgt ltscriptgt windowlocalStoragesetItem(css css) ltscriptgt ltbodygtlthtmlgt
LocalStorage-Support
ltscriptgtvar useLocalStorage = falseif (localStorage in window) useLocalStorage = trueltscriptgt
CSS ladenltscriptgtvar css = false version = falseltphp$file = pathtostylecss$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( x27x22) trim($css) ) echo css = $cssgtltscriptgt
CSS ausgebenltscriptgtif (css ampamp useLocalStorage) css = windowlocalStoragegetItem(css)
if (css) documentwrite(ltstylegt + css + ltstylegt) else documentwrite(ltlink href=uritostylecss + rel=stylesheet type=textcss gt)ltscriptgt
ltnoscriptgtltlink href=uritostylecss rel=stylesheet type=textcss gtltnoscriptgt
httpwalterebertcomplaygroundwpocriticalcsshttpwalterebertcomplaygroundwpocriticalcss
Speichern
ltscriptgtif (useLocalStorage ampamp version ampamp css)
var d = new Date() dsetTime(dgetTime() + (302460601000) ) documentcookie=version= + version + + expires= + dtoGMTString() + path=
windowlocalStoragesetItem(css css)
ltscriptgt
Inline-Bilder mit base64
ltdiv id=logogt ltimg src=dataimagepngbase64iVBORwhellip alt=Logo gtltdivgt
SVG mit PNG-Fallback
ltdiv id=logogt ltsvggt ltimage src=logopng gt ltsvggt ltdivgt
httpwalterebertcomplaygroundhtml5img-svg
httpcalendarperfplanetcom2011why-inlining-everything-is-not-the-answerhttpcalendarperfplanetcom2011why-inlining-everything-is-not-the-answer
httpsdevelopersgooglecomspeedpagespeedmodhttpwwwyoutubecomwatchv=uR5urTx8S4E
Media Queries
CSSmedia (max-height600px)
JavascriptwindowmatchMedia((max-height600px))
httpresponsiveimagesorg
ltpicturegt
ltsource media=(min-height 600px) srcset=bigjpggt ltsource srcset=smalljpggt ltimg src=fallbackjpg gt
ltpicturegt
ltimg
src=fallbackjpg
srcset=smalljpg 600h
largejpg
sizes=(max-height 480px) 50vh 100vh gt
Responsive Images
Walter Ebert
wltrdwalterebertde
slidesharenetwalterebert
Javascript asynchron laden
ltscript src=examplecomscriptsjs async defergt
httpswwwigvitacom20140520script-injected-async-scripts-considered-harmful
Hack komplettes CSS einbetten
ltDOCTYPE htmlgtlthtmlgt ltheadgt ltstylegt ltphp echo file_get_contents(pathtostylecss) gt ltstylegt ltheadgt ltbodygt ltpgt Lorizzle cool dolizzle sit amizzle ltpgt ltbodygtlthtmlgt
Idee CSS in localStorage
ltDOCTYPE htmlgtlthtmlgt ltheadgt ltscriptgt var css = body color 333 background fff documentwrite(ltstylegt + css + ltstylegt) ltscriptgt ltheadgt ltbodygt ltpgtLorizzle cool dolizzle sit amizzle ltpgt ltscriptgt windowlocalStoragesetItem(css css) ltscriptgt ltbodygtlthtmlgt
LocalStorage-Support
ltscriptgtvar useLocalStorage = falseif (localStorage in window) useLocalStorage = trueltscriptgt
CSS ladenltscriptgtvar css = false version = falseltphp$file = pathtostylecss$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( x27x22) trim($css) ) echo css = $cssgtltscriptgt
CSS ausgebenltscriptgtif (css ampamp useLocalStorage) css = windowlocalStoragegetItem(css)
if (css) documentwrite(ltstylegt + css + ltstylegt) else documentwrite(ltlink href=uritostylecss + rel=stylesheet type=textcss gt)ltscriptgt
ltnoscriptgtltlink href=uritostylecss rel=stylesheet type=textcss gtltnoscriptgt
httpwalterebertcomplaygroundwpocriticalcsshttpwalterebertcomplaygroundwpocriticalcss
Speichern
ltscriptgtif (useLocalStorage ampamp version ampamp css)
var d = new Date() dsetTime(dgetTime() + (302460601000) ) documentcookie=version= + version + + expires= + dtoGMTString() + path=
windowlocalStoragesetItem(css css)
ltscriptgt
Inline-Bilder mit base64
ltdiv id=logogt ltimg src=dataimagepngbase64iVBORwhellip alt=Logo gtltdivgt
SVG mit PNG-Fallback
ltdiv id=logogt ltsvggt ltimage src=logopng gt ltsvggt ltdivgt
httpwalterebertcomplaygroundhtml5img-svg
httpcalendarperfplanetcom2011why-inlining-everything-is-not-the-answerhttpcalendarperfplanetcom2011why-inlining-everything-is-not-the-answer
httpsdevelopersgooglecomspeedpagespeedmodhttpwwwyoutubecomwatchv=uR5urTx8S4E
Media Queries
CSSmedia (max-height600px)
JavascriptwindowmatchMedia((max-height600px))
httpresponsiveimagesorg
ltpicturegt
ltsource media=(min-height 600px) srcset=bigjpggt ltsource srcset=smalljpggt ltimg src=fallbackjpg gt
ltpicturegt
ltimg
src=fallbackjpg
srcset=smalljpg 600h
largejpg
sizes=(max-height 480px) 50vh 100vh gt
Responsive Images
Walter Ebert
wltrdwalterebertde
slidesharenetwalterebert
Hack komplettes CSS einbetten
ltDOCTYPE htmlgtlthtmlgt ltheadgt ltstylegt ltphp echo file_get_contents(pathtostylecss) gt ltstylegt ltheadgt ltbodygt ltpgt Lorizzle cool dolizzle sit amizzle ltpgt ltbodygtlthtmlgt
Idee CSS in localStorage
ltDOCTYPE htmlgtlthtmlgt ltheadgt ltscriptgt var css = body color 333 background fff documentwrite(ltstylegt + css + ltstylegt) ltscriptgt ltheadgt ltbodygt ltpgtLorizzle cool dolizzle sit amizzle ltpgt ltscriptgt windowlocalStoragesetItem(css css) ltscriptgt ltbodygtlthtmlgt
LocalStorage-Support
ltscriptgtvar useLocalStorage = falseif (localStorage in window) useLocalStorage = trueltscriptgt
CSS ladenltscriptgtvar css = false version = falseltphp$file = pathtostylecss$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( x27x22) trim($css) ) echo css = $cssgtltscriptgt
CSS ausgebenltscriptgtif (css ampamp useLocalStorage) css = windowlocalStoragegetItem(css)
if (css) documentwrite(ltstylegt + css + ltstylegt) else documentwrite(ltlink href=uritostylecss + rel=stylesheet type=textcss gt)ltscriptgt
ltnoscriptgtltlink href=uritostylecss rel=stylesheet type=textcss gtltnoscriptgt
httpwalterebertcomplaygroundwpocriticalcsshttpwalterebertcomplaygroundwpocriticalcss
Speichern
ltscriptgtif (useLocalStorage ampamp version ampamp css)
var d = new Date() dsetTime(dgetTime() + (302460601000) ) documentcookie=version= + version + + expires= + dtoGMTString() + path=
windowlocalStoragesetItem(css css)
ltscriptgt
Inline-Bilder mit base64
ltdiv id=logogt ltimg src=dataimagepngbase64iVBORwhellip alt=Logo gtltdivgt
SVG mit PNG-Fallback
ltdiv id=logogt ltsvggt ltimage src=logopng gt ltsvggt ltdivgt
httpwalterebertcomplaygroundhtml5img-svg
httpcalendarperfplanetcom2011why-inlining-everything-is-not-the-answerhttpcalendarperfplanetcom2011why-inlining-everything-is-not-the-answer
httpsdevelopersgooglecomspeedpagespeedmodhttpwwwyoutubecomwatchv=uR5urTx8S4E
Media Queries
CSSmedia (max-height600px)
JavascriptwindowmatchMedia((max-height600px))
httpresponsiveimagesorg
ltpicturegt
ltsource media=(min-height 600px) srcset=bigjpggt ltsource srcset=smalljpggt ltimg src=fallbackjpg gt
ltpicturegt
ltimg
src=fallbackjpg
srcset=smalljpg 600h
largejpg
sizes=(max-height 480px) 50vh 100vh gt
Responsive Images
Walter Ebert
wltrdwalterebertde
slidesharenetwalterebert
Idee CSS in localStorage
ltDOCTYPE htmlgtlthtmlgt ltheadgt ltscriptgt var css = body color 333 background fff documentwrite(ltstylegt + css + ltstylegt) ltscriptgt ltheadgt ltbodygt ltpgtLorizzle cool dolizzle sit amizzle ltpgt ltscriptgt windowlocalStoragesetItem(css css) ltscriptgt ltbodygtlthtmlgt
LocalStorage-Support
ltscriptgtvar useLocalStorage = falseif (localStorage in window) useLocalStorage = trueltscriptgt
CSS ladenltscriptgtvar css = false version = falseltphp$file = pathtostylecss$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( x27x22) trim($css) ) echo css = $cssgtltscriptgt
CSS ausgebenltscriptgtif (css ampamp useLocalStorage) css = windowlocalStoragegetItem(css)
if (css) documentwrite(ltstylegt + css + ltstylegt) else documentwrite(ltlink href=uritostylecss + rel=stylesheet type=textcss gt)ltscriptgt
ltnoscriptgtltlink href=uritostylecss rel=stylesheet type=textcss gtltnoscriptgt
httpwalterebertcomplaygroundwpocriticalcsshttpwalterebertcomplaygroundwpocriticalcss
Speichern
ltscriptgtif (useLocalStorage ampamp version ampamp css)
var d = new Date() dsetTime(dgetTime() + (302460601000) ) documentcookie=version= + version + + expires= + dtoGMTString() + path=
windowlocalStoragesetItem(css css)
ltscriptgt
Inline-Bilder mit base64
ltdiv id=logogt ltimg src=dataimagepngbase64iVBORwhellip alt=Logo gtltdivgt
SVG mit PNG-Fallback
ltdiv id=logogt ltsvggt ltimage src=logopng gt ltsvggt ltdivgt
httpwalterebertcomplaygroundhtml5img-svg
httpcalendarperfplanetcom2011why-inlining-everything-is-not-the-answerhttpcalendarperfplanetcom2011why-inlining-everything-is-not-the-answer
httpsdevelopersgooglecomspeedpagespeedmodhttpwwwyoutubecomwatchv=uR5urTx8S4E
Media Queries
CSSmedia (max-height600px)
JavascriptwindowmatchMedia((max-height600px))
httpresponsiveimagesorg
ltpicturegt
ltsource media=(min-height 600px) srcset=bigjpggt ltsource srcset=smalljpggt ltimg src=fallbackjpg gt
ltpicturegt
ltimg
src=fallbackjpg
srcset=smalljpg 600h
largejpg
sizes=(max-height 480px) 50vh 100vh gt
Responsive Images
Walter Ebert
wltrdwalterebertde
slidesharenetwalterebert
LocalStorage-Support
ltscriptgtvar useLocalStorage = falseif (localStorage in window) useLocalStorage = trueltscriptgt
CSS ladenltscriptgtvar css = false version = falseltphp$file = pathtostylecss$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( x27x22) trim($css) ) echo css = $cssgtltscriptgt
CSS ausgebenltscriptgtif (css ampamp useLocalStorage) css = windowlocalStoragegetItem(css)
if (css) documentwrite(ltstylegt + css + ltstylegt) else documentwrite(ltlink href=uritostylecss + rel=stylesheet type=textcss gt)ltscriptgt
ltnoscriptgtltlink href=uritostylecss rel=stylesheet type=textcss gtltnoscriptgt
httpwalterebertcomplaygroundwpocriticalcsshttpwalterebertcomplaygroundwpocriticalcss
Speichern
ltscriptgtif (useLocalStorage ampamp version ampamp css)
var d = new Date() dsetTime(dgetTime() + (302460601000) ) documentcookie=version= + version + + expires= + dtoGMTString() + path=
windowlocalStoragesetItem(css css)
ltscriptgt
Inline-Bilder mit base64
ltdiv id=logogt ltimg src=dataimagepngbase64iVBORwhellip alt=Logo gtltdivgt
SVG mit PNG-Fallback
ltdiv id=logogt ltsvggt ltimage src=logopng gt ltsvggt ltdivgt
httpwalterebertcomplaygroundhtml5img-svg
httpcalendarperfplanetcom2011why-inlining-everything-is-not-the-answerhttpcalendarperfplanetcom2011why-inlining-everything-is-not-the-answer
httpsdevelopersgooglecomspeedpagespeedmodhttpwwwyoutubecomwatchv=uR5urTx8S4E
Media Queries
CSSmedia (max-height600px)
JavascriptwindowmatchMedia((max-height600px))
httpresponsiveimagesorg
ltpicturegt
ltsource media=(min-height 600px) srcset=bigjpggt ltsource srcset=smalljpggt ltimg src=fallbackjpg gt
ltpicturegt
ltimg
src=fallbackjpg
srcset=smalljpg 600h
largejpg
sizes=(max-height 480px) 50vh 100vh gt
Responsive Images
Walter Ebert
wltrdwalterebertde
slidesharenetwalterebert
CSS ladenltscriptgtvar css = false version = falseltphp$file = pathtostylecss$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( x27x22) trim($css) ) echo css = $cssgtltscriptgt
CSS ausgebenltscriptgtif (css ampamp useLocalStorage) css = windowlocalStoragegetItem(css)
if (css) documentwrite(ltstylegt + css + ltstylegt) else documentwrite(ltlink href=uritostylecss + rel=stylesheet type=textcss gt)ltscriptgt
ltnoscriptgtltlink href=uritostylecss rel=stylesheet type=textcss gtltnoscriptgt
httpwalterebertcomplaygroundwpocriticalcsshttpwalterebertcomplaygroundwpocriticalcss
Speichern
ltscriptgtif (useLocalStorage ampamp version ampamp css)
var d = new Date() dsetTime(dgetTime() + (302460601000) ) documentcookie=version= + version + + expires= + dtoGMTString() + path=
windowlocalStoragesetItem(css css)
ltscriptgt
Inline-Bilder mit base64
ltdiv id=logogt ltimg src=dataimagepngbase64iVBORwhellip alt=Logo gtltdivgt
SVG mit PNG-Fallback
ltdiv id=logogt ltsvggt ltimage src=logopng gt ltsvggt ltdivgt
httpwalterebertcomplaygroundhtml5img-svg
httpcalendarperfplanetcom2011why-inlining-everything-is-not-the-answerhttpcalendarperfplanetcom2011why-inlining-everything-is-not-the-answer
httpsdevelopersgooglecomspeedpagespeedmodhttpwwwyoutubecomwatchv=uR5urTx8S4E
Media Queries
CSSmedia (max-height600px)
JavascriptwindowmatchMedia((max-height600px))
httpresponsiveimagesorg
ltpicturegt
ltsource media=(min-height 600px) srcset=bigjpggt ltsource srcset=smalljpggt ltimg src=fallbackjpg gt
ltpicturegt
ltimg
src=fallbackjpg
srcset=smalljpg 600h
largejpg
sizes=(max-height 480px) 50vh 100vh gt
Responsive Images
Walter Ebert
wltrdwalterebertde
slidesharenetwalterebert
CSS ausgebenltscriptgtif (css ampamp useLocalStorage) css = windowlocalStoragegetItem(css)
if (css) documentwrite(ltstylegt + css + ltstylegt) else documentwrite(ltlink href=uritostylecss + rel=stylesheet type=textcss gt)ltscriptgt
ltnoscriptgtltlink href=uritostylecss rel=stylesheet type=textcss gtltnoscriptgt
httpwalterebertcomplaygroundwpocriticalcsshttpwalterebertcomplaygroundwpocriticalcss
Speichern
ltscriptgtif (useLocalStorage ampamp version ampamp css)
var d = new Date() dsetTime(dgetTime() + (302460601000) ) documentcookie=version= + version + + expires= + dtoGMTString() + path=
windowlocalStoragesetItem(css css)
ltscriptgt
Inline-Bilder mit base64
ltdiv id=logogt ltimg src=dataimagepngbase64iVBORwhellip alt=Logo gtltdivgt
SVG mit PNG-Fallback
ltdiv id=logogt ltsvggt ltimage src=logopng gt ltsvggt ltdivgt
httpwalterebertcomplaygroundhtml5img-svg
httpcalendarperfplanetcom2011why-inlining-everything-is-not-the-answerhttpcalendarperfplanetcom2011why-inlining-everything-is-not-the-answer
httpsdevelopersgooglecomspeedpagespeedmodhttpwwwyoutubecomwatchv=uR5urTx8S4E
Media Queries
CSSmedia (max-height600px)
JavascriptwindowmatchMedia((max-height600px))
httpresponsiveimagesorg
ltpicturegt
ltsource media=(min-height 600px) srcset=bigjpggt ltsource srcset=smalljpggt ltimg src=fallbackjpg gt
ltpicturegt
ltimg
src=fallbackjpg
srcset=smalljpg 600h
largejpg
sizes=(max-height 480px) 50vh 100vh gt
Responsive Images
Walter Ebert
wltrdwalterebertde
slidesharenetwalterebert
httpwalterebertcomplaygroundwpocriticalcsshttpwalterebertcomplaygroundwpocriticalcss
Speichern
ltscriptgtif (useLocalStorage ampamp version ampamp css)
var d = new Date() dsetTime(dgetTime() + (302460601000) ) documentcookie=version= + version + + expires= + dtoGMTString() + path=
windowlocalStoragesetItem(css css)
ltscriptgt
Inline-Bilder mit base64
ltdiv id=logogt ltimg src=dataimagepngbase64iVBORwhellip alt=Logo gtltdivgt
SVG mit PNG-Fallback
ltdiv id=logogt ltsvggt ltimage src=logopng gt ltsvggt ltdivgt
httpwalterebertcomplaygroundhtml5img-svg
httpcalendarperfplanetcom2011why-inlining-everything-is-not-the-answerhttpcalendarperfplanetcom2011why-inlining-everything-is-not-the-answer
httpsdevelopersgooglecomspeedpagespeedmodhttpwwwyoutubecomwatchv=uR5urTx8S4E
Media Queries
CSSmedia (max-height600px)
JavascriptwindowmatchMedia((max-height600px))
httpresponsiveimagesorg
ltpicturegt
ltsource media=(min-height 600px) srcset=bigjpggt ltsource srcset=smalljpggt ltimg src=fallbackjpg gt
ltpicturegt
ltimg
src=fallbackjpg
srcset=smalljpg 600h
largejpg
sizes=(max-height 480px) 50vh 100vh gt
Responsive Images
Walter Ebert
wltrdwalterebertde
slidesharenetwalterebert
Speichern
ltscriptgtif (useLocalStorage ampamp version ampamp css)
var d = new Date() dsetTime(dgetTime() + (302460601000) ) documentcookie=version= + version + + expires= + dtoGMTString() + path=
windowlocalStoragesetItem(css css)
ltscriptgt
Inline-Bilder mit base64
ltdiv id=logogt ltimg src=dataimagepngbase64iVBORwhellip alt=Logo gtltdivgt
SVG mit PNG-Fallback
ltdiv id=logogt ltsvggt ltimage src=logopng gt ltsvggt ltdivgt
httpwalterebertcomplaygroundhtml5img-svg
httpcalendarperfplanetcom2011why-inlining-everything-is-not-the-answerhttpcalendarperfplanetcom2011why-inlining-everything-is-not-the-answer
httpsdevelopersgooglecomspeedpagespeedmodhttpwwwyoutubecomwatchv=uR5urTx8S4E
Media Queries
CSSmedia (max-height600px)
JavascriptwindowmatchMedia((max-height600px))
httpresponsiveimagesorg
ltpicturegt
ltsource media=(min-height 600px) srcset=bigjpggt ltsource srcset=smalljpggt ltimg src=fallbackjpg gt
ltpicturegt
ltimg
src=fallbackjpg
srcset=smalljpg 600h
largejpg
sizes=(max-height 480px) 50vh 100vh gt
Responsive Images
Walter Ebert
wltrdwalterebertde
slidesharenetwalterebert
Inline-Bilder mit base64
ltdiv id=logogt ltimg src=dataimagepngbase64iVBORwhellip alt=Logo gtltdivgt
SVG mit PNG-Fallback
ltdiv id=logogt ltsvggt ltimage src=logopng gt ltsvggt ltdivgt
httpwalterebertcomplaygroundhtml5img-svg
httpcalendarperfplanetcom2011why-inlining-everything-is-not-the-answerhttpcalendarperfplanetcom2011why-inlining-everything-is-not-the-answer
httpsdevelopersgooglecomspeedpagespeedmodhttpwwwyoutubecomwatchv=uR5urTx8S4E
Media Queries
CSSmedia (max-height600px)
JavascriptwindowmatchMedia((max-height600px))
httpresponsiveimagesorg
ltpicturegt
ltsource media=(min-height 600px) srcset=bigjpggt ltsource srcset=smalljpggt ltimg src=fallbackjpg gt
ltpicturegt
ltimg
src=fallbackjpg
srcset=smalljpg 600h
largejpg
sizes=(max-height 480px) 50vh 100vh gt
Responsive Images
Walter Ebert
wltrdwalterebertde
slidesharenetwalterebert
SVG mit PNG-Fallback
ltdiv id=logogt ltsvggt ltimage src=logopng gt ltsvggt ltdivgt
httpwalterebertcomplaygroundhtml5img-svg
httpcalendarperfplanetcom2011why-inlining-everything-is-not-the-answerhttpcalendarperfplanetcom2011why-inlining-everything-is-not-the-answer
httpsdevelopersgooglecomspeedpagespeedmodhttpwwwyoutubecomwatchv=uR5urTx8S4E
Media Queries
CSSmedia (max-height600px)
JavascriptwindowmatchMedia((max-height600px))
httpresponsiveimagesorg
ltpicturegt
ltsource media=(min-height 600px) srcset=bigjpggt ltsource srcset=smalljpggt ltimg src=fallbackjpg gt
ltpicturegt
ltimg
src=fallbackjpg
srcset=smalljpg 600h
largejpg
sizes=(max-height 480px) 50vh 100vh gt
Responsive Images
Walter Ebert
wltrdwalterebertde
slidesharenetwalterebert
httpcalendarperfplanetcom2011why-inlining-everything-is-not-the-answerhttpcalendarperfplanetcom2011why-inlining-everything-is-not-the-answer
httpsdevelopersgooglecomspeedpagespeedmodhttpwwwyoutubecomwatchv=uR5urTx8S4E
Media Queries
CSSmedia (max-height600px)
JavascriptwindowmatchMedia((max-height600px))
httpresponsiveimagesorg
ltpicturegt
ltsource media=(min-height 600px) srcset=bigjpggt ltsource srcset=smalljpggt ltimg src=fallbackjpg gt
ltpicturegt
ltimg
src=fallbackjpg
srcset=smalljpg 600h
largejpg
sizes=(max-height 480px) 50vh 100vh gt
Responsive Images
Walter Ebert
wltrdwalterebertde
slidesharenetwalterebert
httpsdevelopersgooglecomspeedpagespeedmodhttpwwwyoutubecomwatchv=uR5urTx8S4E
Media Queries
CSSmedia (max-height600px)
JavascriptwindowmatchMedia((max-height600px))
httpresponsiveimagesorg
ltpicturegt
ltsource media=(min-height 600px) srcset=bigjpggt ltsource srcset=smalljpggt ltimg src=fallbackjpg gt
ltpicturegt
ltimg
src=fallbackjpg
srcset=smalljpg 600h
largejpg
sizes=(max-height 480px) 50vh 100vh gt
Responsive Images
Walter Ebert
wltrdwalterebertde
slidesharenetwalterebert
Media Queries
CSSmedia (max-height600px)
JavascriptwindowmatchMedia((max-height600px))
httpresponsiveimagesorg
ltpicturegt
ltsource media=(min-height 600px) srcset=bigjpggt ltsource srcset=smalljpggt ltimg src=fallbackjpg gt
ltpicturegt
ltimg
src=fallbackjpg
srcset=smalljpg 600h
largejpg
sizes=(max-height 480px) 50vh 100vh gt
Responsive Images
Walter Ebert
wltrdwalterebertde
slidesharenetwalterebert
httpresponsiveimagesorg
ltpicturegt
ltsource media=(min-height 600px) srcset=bigjpggt ltsource srcset=smalljpggt ltimg src=fallbackjpg gt
ltpicturegt
ltimg
src=fallbackjpg
srcset=smalljpg 600h
largejpg
sizes=(max-height 480px) 50vh 100vh gt
Responsive Images
Walter Ebert
wltrdwalterebertde
slidesharenetwalterebert
Walter Ebert
wltrdwalterebertde
slidesharenetwalterebert
