Scientifically Improve Page Speed

Once you finish creating your website or web application next thing you worry about is the page speed, you will start to understand that the application you made is having a poor page load time and now you wonder how to improve it. In my opinion you should worry about the page speed even before you start developing the application and need to take necessary precaution while the development is carrying on.

In this post i’m going to explain very basic methods to some advanced ways of improving the page speed.

Before start you need to first get an estimate on your current website speed and note it down so that we know that whether this tutorial helped you to improve your page speed or not.

Correct placements of CSS files
CSS files adds the styles to your website so you need to make sure that those are the files that browser start rendering first which means you should Ideally put them in the header section before the javascript.

Correct placements of Javascript
Javascript files we use to to dynamically change the Dom structure which means Dom tree needed to be parsed before the Javascript which means Javascript should be the last set of files that browser should render, unless what happens is that browser will waste time loading your Javascript even before the DOM is loaded and eventually you will not see anything in your browser window for sometime.

Optimize your image and make them web ready
Images play a big role for the page load so if you have larger images then that means you have a larger page load time so the trick here obviously is to have your images are under 600Kb at least for that you can use various optimization tools and most importantly try your best to replace your larger png images with jpg.

find ./images -iname "*.jpg" -exec jpegoptim --strip-all --max=88 {} \;

Now Those are the basics that you can apply to any website, so lets spend some time to do little more advance stuff.

Async loading of CSS styles,
to load less critical CSS files without blocking page rendering, we should try to load them asynchronously, to achive this in the past there were many ways which include javascript but now we are in a state where we don’t no longer need javascript support to asynchronously load css files.
It is possible to load css files asynchronously with the support of

<link rel="preload" ...

Before we go further let me explain little bit of science behind css file loading, when multiple css files are fetching from the network browser pauses page rendering each time a stylesheet is in progress of download, sometimes this is very much ideal because we might not want browser to render the page before the important css files are loaded.

Lets see how you use this in action

<link rel="preload" href="mystyles.css" as="style" onload="this.rel='stylesheet'">

by doing this what happens is that it will trigger browser to download the file but since it is not a stylesheet browser will not start rendering immediately but as soon as onload is completed browser will start rendering file.

Using Browser Cache
You can tell browser to cache various file formats using cache-control header basically next time when you visit the site resources will be served from the browser cache.
You can enable cache control header for various file formats using .htacess file if you are using apache server, use the following module within your .htacess file to enable cache control header

Gzipping Files
If your server is serving the files as it is then you are doing a serious mistake because making your files Gzip you can reduce your files up to 80% from the original size which means you will gain reduction of the page load time. so consider enabling gzip on your server for apache users simply copy paste the following module

Except the caching, in both of above sections you do not need to worry about a build tool you can spend your time just developing the application but now we are looking how do more advance optimizations during the build steps and what are the tools you can use.

if you are developing modern single page applications via angular or other mature frameworks they have build tools in place for you to simply use but if you are stuck with an older version of angularjs or if you are building a website or web application without any of the modern tools then you will have to write your own build steps.

why it is important to have a configure build tools, because it allow us to control how the end files that are going to deploy to the server should look like, it allows us to do various processing to your files for example we can write a build step so that all our sass files will convert into css in the prod build or we can minify all our css files and javascript files or we can simply concatenate all js files to a single file etc.

Uglify your Javascript files
What do you mean by uglifying javascript files ? it is a process of replacing longer variable and method names with very small meaningless variables to reduce the end file size, for example:

That is it folks let me know what you think of the pose :)

Related posts:

Never ask the Universe for patience. You won’t get it. You will, however, be given infinite opportunities in which you must BE patient.

The camper is sitting in an undeveloped federal site reserved for such recreation. Truly, there is no real campsite here. No fire ring, no picnic tables, no restrooms, no showers, not even a trash…

All I Wish. Slow starvation  My salvation I couldn’t stop mysel I kept on eating  Self defeating Somewhere on the shelf I keep a list  Of targets….