Please enable JavaScript.

Coggle requires JavaScript to display documents.

Performance (Cool Facts (Your visitors expect your website to load in 2…

- - - - Decrease Network Latency
      - Honey I shrunk the files
        
        Minimize Files
        ( CSS / HTML / JS )
        
        Minify with UglifyJS
        
        Minimize/Optimize Images
        
        Choose file format best for the job
        
        Photos with many colors?
        
        JPG
        
        Small animations?
        
        GIF
        
        Need transparency?
        
        PNG
        
        Logos/Icons ?
        
        SVG
        
        Imigx
        
        Tool for image processing
        Optimize, deliver and cache entire image library for fast, stress-free websites and apps
        
        Remove Image Metadata
        
        When you take a photo with your camera, not only it will save the photo but also some private information about the photo, such as:
        
        Device
        
        Date
        
        GPS Coordinates of the location
        
        You don't need this information to be displayed on your website.
      - The travelling delivery man
        
        Media Queries
        
        The browser only downloads files that it needs
        
        If you apply media queries, it it will only download the images/files that are needed for that specific screen size
        
        Cheat Sheet
        
        Reduce the number of components a page requires
        
        reduces the number of HTTP requests
        
        don't omit content, but structure it more efficiently
        
        Bootstrap / Foundation ?
        
        Use Flexbox / CSS Grid
        
        jQuery ?
        
        Use Vanilla JavaScript
        
        Think twice before using another library for cool animations
  - - - Critical Render Path
        
        Browser makes request to the server
        
        Server returns the HTML file
        
        Browser reads the HTML file
        
        Browser generates a tree model of the HTML tags needed to build the website and DOM
        
        Browser encounters a style link to grab the CSS, so it asks for the CSS file from the server
        
        CSS file arrives, browser gets back to working on the DOM and creating the structure of the website
        
        Once the browser received all CSS files, it starts generating the CSSOM
        
        Browser sees a JS tag and asks the server for the JS file
        
        JS file arrives and browser starts reading it
        
        Browser executes any changes needed onto the DOM and CSSOM
        
        Browser combines DOM and CSSOM into a Render Tree
        
        Browser uses Render Tree to create the layout of the page
        
        Once that's done, the browser is going to paint all the pixels
      - Optimize HTML
        
        Load style tag in the <head>
        
        One of the core principles of CSS performance is to get the CSS to the browser as soon as possible.
        That's because JavaScript requires both the HTML and CSS parsing to finish, before it can be run.
        In this way, we give the CSS ample time to create the CSSOM.
        
        Load script tag right before </body>
        
        If you put the JavaScript files at the top of the <body> or in the <head>, it would block the page rendering.
        However, if you added the JS files at the bottom, right before the </body>, your style, content and media will start downloading more quickly, giving the perception of improved performance.
        
        Exception from the rule:
        
        If you use a Google Analytics script tag, which tracks user activity from the very beginning of your page load, you might want to put in the <head> of the HTML file.
        
        But, keep in mind that might slow your website.
      - Optimize CSS
        
        Only load what is needed
        
        Browser loads only styles needed for the first meaningful paint
        This can avoid more download time.
        
        Above the fold loading
        
        Only when users start scrolling browser should load the rest of the page
        
        Media Attributes
        
        If a user visits a web page on their mobile phone, it would be a good practice to load a background image which has a smaller size than the one used on the desktop
        
        Less Specificity
        
        When using less specifity, generally less characters - hence less bytes - are being transferred, which will automatically improve performance.
        Also, during the Critical Render Path process, the browser needs to calculate the styling in order to create the CSSOM
        .
        Therefore, it would have to do more work if the specificity was really complicated:
      - Optimize JavaScript
        
        Load scripts asynchronously
        
        By using the async property, the browser will understand that it needs to download the JavaScript file with another thread.
        Although this approach will solve the issue of blocking the HTML parsing, the browser will download the JS file on a low-priority.
        Once the file has been downloaded, it will get executed, which again, will block the HTML parsing.
        
        Warning!
        
        The JavaScript file will get executed as soon as it's been downloaded, which means it can execute at any time. This leeds to two issues:
        
        The JavaScript can execute long after the page has loaded
        
        If the JavaScript executes before the page has finished loading and it starts doing some DOM manipulation without the DOM being there, then one might get some errors.
        
        Rule of thumb!
        
        Use <script async> to any script that doesn't affect the DOM.
        Async should be used for most external scripts that require no knowledge of the code and are not essential for user experience.
        E.g.: Google Analytics / Tracking scripts
        
        Defer loading of scripts
        
        Using <script defer> will not block the HTML parsing while downloading and it will execute after the HTML has been parsed.
        
        really good for scripts that will act on Render Tree / DOM
        
        Minimize DOM Manipulation
        
        Avoid long running JavaScript
        
        Top Tips
        
        If the core functionality requires JavaScript, then async is the best, otherwise use defer
        
        Critical scripts should be in the <script> tag
        
        Third-party scripts that don't affect the DOM should be in the <script async> tag
        
        Any scripts that aren't important or above the fold should use the <script defer> tag
      - Prefetching
  - - - The web server needs time to load data and, possibly, assemble the website before sending it back