https://unsplash.com/photos/scBTgeG5K5c
Werd ich das überleben?
Der Vortrag beginnt in 5 Minuten. Ich mach mir echt Sorgen.
https://unsplash.com/photos/p3Pj7jOYvnM
https://www.flickr.com/photos/blakespot/46706560791
https://unsplash.com/photos/nwWUBsW6ud4
https://www.pinterest.de/pin/91760911136468054/
https://unsplash.com/photos/9pw4TKvT3po
https://www.giantbomb.com/age-of-empires-ii-the-age-of-kings/3030-2846/
https://www.pugetsystems.com/labs/support-software/How-to-Install-Windows-XP-36/
https://loading.io/spinner/
http://mercury.io/blog/the-psychology-of-waiting-loading-animations-and-facebook
http://assets.eli.wtf/talks/perceived-perf-2018/demos/progress.html
http://assets.eli.wtf/talks/perceived-perf-2018/demos/progress.html
https://www.waitamoment.co.uk/museums-monuments/walt-disney-world/walt-disney-world-crowds
https://www.codeproject.com/Articles/1185064/Remote-File-System-viewing-and-file-transfer-using
https://xkcd.com/612/
The best progress bar is
no progress bar.
Jede ausreichend fortschrittliche Technologie ist von Magie nicht zu unterscheiden.
https://vimeo.com/3957551
Deceleration
https://www.youtube.com/watch?v=lc_APy75e6o
http://pishpeshuk.co.il/wp-content/uploads/2017/03/instagram-lie-photos-crop-slowlife-chompoo-baritone-fb.jpg
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
[NAVIGATION]
</header>
...
</body>
</html> <html>
<head>
<style>
[INLINE CSS]
</style>
</head>
<body>
<header>
[NAVIGATION]
</header>
...
<script>
[MAGIC SCRIPT TO LOAD FULL CSS]
</script>
<noscript>
<link rel="stylesheet" href="styles.css">
</noscript>
</body>
</html> https://www.sitelocity.com/critical-path-css-generator
<style>@font-face{font-family:'Lato';src:url(/fonts/LatoLatin-Bold.eot);src:url(/fonts/LatoLatin-Bold.eot?#iefix) format("embedded-opentype"),url(/fonts/LatoLatin-Bold.woff2) format("woff2"),url(/fonts/LatoLatin-Bold.woff) format("woff"),url(/fonts/LatoLatin-Bold.ttf) format("truetype");font-style:normal;font-weight:600;text-rendering:optimizeLegibility}@font-face{font-family:'Lato';src:url(/fonts/LatoLatin-Black.eot);src:url(/fonts/LatoLatin-Black.eot?#iefix) format("embedded-opentype"),url(/fonts/LatoLatin-Black.woff2) format("woff2"),url(/fonts/LatoLatin-Black.woff) format("woff"),url(/fonts/LatoLatin-Black.ttf) format("truetype");font-style:normal;font-weight:900;text-rendering:optimizeLegibility}@font-face{font-family:'Lato';src:url(/fonts/LatoLatin-Regular.eot);src:url(/fonts/LatoLatin-Regular.eot?#iefix) format("embedded-opentype"),url(/fonts/LatoLatin-Regular.woff2) format("woff2"),url(/fonts/LatoLatin-Regular.woff) format("woff"),url(/fonts/LatoLatin-Regular.ttf) format("truetype");font-style:normal;font-weight:400;text-rendering:optimizeLegibility}@font-face{font-family:'Lato';src:url(/fonts/LatoLatin-Italic.eot);src:url(/fonts/LatoLatin-Italic.eot?#iefix) format("embedded-opentype"),url(/fonts/LatoLatin-Italic.woff2) format("woff2"),url(/fonts/LatoLatin-Italic.woff) format("woff"),url(/fonts/LatoLatin-Italic.ttf) format("truetype");font-style:italic;font-weight:400;text-rendering:optimizeLegibility}*{margin:0;padding:0;border:none;outline:none;list-style:none;text-decoration:none;background-repeat:no-repeat;box-sizing:border-box}html{font-size:10px;height:100%}@media only screen and (max-width:800px){html{font-size:8px}}body{font-family:'Lato',sans-serif;line-height:1.5;font-weight:400;background:white;width:100%;height:100%;text-align:center}.app_header{width:100%;height:80px;position:relative;max-width:1280px;margin:0 auto;text-align:left}.app_header .app_logo{display:block;width:200px;position:absolute;left:20px;top:22px}.app_header .app_logo a{width:100%;display:block;width:auto;position:relative;padding-top:11.8%;background-image:url(/assets/logo-c48a8c5d0d50eb87f6b1a99bb53959f3eaf46475e42d3cc236db4a8898a54de6.svg);background-size:100%}@media only screen and (max-width:800px){.app_header .app_logo{left:15px}}.app_header .nav_main{padding-top:20px;font-size:16px;line-height:40px;text-align:center;height:80px;width:100%}.app_header .nav_main ul{width:100%}.app_header .nav_main ul li{display:inline-block;padding:0 8px}.app_header .nav_main ul li a{color:#111;display:block;font-weight:600;border-bottom:4px solid white}.app_header .lang{position:absolute;right:20px;top:20px;background:rgba(0,0,0,.3);border-radius:20px}.app_header .lang li{display:inline-block;border-radius:20px}.app_header .lang li a{color:white}.app_header .lang li.active{background:#28C8FF}.app_header .lang li+li{margin-left:-3px}.app_header .lang a{font-size:14px;font-weight:600;display:block;height:40px;width:40px;line-height:40px;text-align:center;color:#111}@media only screen and (max-width:1070px){.app_header .nav_main{padding-top:60px;padding-left:7px;text-align:left}}@media only screen and (max-width:990px){.app_header{height:80px}.app_header .app_logo{width:160px}}@media only screen and (max-width:800px){.app_header{height:80px}.app_header .lang{top:14px}.app_header .nav_main{font-size:3vw}}main{text-align:center;font-size:1.6rem;padding:40px 0 0 0;min-height:100%;max-width:100%}main h1{font-size:4rem;text-align:center;margin:2rem 0 1rem 0;line-height:1.1;font-family:'Lato',sans-serif;font-weight:900}@media only screen and (max-width:800px){main h1{font-size:3rem;margin-top:2rem}}main h2{font-size:2.8rem;text-align:center;margin:1rem 0 2rem 0;line-height:1.1;font-family:'Lato',sans-serif;font-weight:900}@media only screen and (max-width:800px){main h2{font-size:2rem;margin-top:2rem}}main p.subtitle{text-align:center;font-size:2rem}main section{width:100%;max-width:720px;margin:0 auto;text-align:left;padding:0 20px}main section.section--wider{max-width:800px}main ul,main p{margin-bottom:1em}main strong{font-weight:600}.color.one{color:#28C8FF}ul#service-list{overflow:hidden;background-image:url(/assets/circle-a14b0fcaa734d509df6143b83fc36136d5a7ae91432b8c0565e1f584e645393c.svg);background-position:50% 50%;margin:40px 0 0 0;max-width:800px}ul#service-list li{float:left;width:50%}ul#service-list li h2{margin:0 0 4px 0;white-space:nowrap;font-size:2rem;padding:3px 0 0 0}ul#service-list li:nth-child(1){text-align:right;padding-right:110px}ul#service-list li:nth-child(1) h2{text-align:right}@media only screen and (max-width:800px){ul#service-list{background-position:50% 0;background-size:50% auto;padding-top:50vw;margin-left:10px;margin-right:10px}ul#service-list li{padding:0 10px 0 0!important;text-align:left!important}ul#service-list li h2{text-align:left!important}}.founder-quote{max-width:1040px;margin-bottom:40px;margin-top:80px}.founder-quote:before,.founder-quote:after{background-repeat:no-repeat;background-image:url(/assets/hr-508d753dbaf65d35fdfc0d227e29072b08e4e9ca17cc0e0f2814f79164da34b6.svg);background-size:106px auto;background-position:50% 55%;content:'';display:block;height:60px}.founder-quote__quote{color:#28A2FF;font-size:2.6rem;line-height:1.3;padding:0 16px 32px 16px;margin:0}@media only screen and (max-width:800px){.founder-quote__quote{margin-left:10px;margin-right:10px}.founder-quote__quote br{display:none}}.founder-quote__cite{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.founder-quote__founders{text-align:center;min-width:292px}.founder-quote__team{-webkit-box-flex:1;-ms-flex:1 1 50%;flex:1 1 50%;padding:6px 6px 24px 6px}.founder-quote__team--left{text-align:right}.founder-quote__team--right{text-align:left}@media only screen and (max-width:800px){.founder-quote__team{display:none}}.founder-quote__team-member{display:inline-block}.founder-quote__team-member-image{border-radius:35px;width:70px;height:70px;border:1px solid #eee}@media only screen and (max-width:990px){.founder-quote__team-member-image{border-radius:25px;width:50px;height:50px}}.founder-quote__image{background-image:url(/assets/founders-75272c2285fd183b3dd37e6788070d66861b79e3da0208a0bdc960146f5a8049.png);background-size:292px 160px;background-position:50% 0%;height:160px}.founder-quote__signatures{text-indent:-999em;background-image:url(/assets/founders-c34f2eed2664c511b6ab837bce70f01b13dc27931166466185c499daf84d03a5.svg);background-size:292px 47px;background-position:50% 0%;height:47px;margin-top:-16px;margin-bottom:-5px}.founder-quote__position{font-style:italic;font-size:1.2rem}.action_index .app_header{z-index:4}.action_index main{overflow:auto;margin-top:-80px}.action_index main #service-list{margin-bottom:40px;margin-top:20px}.action_index main section:not(.primary){padding:20px 0}</style> @import "logo-inline";
@import "navigation-inline";
@import "searchbar-inline";
@import "top-content-inline"; @import "[everything-else]";
@import "footer";
https://slides.com/franklin_35/page-speeder#/
https://slides.com/franklin_35/page-speeder/
https://www.tandemseven.com/blog/how-to-use-disneys-principles-of-animation-to-improve-ux/
https://www.tandemseven.com/blog/how-to-use-disneys-principles-of-animation-to-improve-ux/
https://www.tandemseven.com/blog/how-to-use-disneys-principles-of-animation-to-improve-ux/
<section>
<skeleton-content>
[ SKELETON ]
</skeleton-content>
<real-content style="display:none">
[ REAL CONTENT ]
</real-content>
</section>
@keyframes skeletonLoading {
0% {opacity: 0.5}
50% {opacity: 1}
100% {opacity: 0.5}
}
skeleton-content .bar {
display: block;
width: 50rem;
height: 5rem;
animation: skeletonLoading 2s infinite;
background-color: lightgrey;
}https://www.youtube.com
https://unsplash.com/photos/Xbh_OGLRfUM
Der Ball war so schnell, praktisch unsichtbar.
http://www.syntagm.co.uk/design/articles/cb.htm
5 Sekunden zum Hochfahren
https://unsplash.com/photos/tYvUNvcGa-c
5 Sekunden für ein fertiges Chili con Carne
https://de.wikipedia.org/wiki/Datei:Bowl_of_chili.jpg
https://www.moneypeach.com/free-use-coin-machines-near-me/
Ja klar, keine Sorge.
Und falls nicht, hast Du meine Nummer.
Nein, noch besser: genieß den Himmel!
Werd ich das überleben?
Der Vortrag beginnt in 5 Minuten. Ich mach mir echt Sorgen.
https://unsplash.com/photos/sAabA4Z8OfU
By Elisabeth Engel
Niemand wartet gerne. Schon gar nicht auf einen Server, der mal wieder zu langsam ist. Am wenigsten Ihre Kunden. Doch was können Sie tun, wenn technisch keine Verbesserung in Sicht ist? Könnten Sie Ihre Applikation nicht einfach schneller erscheinen lassen als sie wirklich ist und obendrein die Wartezeit noch geschickt zu Ihren Gunsten nutzen?
