Web Performance refers to the speed/rate at which web pages are downloaded and displayed in the browser to the user.
Web Performance Optimization on the other hand refers to the process of analyzing web pages performance and identifying ways to improve it.
You may ask, So?? I’m a badass dev. All functionalities needed for the web app has been implemented and are working just fine. What does this have to do with anything?
Well I have news for you. It does matter.
Why Web Performance Matters
Retaining Users & Promoting User Experience :
Studies have shown that web pages which take > 5 seconds to load are easily abandoned by users , who may or never come back.
Boost Revenue :
If you run an online business, then the main goal is to boost revenue / conversion rates. Well, performance is key. Studies have also shown that if users’ experience a delay > 5 seconds to process orders and add to cart, then they are bound to abandon it.
Promotes SEO :
Google rewards better user experience with higher ranking and demotes poor user experience. This leads to faster pages ranking higher on search results.
What You Can Do
There are quite a number of diverse approaches and steps one can take to optimize web performance . I’ll be looking at the basic ones and must dos.
1. Think First :
For developers, it is a norm to depend on external CSS/JS libraries and frameworks. Before including them into your files, ask yourself if they are really necessary. Most times the functionalities you need from them can be achieved without them. The idea is to reduce the number of http requests the browser has to make to render the page. More http requests(i.e internal and external files to fetch) means more page load time. So requests should only be made when necessary and should be combined where possible. If you must use frameworks endeavor to opt for the minimalist ones.
This rule should also apply to images, in other words keep web content to only what is absolutely necessary.
2. Minify Text Assets(HTML/ CSS/ JS):
Minification is the process of removing all unnecessary characters from codes without changing its functionality. These unnecessary characters usually include white spaces, new lines and comments which are used to add readability to the code but are not required for it to execute.
Minification of all text assets reduces their file sizes, therefore downsizing the quantity of what the browser has to download to render the page. This results in faster response and load time.
There are a lot of tools that can be used for minification for the different text assets such as:
HTML : HTML Minifier
JAVASCRIPT : UglifyJS
To automate the process , a build tool such as Gulp can be used.
If you’re not familiar with gulp, read up this great article on it.
3. Optimize Images :
Image Optimization involves serving images at the smallest size possible while still maintaining the appropriate quality, size, resolution and format.
In modern web pages, Images make up at least 30% of total web page weight therefore optimizing them can yield huge performance improvements for your site.
There are several tools (free and subscription based) that can be used to optimize images. Some of my favorites are :
The process can also be automated using the gulp-imagemin plugin. Install as a dependency then whip up some code.
Again if you’re not familiar with gulp, read up this great article on it.
4. HTTP Caching :
Caching in this context refers to the browser storing data (such as images, css, js ), so that future requests for that data can be served directly without having to re-download or fetch from the server. Fewer downloads implies a faster site.
HTTP Caching can be implemented with the Cache-Control header which specifies browser caching policies as well as with other available HTTP Cache Headers.
Several file types can be cached including html , CSS , JavaScript, Fonts , Images and Icons. The code can be put in a .htaccess file or in an Apache httpd.conf file.
For further reading, check out this article on optimizing pages with HTTP caching.
What’s Next?
If you’ve implemented the above tips successfully, then you should treat yourself to a cup of cream latte 😉 . Don’t relax yet, there’s one more thing to be done.
Testing & Analysis:
The next step would be run an audit on your site to get an overview of what works well and what doesn’t and possible paths to improvement.
There are a lot of tools (ranging from online applications, browser extensions to system tools) that can be used to audit a website. Let’s take a look at a few and their capabilities.
Lighthouse: This is a chrome tool can be run either from the Chrome Dev Tools , as a Chrome extension or from the command line.
PageSpeed Insights : This is a google web service that that analyzes the content of a web page and generates suggestions to make your pages load faster. Just type in your web URL into the space provided, click on analyze and it generates a report for your site.
WebPageTest: This is an online tool that runs website speed test from multiple locations around the globe using real browsers (IE and Chrome) and at real consumer connection speeds.
SiteSpeed.io : Sitespeed.io is a set of Open Source Tools that tests web sites using real browsers, simulating real users connectivity and collect important user centric metrics like Speed Index and First Visual Render.
One thing to take away is that web performance optimization is an art not a science. There is no one laid out path to implementing it . So go ahead, start optimizing your sites and have fun while you’re at it (if you can 💁.)
Top comments (0)