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

<link rel="prefetch" href="/my-next-page.htm">

<link rel="prerender" href="http://mydomain.com/my-next-page.htm">

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); }
                    

<link rel="prefetch" href="sprite.png">

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)

<figure>
 <picture>
   <source srcset="/image.png" media="(min-width: 900px)">
   <source srcset="/image-240-180.jpg,
                   /image.jpg 2x" media="(min-width: 450px)">
   <img src="http://site.ru/image-120-90.jpg" srcset="/image-240-180.jpg 2x" alt="" title="" longdesc="">
  </picture>
 <figcaption>Signature</figcaption>
</figure>
                    

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

*{
    translateZ();
    translate3d();
}
                        

*{
    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!