Benjamin Jentsch & Elisabeth Engel

Website-Performance leicht gemacht

Download

https://medium.com/@samccone/performance-futures-bundling-281543d9a0d5

Normal

http://pishpeshuk.co.il/wp-content/uploads/2017/03/instagram-lie-photos-crop-slowlife-chompoo-baritone-fb.jpg

index-inline.css

serving static html

gulp

build task

inline-css-generated.hbs

server-side handlebars.java

index-inline.css

/* atoms */
@import "00-atoms/icons/icon";
@import "00-atoms/avatar/avatar";
@import "00-atoms/plate/plate";

/* molecules */
@import "01-molecules/content-meta/content-meta";
@import "01-molecules/primary-nav/primary-nav-inline";

/* organisms */
@import "02-organisms/masthead/masthead";
@import "02-organisms/plate-question-detail/plate-question-detail";

npm (package.json):

"build": "npm run build:css 
       && npm run build:css:inline 
       && [...]"

gulpfile.js:

writeFileSync('inline-css-generated.hbs', minCss);

...
handlebarsEngine.registerPartial(
  'inline-css-generated',
  readFileSync('inline-css-generated.hbs')
);

<link rel="preload" href="{{{ cssAssetPath }}}" as="style"
  onload="this.rel='stylesheet'"/>

Regular CSS

npm loadCss

head.hbs

Ladeverlauf auf einem Smartphone mit '3G'

Performance Tracking

webpagetest.org

calibreapp.com

speedcurve.com

Chrome Dev Tools

Performance Tab

Lighthouse

Fake it 'till you make it!

https://www.youtube.com/watch?v=v3iPrBrGSJM

Magisches Template

<section>

  {{#> loading-partial _show-until="loaded" }}

      {{> answer-skeleton }}
     
      {{#if answers.hasMany }}
        {{> answer-skeleton }}
      {{/if }}

  {{/loading-partial }}

  <gf-deferred-content hide-until="loaded">
    [ REAL ANSWERS ]
  </gf-deferred-content>

</section>

Magisches CSS

    @keyframes skeletonLoading {
    
      0%   {opacity: 0.5}
      50%  {opacity: 1}
      100% {opacity: 0.5}
    }

    .ContentMeta-author.is-loading {
      animation: skeletonLoading 2s infinite;
      background-color: var(--grey--lighter);
    }

Magisches CSS

.ContentBody:empty {

    animation: skeletonLoading 2s infinite;
    
    background-image:
      linear-gradient(var(--grey--lighter) 1.5rem, transparent 0),
      linear-gradient(var(--grey--lighter) 1.5rem, transparent 0),
      linear-gradient(var(--grey--lighter) 1.5rem, transparent 0),
      linear-gradient(var(--grey--lighter) 1.5rem, transparent 0),
      linear-gradient(var(--grey--lighter) 1.5rem, transparent 0);
    
    /* relative position from top left corner for each line */
    background-position:
      0 0.5rem,
      0 4.5rem,
      0 6.5rem,
      0 10.5rem,
      0 12.5rem;
    
    background-repeat: repeat-y;
    
    /* line width for each line */
    background-size:
      7em 100%,
      95% 100%,
      85% 100%,
      60% 100%,
      30% 100%;
    
    height: 15rem;
}

body {

 font-family: sans-serif;
 
 html.wf-active & {
   font-family: "Roboto", sans-serif;
 }
}

Inhalt

• http://cloudcannon.com/deconstructions/2014/11/15/facebook-content-placeholder-deconstruction.html
• https://www.sitepoint.com/how-to-speed-up-your-ux-with-skeleton-screens/
• http://dev.mobify.com/blog/beginners-guide-to-perceived-performance/
• http://www.lukew.com/ff/entry.asp?1797

• http://codepen.io/Mestika/pen/ByNYBa
• http://codepen.io/basham/pen/cGJjn
• http://codepen.io/oslego/pen/XdvWmd

Code

Alexander Krist: www.magic-theater.de

Kontakt:

benjamin.jentsch@gutefrage.net

elisabeth.engel@gutefrage.net

@_lizzelo_

slides.com/franklin_35/page-speeder