10 Scientific Ways to 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 the necessary precautions while the development is carrying on.
In this post, I’m going to explain very basic methods to some advanced ways of improving page speed.
Before start, you need to first get an estimate on your current website speed and note it down so that we know whether this tutorial helped you to improve your page speed or not.
use this link given by google to determine your application’s current load time in mobile and web, once the analysis is done you will be given a set of instructions on how you can improve your website as well.
Let’s start with the basics [Beginner]
1. Correct Placements of CSS Files
CSS files add 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.
2. Correct Placements of Javascript
Javascript files we use 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 some time.
3. Optimize Your 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 replace your larger png images with jpg.
Once you have finished converting most of your images to jpg we can still optimize the images by doing the following things;
> Removing Metadata within the images
> Reducing the quality around 88% ( or a preferable amount )
For that, you can use jpegoptim command-line tool. once you install it into your Linux or Mac operating system you can run the following command to optimize your images
find ./images -iname "*.jpg" -exec jpegoptim --strip-all --max=88 {} \;
Now Those are the basics that you can apply to any website, so let’s spend some time doing little more advance stuff.
You are now in the Intermediate Category
4. Async Loading of CSS Styles
to load less critical CSS files without blocking page rendering, we should try to load them asynchronously, to achieve this in the past there were many ways which include javascript but now we are in a state where we don’t any 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 a 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 the progress of the download, sometimes this is very much ideal because we might not want the browser to render the page before the important CSS files are loaded. Let’s
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 the 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 the file.
5. Using Browser Cache
You can tell the browser to cache various file formats using a 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
<IfModule mod_expires.c>
ExpiresActive on
ExpiresDefault "access plus 1 month"
# CSS
ExpiresByType text/css "access plus 1 year"
# Data interchange
ExpiresByType application/atom+xml "access plus 1 hour"
ExpiresByType application/rdf+xml "access plus 1 hour"
ExpiresByType application/rss+xml "access plus 1 hour"
ExpiresByType application/json "access plus 0 seconds"
ExpiresByType application/ld+json "access plus 0 seconds"
ExpiresByType application/schema+json "access plus 0 seconds"
ExpiresByType application/vnd.geo+json "access plus 0 seconds"
ExpiresByType application/xml "access plus 0 seconds"
ExpiresByType text/calendar "access plus 0 seconds"
ExpiresByType text/xml "access plus 0 seconds"
# Favicon (cannot be renamed!) and cursor images
ExpiresByType image/vnd.microsoft.icon "access plus 1 week"
ExpiresByType image/x-icon "access plus 1 week"
# HTML
ExpiresByType text/html "access plus 0 seconds"
# JavaScript
ExpiresByType application/javascript "access plus 1 year"
ExpiresByType application/x-javascript "access plus 1 year"
ExpiresByType text/javascript "access plus 1 year"
# Manifest files
ExpiresByType application/manifest+json "access plus 1 week"
ExpiresByType application/x-web-app-manifest+json "access plus 0 seconds"
ExpiresByType text/cache-manifest "access plus 0 seconds"
# Markdown
ExpiresByType text/markdown "access plus 0 seconds"
# Media files
ExpiresByType audio/ogg "access plus 1 month"
ExpiresByType image/bmp "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/svg+xml "access plus 1 month"
ExpiresByType image/webp "access plus 1 month"
ExpiresByType video/mp4 "access plus 1 month"
ExpiresByType video/ogg "access plus 1 month"
ExpiresByType video/webm "access plus 1 month"
# WebAssembly
ExpiresByType application/wasm "access plus 1 year"
# Web fonts
# Collection
ExpiresByType font/collection "access plus 1 month"
# Embedded OpenType (EOT)
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
ExpiresByType font/eot "access plus 1 month"
# OpenType
ExpiresByType font/opentype "access plus 1 month"
ExpiresByType font/otf "access plus 1 month"
# TrueType
ExpiresByType application/x-font-ttf "access plus 1 month"
ExpiresByType font/ttf "access plus 1 month"
# Web Open Font Format (WOFF) 1.0
ExpiresByType application/font-woff "access plus 1 month"
ExpiresByType application/x-font-woff "access plus 1 month"
ExpiresByType font/woff "access plus 1 month"
# Web Open Font Format (WOFF) 2.0
ExpiresByType application/font-woff2 "access plus 1 month"
ExpiresByType font/woff2 "access plus 1 month"
# Other
ExpiresByType text/x-cross-domain-policy "access plus 1 week"
</IfModule>
An important point to note here is that if you need to update your files then you will have to change the name of your file to avoid that file being served from cache to a particular user the best practice here is to put the build number at the end of the file name
ex: main.js ==> main_34dr2xw.js
6. 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
<IfModule mod_deflate.c> # Compress HTML, CSS, JavaScript, Text, XML and fonts AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/vnd.ms-fontobject AddOutputFilterByType DEFLATE application/x-font AddOutputFilterByType DEFLATE application/x-font-opentype AddOutputFilterByType DEFLATE application/x-font-otf AddOutputFilterByType DEFLATE application/x-font-truetype AddOutputFilterByType DEFLATE application/x-font-ttf AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE font/opentype AddOutputFilterByType DEFLATE font/otf AddOutputFilterByType DEFLATE font/ttf AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE image/x-icon AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/xml # Remove browser bugs (only needed for really old browsers) BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch \bMSIE !no-gzip !gzip-only-text/html Header append Vary User-Agent </IfModule>
Now You are Stepping into the Pro Category
Except for the caching, in both of the 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 at how to 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 allows 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.
7. Concatenate all Your JS and CSS Files to Groups of less than 3
In the above steps, we are not solving the problem of browser fetching a large number of CSS and javascript files from the server when the server has to fetch a large number of files from the server definitely our site load time drops down.so in order to fix this you should Concatenate your javascript files and CSS files. I recommend you not to build all the javascript files into single build because that build may be larger and because of that load time may be larger but instead let’s
Have two concatenations
* One will have all the vendor files ( vendor.min.js )
* One will have all logic files ( app.min.js )
Similarly for CSS
* All vendor files to a single build ( vendor.min.css )
* All other files to another build ( app.min.css )
for this, you can use grunt-contrib-concat
8. 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
function getUserName(userid){
return UserService.fetch(userid)
}
can be look like this after doing uglify
function a(i){
return u.f(i);
}
You can clearly see how much space we can save by doing uglify, In Treinetic we use grunt-contrib-uglify to do uglification
9. Minify Your Images as a build step.
Running a command every time manually to minify your images? that looks stupid when you are a professional developer so use a build step to minify images, we use grunt-contrib-imagemin to do minification of images.
10. Minify Your Html and CSS files
Add a build step to minify your Html and CSS files, you can use grunt-contrib-cssmin , grunt-contrib-htmlmin
That is it folks let me know if there are other ways.
