Front End Optimization Checklist

Nov 10 2017- POSTED BY projecth 0 Comment

 

  1. Load Time Setup

    Have all of the site – or at least most of it – loaded within 2 to 4 seconds max.

    • Perceived performance
      • Load only essentials first, then load the rest progressively with Lazy Load, or on demand.
    • First meaningful paint
      Prepare Above the Fold (AtF) necessary inline styling and images.

      • Determine core CSS critical only for AtF content (e.g. layout, header, main typography, etc.)
      • Place them all in a separate CSS file and link it in the <head> with a custom attribute: inline.
      • Check number of roundtrips made to render AtF content.
      • Compress images and files appearing in the AtF render [link].
      • Make sure there are no calls blocking AtF render.
    • First available interaction
      Choose functionality prioritized by either appearance or importance.
  2. Manifest

    Add proper Manifest file [link].

  3. Service Worker

    Add proper Service Worker file [link].

  4. Fonts Optimization
    • HTML/CSS: Use hosted services like Google Fonts when using web fonts.
    • HTML/CSS: Pick only the font variations you need for each font to reduce the web page load.
  5. CSS Files Optimization
    • CSS: Keep @imports to minimum.
    • HTML: Use CSS CDNs.
  6. JavaScript Files Optimization
    • HTML: JavaScript files should be loaded at the end of the <body> tag.
    • HTML: Load JavaScript files only when needed in current device view [link].
    • HTML: Use CDNs.
  7. Image Optimization
    • Create Sprites:
      • SVG Sprite
      • PNG Sprite
      • JPG Sprite
    • Illustrator: Convert bitmap images to SVG images whenever possible.
    • Photoshop: Other bitmap images should have 200% their original resolution, for Retina displays
    • Photoshop: Compress properly any images left without compression with 50% to 75% rate and Progressive option checked [link].
    • CSS: Create images for mobile-first approach
    • CSS: @media to load different background image sizes [link].
    • HTML: <picture> to load different image sizes [link].
    • HTML: Use LazyLoad when necessary [link].
  8. Mobile First Conversion

    Consider the experience for the mobile user as if there will not be a desktop version before you build for the desktop.

    • Careful file load selection: Do you really need jQuery or all of the CSS right away?
    • Media queries in CSS
    • Mobile devices rarely operate at full capacity like desktops do, hence, they are not as fast or as powerful. So there are other things to consider in comparison to other devices, such as:
      • Processing Power
      • Memory Usage
      • Battery Life
      • Fast Connection Processing.
  9. HTTP Optimization

    Optimal HTTP usage is 6 to 8 parallel connections to any one domain.
    Thus, reduce number of files using data combining, sprite maps and minification.

    • Correct 404 errors by removing non-existing assets from your code.
    • Server response time
    • Number of HTTP redirects
    • Use HTTP2, if possible, for more parallel requests.
  10. Task Runner: Gulp
    • Set up and ready Gulp [link].
    • Run CSS, JavaScript, and Image optimization tasks [link].
    • Minify HTML files [Optional].
  11. Test & Analyze

    Draw conclusions and take notes about the performance needs for your app/site by testing it on the following amazing tools, then follow their recommendations, if any.