Front End Optimization

5 min November 17, 2017

This is a list of my notes about front end optimization focused especially on css, javascript, images and fonts. It is for you now and for me sometime in the future.

Html

  • Avoid of the following code

<div id="wrapper">
    <nav id="navigation">
        <ul id="navigation-list">
            <li class="navigation-list-item">
                <a class="navigation-list-item-link">
                    <i class="navigation-list-item-omg-are-we-already-there?">
                        <span class="navigation-list-item-another-span-because-of-vertical-alignment" style="vertical-align: middle">
                            WTF
                        </span>
                        <span class="navigation-list-item-another-span-because-of-vertical-alignment" style="vertical-align: middle">
                            HTML
                        </span>
                    </i>
                </a>'
            </li>     
        </ul>
    </nav>
</div>
  • Use link elements with preload and prefetch attributes
  • Nav, footer, header, main, article and tags like these are useless but they are better than div with the same id or class
  • Pages should not contain more than 1500 DOM nodes

Css

  • #do-not__use--selectors__like--This
  • Css should be mobile first
  • Keep css selectors specificity on the lowest level and try not to use the !important keyword
  • Prefer classes combination before id and element selectors
  • Separate css into smallest components as possible for more reusable code. Page !== Component
  • Separate css into files according to components or styled blocks names ("Sign in form" => "forms/sign-in.css")
  • Use autoprefixer
  • Minimize your stylesheet
  • Separate css into files according to devices or use some compiler for separating css. You don't need css for resolution > 1920* on mobile devices.

<link rel="stylesheet" href="small.css"/>
<link rel="stylesheet" media='screen and (min-width: 650px)' href="medium.css"/>
<link rel="stylesheet" media='screen and (min-width: 1024px)' href="large.css"/>
  • Prefer local sources instead of CDN
  • When possible, add bundles with size up to 50 kb directly into style tag. It is a size of one poorly optimized image. It is fast. Google does it. Amp does it (but be careful with that because it can increase the page size)
  • Use flexbox
  • Create a THEME (custom css "framework" with pre-styled inputs, forms, tables, useful classes like text-color-green, button-orange, etc). It is better and faster than style each button, input, link and form over and over again

Javascript

  • Javascript suck so keep it simple. It can cause various, wtf problems. Avoid of writing tons of unnecessary javascript just because of some nice bouncing effect
  • When you must write some javascript, prefer simple libraries => for example jQuery
  • Minimize your script
  • Prefer local sources instead of CDN
  • Before using some external plugin, check its size, compatibility and if is maintained If the plugin is too large or complicated write your own
  • Separate javascript into modules and create bundles separately for each page. Never load one big big bundle
  • The same rule as in css. When some bundle is up to 50kb, add it directly into a script tag
  • Use async and defer attributes for scripts that don't need to be loaded and executed immediately
  • Avoid of inline javascript somewhere in the middle of the page. When possible, try to put your scripts on the end of the page right before the closing body tag

Fonts

  • Use woff2 format with woff fallback
  • Customize your font. It is not necessary to load all possible characters and font styles on your website
  • Font awesome is a great icon font but rather than using the whole font because of ten nice icons, try to create your own for example in icomoon app

Images

  • For logos and some simple images, that should be nice and responsive use svg format
  • Use picture tag, with source elements and img tag as a fallback
  • Properly size your images - when possible, generate your images after every 200 pixels
  • Optimize your images. Is possible to decrease 5 mb (1920*1080) beast down to 300 kb. You can use for example tiny png or jpeg optim
  • Prefer webp image format when possible
  • Don't forget on lazy loading

<picture>
    <!-- Webp images -->
    <source media="(max-width: 650px)" srcset="small.webp" type="image/webp">
    <source media="(max-width: 1024px)" srcset="medium.webp" type="image/webp">
    <source srcset="large.webp" type="image/webp">
    
    <!-- Jpg images for browsers without webp support -->
    <source media="(max-width: 650px)" srcset="small.jpg" type="image/jpeg">
    <source media="(max-width: 1024px)" srcset="medium.jpg" type="image/jpeg">
    <source srcset="large.jpg" type="image/jpeg">
    
    <!-- Fallback for old browsers -->
    <img data-src="large.jpg" src="loading.gif" class="lazyload" alt="">
</picture>