Performance Optimization

In front-end web development, performance optimization is the modification of html, css and javascript to enhance page load times. There are multiple factors that can cause a website to react slowly: a large number of header requests from the client to the server, for example, may require one request to wait for another request to be completed before it can start. Thus, the downloading of large or multiple assets will make for poor latency.

  1. What is Optimization?
  2. Setting a Performance Budget
  3. Optimization and Asset Delivery
  4. Measuring Performance

 What is Optimization?

One of the main purposes of optimizing a site is the impact it has on user perception. People want to use websites that load quickly, and every second counts. Ideally, a website should have a first meaningful paint that quickly leads to a users first available interaction within with a website 2 seconds. If a site takes more than 3 seconds to load, you can lose 40% of your audience. Every additional second in page response can result in a 7% reduction in conversions. The total time it takes for users to perform an action will affect perception of a site, whether users return to the site and even the ranking in search engines. It is obvious that slow load times cause more than user frustration: it will result in losing potential customers!

 Setting a Performance Budget

A Performance Budget is a plan that calculates the total weight for pages in a site to ascertain load times and what have you. Much of this planning targets that which is Above the Fold: anything that is within the <head>...</head> and is imperative to the initial load of the site within the constraint of the first meaningful paint.

 Optimization and Asset Delivery

The largest performance issue with any site is how fast you can get content and assets to users. While most web hosts are pretty fast at delivering text, serving fonts and images from a single host can lead to performance issues. Above the fold assets are critical for every site so optimizing stylesheets would be a good first step.

 Content Delivery Networks

A Content Delivery Network is a distributed network of proxy servers set up in multiple data centers around the world. Using CDNs to deliver assets is an industry standard that reduces latency. This is ideal for loading images as well as stylesheets in the form of a Redirect. Using a CDN eliminates a developers ability to use Lazy Loading of images, which is another method that can be employed. These open source apps makes delivering assets a cinche.

 Service Workers

A Service Worker is a <script> that runs in the background to fetch and cache resources without requiring a user interaction. This will give a performance boost: requires https://, a manifest.json file and placed in the root of the directory.

Service Worker Script

 Preload

This method assigns informs a server that a particiular stylesheet should be loaded first: this is especially useful for mobile devices.

<link rel="preload" href="css/mobile.css">

Moreover, in-lining essential CSS will improve load times and increase perceived performance: such CSS consists of global navigation, typography and footer styles. To do this, employ a style="..." attribute within the aforementioned section tags.

 Minification

Optimizing critical CSS begins with well structured declarations, using a limited number of selectors, employing shorthands whenever possible and using media queries for progressive enhancement. After doing that, cleanup, validate and minify all stylesheets. Use an unminify tool to work with CSS that has already been minified.

 Optimizing Images

Using images on websites is an imperative, but modifying images through stylesheets can lead to distortion. Load times are increased with the addition of any image so sizing images prior to usage is a must! The first action to take is to compress all images. Heck, you can automate image compression! The .jpg file extension is the best file format not named .webp: try converting the files once all browsers support it.

 Measuring Performance

Understanding how a website performs requires a bit of work that begins with benchmarking current site speed and acquiring a good Emulator to replicate device conditions during testing. Having a checklist will help. The key is to obtain a good Perpceptual Speed Index (PSI) and mobile friendliness score. Use browser dev tools to quickly diagnose problems and the specific selector issues taking place.