[Note: I wrote this 03-31-2015 with the primary subject being CDW.com. This was my research at the time and not all statements may be true.]

• Terms

1. Page Performance
   1. How fast the page loads
2. User Experience (in this context)
   1. How fast the user thinks the page loads
3. Parse
   1. Break into pieces, and/or step through the pieces.

• Page performance vs. user experience

1. A page can perform well, but be a bad user experience.
2. More about this later.

• Load times

1. Optimal: under 1 sec
2. How fast is the CDW.com homepage?
   1. 5 seconds
   2. 2171 DOM elements
   3. (Source: http://www.webpagetest.org)

• How a page is built/rendered

1. The execution is top down and single threaded.
   1. Single threaded: processing one command at a time
2. As soon as the parser hits a closing script tag, it must download and execute the entire script before parsing any more of the HTML (source).
   1. “This means often the parser must idly wait while scripts and stylesheets are downloaded.”
   2. Unless it has the async attribute.
3. JS can not execute until all CSS has been downloaded.
   1. $(document).ready()  fires when the DOM is complete. – not necessarily needed
      1. It seems that’s when all CSS is downloaded and all JS has been executed… that can not be right.
4. Process (overly simplistic)
   1. Read the HTML and parse it into a DOM tree.
   2. Load linked resources (stylesheets, scripts, images, media)
   3. Calculate the page layout (positions, sizes, colors, fonts, etc.)
   4. Render the page

• Make it faster (for real):

1. Reduce file size – greatest advantage here usually
   1. Minify CSS and JS
   2. “the average web page is now more than 1.8 megabytes, with images alone accounting for a full megabyte of that.” (source)
   3. “62% of the weight of the web is images” (source)
   4. CDW.com home page – 1.3 MB
      1. 653 KB were images
      2. 500 KB were JS
2. Reduce number of files
3. Move CSS and JS to external files
   1. Research blocks of styles – how bad this – Solutions pages
      1. Definitely, this should go into an external file
4. Reduce the number of inline scripts
5. Use CSS/HTML to replace images where possible
6. Reduce the number of domains which your assets are called from
   1. https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Tips_for_authoring_fast-loading_HTML_pages
7. Images: set height and width so browser doesn’t have to calculate this
   1. Is this still true? Especially given responsive design
8. Use valid markup
   1. Browsers do not need to error-correct when you do this
9. Reduce by depth
   1. When reflow happens, it executes faster if DOM is not super deep.
10. Target a select set of browsers to develop for
    1. “Do not require your content to appear pixel-perfect in all browsers” (https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Tips_for_authoring_fast-loading_HTML_pages)
11. Smart page structure
    1. head
       1. css
       2. scripts (necessary during page load)
    2. body
       1. content
       2. scripts (not necessary during page load – majority of scripts should go here)
          1. Scripts are parser blocking, meaning when the browser comes to a script tag, it downloads the entire file before continuing with the parsing.
12. Javascript calls
    1. Use async where possible <script async >
       1. “Otherwise the browser will not render anything that is after the script tags that do not have these attributes.”
       2. Good to use when the DOM does not need to be finished while this JS runs and when no other scripts depend on this one being loaded.
       3. Best used for third party scripts.
       4. There’s no need to use async of script is loaded at the bottom of the page.
       5. Download and execute while the page is loading.
13. Minimise browser reflow
    1. “Reflow is .. the web browser process for re-calculating the positions and geometries of elements in the document” (source)
    2. What triggers reflow?
       1. Add/remove element from the DOM
       2. Change an element’s class
       3. Resize the window
14. Optimize CSS
    1. Remove unused CSS
    2. Minimize complex CSS selectors – descendant selectors in particular
       1. This may be something that we ignore as we use a CSS preprocessor. And that’s fine with me.
15. Optimize JS

• Make it faster (perceived)

1. Speed Index: time for above-the-fold content to load (source)
   1. Load content above the fold quicker than all other content.
2. Place most important/desired content at the top
   1. Perception of speed is influenced by how efficiently users can get what they most want out of your site
3. Reassure users during wait times.

• Chrome dev tools and Firebug

1. Chrome – Network panel – better
   1. Nifty options at the top, “from cache”
2. Firefox – Net panel – has some cool stuff

• Browser differences

1. “in Firefox there is this setting which limits the number of simultaneous requests per domain”
   1. http://stackoverflow.com/questions/1795438/load-and-execution-sequence-of-a-web-page

• How fast is my function?

1. var t0 = performance.now();
   [function here]
   var t1 = performance.now();
   console.log(“Call to doSomething took ” + (t1 – t0) + ” milliseconds.”);
2. Chrome – Profiles – “Collect JavaScript CPU Profile”
   1. Start the profile, refresh the page, and then stop the profiler

• Sources

1. https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Tips_for_authoring_fast-loading_HTML_pages
2. http://gent.ilcore.com/2011/05/how-web-page-loads.html
3. http://stackoverflow.com/questions/1795438/load-and-execution-sequence-of-a-web-page
4. Kind of helpful page on the “Net” panel in Firebug: https://getfirebug.com/wiki/index.php/Net_Panel
5. http://www.smashingmagazine.com/2012/06/12/javascript-profiling-chrome-developer-tools/
6. http://www.sitepoint.com/speed-index-measuring-page-load-time-different-way/
7. http://www.sitepoint.com/optimizing-critical-rendering-path/
8. https://developer.mozilla.org/en-US/docs/Web/API/Performance.now