frontend usergroup rhein-main 1o.09.2014 walter ebert · pagespeed insights misst möglichkeiten...
TRANSCRIPT
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
- Slide 1
- Slide 2
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Slide 9
- Slide 10
- Slide 11
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
-
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
- Slide 1
- Slide 2
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Slide 9
- Slide 10
- Slide 11
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
-
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
- Slide 1
- Slide 2
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Slide 9
- Slide 10
- Slide 11
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
-
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
- Slide 1
- Slide 2
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Slide 9
- Slide 10
- Slide 11
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
-
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
- Slide 1
- Slide 2
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Slide 9
- Slide 10
- Slide 11
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
-
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
- Slide 1
- Slide 2
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Slide 9
- Slide 10
- Slide 11
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
-
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
- Slide 1
- Slide 2
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Slide 9
- Slide 10
- Slide 11
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
-
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
- Slide 1
- Slide 2
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Slide 9
- Slide 10
- Slide 11
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
-
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
- Slide 1
- Slide 2
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Slide 9
- Slide 10
- Slide 11
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
-
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
- Slide 1
- Slide 2
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Slide 9
- Slide 10
- Slide 11
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
-
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
- Slide 1
- Slide 2
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Slide 9
- Slide 10
- Slide 11
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
-
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
- Slide 1
- Slide 2
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Slide 9
- Slide 10
- Slide 11
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
-
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
- Slide 1
- Slide 2
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Slide 9
- Slide 10
- Slide 11
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
-
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
- Slide 1
- Slide 2
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Slide 9
- Slide 10
- Slide 11
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
-
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
- Slide 1
- Slide 2
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Slide 9
- Slide 10
- Slide 11
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
-
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
- Slide 1
- Slide 2
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Slide 9
- Slide 10
- Slide 11
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
-
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
- Slide 1
- Slide 2
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Slide 9
- Slide 10
- Slide 11
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
-
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
- Slide 1
- Slide 2
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Slide 9
- Slide 10
- Slide 11
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
-
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
- Slide 1
- Slide 2
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Slide 9
- Slide 10
- Slide 11
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
-
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
- Slide 1
- Slide 2
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Slide 9
- Slide 10
- Slide 11
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
-
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
- Slide 1
- Slide 2
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Slide 9
- Slide 10
- Slide 11
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
-
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
- Slide 1
- Slide 2
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Slide 9
- Slide 10
- Slide 11
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
-
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
- Slide 1
- Slide 2
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Slide 9
- Slide 10
- Slide 11
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
-
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
- Slide 1
- Slide 2
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Slide 9
- Slide 10
- Slide 11
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
-
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
- Slide 1
- Slide 2
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Slide 9
- Slide 10
- Slide 11
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
-
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
- Slide 1
- Slide 2
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Slide 9
- Slide 10
- Slide 11
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
-
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
- Slide 1
- Slide 2
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Slide 9
- Slide 10
- Slide 11
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
-
Walter Ebert
wltrdwalterebertde
slidesharenetwalterebert
- Slide 1
- Slide 2
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- Slide 8
- Slide 9
- Slide 10
- Slide 11
- Slide 12
- Slide 13
- Slide 14
- Slide 15
- Slide 16
- Slide 17
- Slide 18
- Slide 19
- Slide 20
- Slide 21
- Slide 22
- Slide 23
- Slide 24
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- Slide 32
-