Static Front End Optimization

Maksym Kolisnyk

Principles

  • Styles at the top, scripts at the bottom
  • Make fewer requests
  • Maximum parallelization

Performance principles

  • Place links to styles at the top of the page
  • Place JavaScript below of the page
  • Do as few HTTP requests as possible
  • Distributing resources from multiple domains, you can increase the number of resources that the browser will load in parallel

DNS Prefetching

Page Prerendering

Resource preloading


.page-home         { background-image:url(home.jpg); }
.page-about        { background-image:url(about.jpg); }
.page-portfolio    { background-image:url(portfolio.jpg); }
.page-contact      { background-image:url(contact.jpg); }

Solution

Minisification and gzip

Optimization of images

Sprites

Optimization of images

Retina (CSS Path)


@media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
  .icon {
    background-image: url(example@2x.png);
  }
}

Optimization of images

Retina (HTML Path)




 
   
   
   
  
 
Signature

Optimization of images

Progressive jpegs

How browser works

  • HTML Parsing
  • CSS Parsing
  • Dom Tree
  • Render Tree
  • Linkage
  • Rendering

Compositing (CPU)

  • Page is divided into layers
  • Layers are rasterized
  • Layers are displayed on the screen

GPU Accelerating Composition

  • Page is divided into layers
  • Layers are rasterized into textures
  • Textures are loaded into the GPU
  • Compositor instructs the GPU how to collect the final image

GPU Rasterization Before/After

Layering conditions

  • 3D transform
  • <video>
  • <canvas>
  • plugins (flash, silverlight)
  • css animations opacity or transform
  • css filters

Debug

  • Desktop Webkit: Show composited layer borders
  • iOS: XCode, connect to Mac
  • Android: connect to Mac

Layers for animations

  • opacity
  • transform
  • filter

Advice

  • GPU like cash
  • Prepare the texture in advance
  • Do not create extra layers

Animation on steroids

Old school


*{
    translateZ();
    translate3d();
}

New generation


*{
    will-change: transform, opacity;
}

Do not use


*, *::before, *::after {
    will-change: all;
}

It's useless


.element:hover {
    will-change: transform;
    transition: transform 2s;
    transform: rotate(30deg) scale(1.5);
}

Click event


.element { transition: transform 1s ease-out; }

.element:hover { will-change: transform; }

.element:active { transform: rotateY(180deg); }
                    

.element { transition: opacity .3s linear; }

.ancestor:hover .element { will-change: opacity; }

.element:hover { opacity: .5; }

Remove will-change


var el = document.getElementById('element');
el.addEventListener('mouseenter', hintBrowser);
el.addEventListener('animationEnd', removeHint);
function hintBrowser() {
    this.style.willChange = 'transform, opacity';
}
function removeHint() {
    this.style.willChange = 'auto';
}

Thank you!