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.


  • 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">
                        <span class="navigation-list-item-another-span-because-of-vertical-alignment" style="vertical-align: middle">
  • 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


  • #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 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


  • 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


  • 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

    <!-- 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="">