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.
- Establish a performance culture.
- Be 20% faster than your fastest competitor.
- 100-millisecond response time, 60 frames per second (recommended by lighthouse).
- SpeedIndex < 1250 ms, Time-To-Interactive < 5s on 3G.
- Push critical CSS quickly.
- AMP.
- Drop Jquery (partially).
- Load JavaScript asynchronously.
- Are HTTP cache headers set properly?
- Are images properly optimized?
- Are web fonts optimized?
- Improve rendering performance.
- Get ready for HTTP/2.
- Remove unused CSS.
- Reduce number of requests.
- Compress content and resources.
- Use Content delivery network (CDN).
A.Profiling Tools
“If you can’t measure it, you can’t improve it”
-lord kelvin
What part of process take long time ?
To answer this question we need to use profiling and auditing tools.
- Lighthouse
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.
* Quick-start guide on using Lighthouse
How to use
1. npm install -g lighthouse2. Chrome-debug //get port if you need to login3. Login // skip if login not required.4. lighthouse <url> —- port <port-from-step-2> // —- port is optional5. 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 psi2. Psi <url> // live Server no need for step 33. npm install -g ngrok4. Signup and get your key use it as ./ngrok authtoken5. ./ngrok <protocol> <port>
CheckList specification
- Establish a performance culture.
A. Best Practices
- Mobile friendly website.
- Add attribute rel=”noopener” to external anchors.
- No Error logged to console.
- Never use inline style.
B. Accessibility
- Use alt attribute for Image elements.
- Use aria-label attribute for font icons and form labels.
- Don’t use [user-scalable=”no”] this delay touch event 300ms.
- Never use maximum-scale=1.0.
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.
4. AMP
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)
It’s 2018, jQuery was very useful but now, jQuery is dead long live Javascript.
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.
6. Load JavaScript asynchronously.
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.
A. Etag
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
B. Cache-Control
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?
A. WebP
WebP images very optimized for websites cons of this image format that is only supported on google chrome can use javascript to achieve this issue. Approximately 50% size less than PNG.
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
- Binary headers (efficient parse/more compact).
- Multiplexing (demo).
- Server push.
- Send multiple requests in one connection.
- Better SEO google love 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.
A. PurgeCSS
Purgecss is a tool to remove unused CSS. It can be used as part of your development workflow. Purgecss comes with a JavaScript API, a CLI and plugins for popular build tools.
How to use
1. npm i -g purgecss2. 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.
Also, it is possible merge JavaScript which always called together like D3 JS and NVD3 JS.
12. Compress content and resources
Compression of content is simply, efficient way to save bandwidth and reduce loading time by reduce sizes of pages by up to 70%. Using gzip compression is recommended, and minification of javascript file can reduce it’s size and save some bandwidth.
Conclusion
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.
Regards.
AS.
Thanks to Islam AlZatary.