Common Web Performance Optimizations

Network Optimizations

Improve network performance:

shrink file size - more KBs to download the more it takes time. Minimize files, optimize images, reduce data size.
- HTML, CSS, JS can be minimized easily → minify with uglyfyjs or using webpack
- Images
  - JPG: no transparency background, big in file size
  - PNG: limit colors and smaller in size than JPG, add transparency to bg
  - GIF: limit total colour counts used on a gif
  - SVG: vector graphics, small size, high rez
  - https://pageweight.imgix.com/
  - https://www.sitepoint.com/gif-png-jpg-which-one-to-use/
  - https://99designs.ca/blog/tips/image-file-types/
the travelling delivery man
- Use CDNs like https://imgix.com/
  - pay them, upload images there, they provide you links you can use in your app for images which are optimized and provided via a cdn based on location
- remove image exif data https://www.verexif.com/en/
  - for performance + security reasons
- use media queries to serve content to the respective screen size https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
- https://gist.github.com/chakrakan/b661fe639b97e11cdf3bd39813c4ce49
delivery method and optimizations
- optimize for less trips
- the HTML protocol will only allow set max num file downloads from one domain at a time ranging from 2-6 depending on browser
- combine css files into 1, js files into 1, etc.

In the critical render path, there are 8 steps, the very first step is the download of the HTML file
the browser starts creating the DOM, and incrementally generates the tree model of the html tags within the file
DOM describes the contents of the page
just when it starts to do that, it gets the style link, so it fetches the CSS file
this starts the simultaneous creation of the CSSOM (CSS Object Model) which has the styling information attached to the tree nodes, in a similar fashion to the DOM
then, slowly it traverses down the html file and sees the script tag with a link to a js file, so it grabs that
the JS file is read by the browser and executes any changes requested within the DOM and the CSSOM
once that is done, the browser combines the DOM and the CSSOM into a render tree which has information of both, the html, and the styling
it uses the render tree to create the layout based on the files and paint the layout and pixels onto the screen
thus, we finally have our web-page
- btw, any images and other types of files needed are also fetched in the background and are not part of this process

start loading CSS as early as possible
load JS as late as possible (few exceptions like google tag to track what a user is doing as early as site load). Normally if you put it earlier than script tags at the bottom, it will block the render and other resources being downloaded
JS requires HTML and CSS parsing to be done before it can begin its work (step 4)

CSS is render blocking (can’t create render tree before we have the CSS to create CSSOM)
make CSS as lightweight as possible
only load whatever is needed
above the fold loading
- only load what’s on the main page
media attributes
- can use it to load stylesheets too
- link tags have a hidden media attribute which defaults to all
- we can change it to media="only screen and (min-width:500px)" for a particular stylesheet to be

less specificity

bad:

.header .nav .item .link a.important {
  color: pink;
}

load scripts async’ly
<script async>
go ahead dl the js file with another thread
non blocking
when it’s done dl’ing, it immediately executes js which might be bad for us:
- if it executes long after the page load, then if we are relying on the JS for changes to UX, we’ll provide bad UX to user
- if executes before page load, we can’t do any DOM manipulation resulting in error
good for scripts that don’t manipulate the DOM - like tracking or analytics
<script defer>
wait to execute AFTER our html is parsed
good for scripts that will act on the DOM
minimize DOM manipulations all together
- this will block from the CRP to moving to the next step → creating the render tree
- if you have one or more js files in script tags, sync tags will block other js files to be loaded if there are DOM manipulations ongoing in the first script
avoid long running javascript!
- avoid alerts and random blocking JS code

Render tree enables the layout and position then paints the elements
Step 8 is if JS events change any part of the page, the browser revisits the render tree, redraws and re paints again
modern browsers are smart enough for partial re-draws, but try to limit

Additional image manipulation tools:

XNConvert: This free, cross-platform tool can handle batched images, and performs resizing, optimization, and other transforms.
ImageOptim: This free tool is available for Mac and as an online service, and is specifically aimed at optimizing images for speed, including metadata removal (discussed above).
ResizeIt: A Mac-only desktop product that lets you change the size of multiple images simultaneously, and can convert file formats at the same time.
PicResize: One of several good browser-based tools that gives you lots of options for cropping, rotating, resizing, adding effects to, and converting images.
Gimp: This ever-popular cross-platform tool just gets better with age. Powerful and flexible, Gimp lets you perform a wide variety of image manipulation tasks including, of course, resizing.