Optimizing the website for fast page load should be a top priority in this competitive world. Well-Performing websites enjoy higher visitor engagement, retention and good conversion than slower ones. Research shows that a very responsive website increases site visitors, service expectations, and overall customer experience, and lastly but not least, better Google page rankings helps to improve your web performance.
However, it should be kept in mind that, a performing website comes with its own sacrifices. As ultimately, a web page must constitute the core values it has been built upon, even if it comes short on some performance tweaks. In order to provide a very easy to use webpage with effective user experience, the page must be built to resonate with the requirements of the end users. Here is a list of few factors to consider if you want to boost your website performance:
1. Time to First Byte (TTFB)
The TTFB is used as a measurement to indicate the responsiveness of a web server. It is essentially the time taken by the browser to start receiving information after it has requested it from the server.
A website’s TTFB is calculated by the following ways:
HTTP request time + Process request time + HTTP response time
Your TTFB can be accessed easily by using our web performance analyzing tool.
For easily bring down the overall TTFB you can use a Content delivery network (CDN) and increase the load speed of your website.
2. Critical Path
- Use the defer directive or async to avoid render blocking.
- JS files can be concatenated into a single file even though with HTTP/2 this is no longer as important.
- By moving the scripts to the bottom of the page right before your tag.
3. Domain Name Prefetching
DNP is an effective solution to resolve domain names before a user visit the link. Prefetching eliminates roundtrip latency and saves time for users by pre-connecting the browser to set up early connections by sending HTTP request to the server for connections such as DNS Lookup, TCP Handshake, and TLS negotiation.
4. Render Blocking Resources
- Call your CSS files properly
- Concatenate the CSS files into one file
- Use media queries to mark some CSS resources as non-render blocking
- Minify Your CSS by removing extra spaces, characters, comments, etc
5. Number of HTTP Requests
When your browser fetches data from a server it does so use HTTP (Hypertext Transfer Protocol). It is a request/response between a client and a host. In general, the more HTTP requests your web page makes the slower it will load.
There are many ways you can reduce the number of requests such as:
- Using CSS Sprites
- Minimise assets such as 3rd party plugins that make a large number of external requests
- Don’t rely on 3rd party frameworks unless they are inevitable
- Combine CSS and JS files
Running our comprehensive analyzing tool, 365andUP will let you know how many requests were needed in order to generate a particular page.
6. Identifying Where Assets Are Delivered From (Latency)
Identification of Latency and how it affects the assets and delivery is a must to check when scrutinizing the web page speed load times. The identification and fixing of network latency culprits consist of a three-step process:
- Initial confirmation of latency
- Locating the area where latency is occurring
- Identifying and eliminating the true source of the latency
A ping test can verify the reachability of devices on a network. Ping test will provide insight on how long it took an ICMP packet to reach its destination and back. A ping test on multiple devices on different network devices and segments can be done and the round-trip times can be used to identify valuable information on network latency. The multiple tests will confirm the latency and it will as well as help to identify what part of the network is experiencing the slowdown.
There are some methods to decrease the ping time:
- Decreasing the number of HTTP requests
- Gzip Components
- Add Expires or Cache-Control Header
- Using Content Delivery Network (CDN) by caching website assets on global edge servers (POPs)
- Use HTTP/2 by minimizing the number of round trips from the sender to the receiver and with parallelized transfers.
7. Optimising Large Images
Page speed highly depends upon the size of images and text in the page. To increase page speed, the uploaded image must be optimized for higher page speeds.
There are many online tools for optimizing image and among them are:
8. 301 Redirects
Redirects slow down the performance of a website as it generates additional round trip times (RTT) and doubles the time required to load the initial HTML document before the browser even starts to load. So, for better page loads redirects must be avoided whenever possible.
9. Web Font Performance
A research done by HTTP Archive suggests that more than 60% of websites are now using custom fonts than relying on existing fonts like Google Font. Relying upon Google fonts will add extra HTTP requests to external resources and they may also be render blocking.
For better web font performance you can follow these points:
- Select only the styles you need and stick to it
- Keep character sets down to a minimum
- Prioritize based on browser support
- Use locally hosted fonts
- Store in LocalStorage with Base64 Encoding
10. Fix 404 Errors
It is important to look out for missing links, as it generates a 404 HTTP error when a user browse to it. The 404 errors can be quite taxing on your server, as on an ‘average’ site with an ‘average’ module load, 60-100MB of memory must be consumed from the server to deliver a 404 Error page.
Installing plugins or modules to check for 404 error is not a recommended practice, but external service and online tools can be used to check for errors easily.
There are many online tools like “Broken Link Checker” can be used for this purpose. An occasional check of missing links and correcting it when necessary will ensures that you aren’t wasting any of your server’s resources on missing or broken links.
11. Enable Gzip Compression
Thanks for dropping by. Ready for the next blog?