Front End Engineer
Performance of Website is essential part to success business on web, By providing content ready to interactive with minimal of waiting time and load on server to serve largest number of request. And website speed is one of factors that is used in ranking algorithm.
This article will cover some of performance factor that need to be considered to have faster website and better ranking in Search engines from front end perspective regardless server type or programming language used to build website.
So here is list of performance factors with explanation to some of them.
“If you can’t measure it, you can’t improve it”
What part of process take long time ?
To answer this question we need to use profiling and auditing tools.
Lighthouse is an open-source, automated tool for improving the performance, quality, and correctness of your web apps.
When auditing a page, Lighthouse runs a barrage of tests against the page, and then generates a report on how well the page did. From here you can use the failing tests as indicators on what you can do to improve your app.
How to use
1. npm install -g lighthouse
2. Chrome-debug //get port if you need to login
3. Login // skip if login not required.
4. lighthouse <url> —- port <port-from-step-2> // —- port is optional
5. Check outputs as html // can be formatted as JSON
Is Lighthouse enough to measure performance ?
No, We need another tool to measure performance.
2. PageSpeed Insights
PageSpeed Insights is a project by Google that analyzes the performance of your website, giving you a score index based on a variety of factors.
Page speed insights require website to be on live server thus we need to use gulp psi that use terminal, so you can get your page speed insights scores right in your terminal without needing to push your site to a live server by using ngrok.
Testing Locally with Ngrok
Ngrok is a service that allows users to try out a web site they’re developing without deploying it to the internet.
How To use
1. npm install -g psi
2. Psi <url> // live Server no need for step 3
3. npm install -g ngrok
4. Signup and get your key use it as ./ngrok authtoken
5. ./ngrok <protocol> <port>
A. Best Practices
2. SpeedIndex < 1250, Time-To-Interactive < 5s on 3G.
Page first paint prefer to be less than 1.25s and website ready to interactive less than 5s
3. Push critical CSS
Idea behind this is to push all css that consider important to render the document at the head with document then load rest of css as external at the footer “end of document”. Following website help to identify critical CSS.
The AMP Project is an open-source initiative aiming to make the web better for all. The project enables the creation of websites and ads that are consistently fast, beautiful and high-performing across devices and distribution platforms.
5. Drop Jquery (partially)
Following table compare and explain benefits of not using Jquery in term of execution time each selector ran 100 times with 100 iterations in millisecond.
Load JS asynchronously allow browser to load JS while parsing html after JS is loaded html parsing will stop to execute JS, to execute JS after html is parsed use defer.
7. Are HTTP cache headers set properly?
On client server architecture it’s interactive environment based on request from client and response from server some of these resources required by client change infrequently, Fetching these resources again and again over the network is both slow and expensive and increase number of roundtrips between the client and server, the ability to cache and reuse previously fetched resources is a critical aspect of optimizing for performance.
Idea behind Etag is to use cached content if wasn’t changed, like if content the browser has is the same content the server will provide.
Fig 7.1 illustrate how Etag work
Each one resources can define its caching policy via the Cache-Control HTTP header. Cache-Control directives control who can cache the response, under which conditions, and for how long.
8. Are images properly optimized?
B. Optimize all images in size.
there is a lot of algorithms that can be used to encode images in order to reduce size and maintain same quality for example guetzli from google easy to use and effective here is gulp task that contain most of optimization algorithms and can be applied on bulk of files.
C. Use picture element
Picture is HTML5 element gives more flexibility in specifying image resources in responsive designs, instead of having one image that is scaled up or down based on the viewport width, multiple images can be designed to more nicely fill the browser viewport and less data traffic on mobile devices.
9. Get ready for HTTP/2
-Benefits of http/2
10. Remove unused CSS
in case of using CSS frameworks like bootstrap and legostyle there is a lot of roles that is not used in each page of website. Removing unused CSS can reduce CSS file size significantly up to 90% - 95% unused CSS, there is easy way to identify unused CSS.
How to use
1. npm i -g purgecss
2. purgecss — css <css> — content <content> [option]
3. check result will contain only used CSS roles.
11. Reduce number of requests.
Reducing number of request mean less number of resource, there is a way to achieve this by merging resources in many different ways. For example it can be merging multiple images into one image and use it as CSS image sprite this technique is mostly used of icons and icons on facebook as image sprite.
12. Compress content and resources
Web performance is large topic or area and have multiple aspects need to be considered to gain benefit and avoid these mistakes that lead to unsatisfied visitors or customers, and most important to focus on finding issues and identify them before starting to work on solution.
Thanks to Islam AlZatary.
Create your free account to unlock your custom reading experience.