If you want to avoid making these mistakes, you might want to ponder on the following points.
- What metrics would accurately measure a user’s performance?
- How to use these metrics on actual users?
- According to the metrics and measurements recorded, when can an website be called ‘fast’?
- How to improve the website according to your findings?
- First Paint (FP) and First Contentful Paint (FCP)
Source: WP Rocket
- First Meaningful Paint (FMP)
- Time to Interactive (TTI)
- Long Tasks
|Is it working?||FP/FCP|
|Is it useful?||FMP|
|Is it valuable/useful?||TTI|
|Is it smooth and fast?||Long Tasks|
10 Tips to Improve User-Centric Speed Metrics for better performance of Your Website
1. Dig New Sources for Better DNS SolutionsBetter DNS lookup times are the key to faster loading websites, as it is the first thing that happens when a page loads. Improving this time can boost all the user-centric speed metrics of your website.
Source: KeyCDNFor those using the default DNS provided by their hosting provider, we want you to know that you’re missing out on a lot! Cloudflare is the most loved and the fastest DNS provider. Not only does it have a great admin, but is free too! Other efficient options available are WordPress, DigitalOcean, dnsimple, and Zilore.
2. Quality isn’t Enough, Optimize your ImagesImages play a major role in deciding the size, thus the loading speed of a website. If you want to boost the speed of your website, there are a few aspects you need to change about the images of your website.
Source: Google Developers
WebPWebP is a better image format to go for while uploading images on your website, thanks to its smaller size. The size of a WebP-format image is websiteroximately 25-30% smaller than that of jpg, jpeg or PNG. This, however, might be problematic if someone wants to use your website on a browser that doesn’t support WebP images. In such cases, one might spot a blank image in place of the actual one.
SVGSVG is a vector graphic format, which basically means the quality remains the same regardless of the size. Not only is it extremely performance-friendly, but it can be animated too. Now that’s way better than just an image. Isn’t it? Change your images to SVG format and reduce your page size at the earliest, and boost your page’s loading speed by a huge margin.
Lazy Load ImagesThis is a clever and, nowadays, a common technique that only loads the information that is needed. It is an effective way to reduce the loading speed of a page. Lazy loading is the method where the information visible to a user when he opens the page, loads first. The rest of it loads when he scrolls down. Even Google has launched an updated version of Googlebot to support this optimization.
3. Don’t Fancy a Fancy FontUsing creative and attractive fonts makes your website look inarguably amazing. More and more people have started using fancy fonts to beautify their website. However, they are unaware of the adverse effect this has on the page’s loading speed. In such cases, your text might not load quickly and result in either flash of unstyled text (FOUT) or flash of invisible text (FOIT). This can be an unsatisfactory experience for the user and should be avoided.
4. Inspire Your Own Font IconsUsing commonly available font icon packages is a great option to enhance the presentation of your website. However, this is a double-edged sword. While it improves the experience, it decreases the loading speed of the website. These icons can be as heavy as 100kb for a CSS file and 300kb for a font package. A better solution to this is to use services like Fontello and Fontastic to create your very own fonts and use them on your website. This is not only quicker to load but it is also an excellent opportunity to show your creative side on your website.
5. Get rid of Unused CSSCSS can be a major culprit to slowdown loading speeds. The need to load all pages while the user is on the homepage is just going to slow your website down. Optimize your website using various available services like Unused CSS, Purify CSS, and UnCSS to get rid of the irrelevant junk. Note: This optimization needs to be done on a page-by-page basis and calls for a lot of testing. But in the end, it is worth it.
6. Redirect Render-Blocking Files to the Rear of the TagExternally linked CSS files can slow down the loading speed of other valuable content. This can result in a blank screen for a longer time, as the CSS file will be loaded in the order it is arranged in the tag. Move such files to the end of the tag to boost up the loading speed. Such optimization helps load and display content other than the CSS files faster.
7. Arrange Important CSS at the ApexOptimize your website to inline the most important CSS to the top of the page. By important, I mean the CSS that needs to be displayed above the fold on your website. This helps the browser render an important CSS and display it before getting blocked by a render-blocking file.
8. Avert RegressionsOptimizing the website before launching new features is mandatory to prevent any regressions. You need to make sure that there is no hindrance in the smooth working of the website before you update it with new attributes. Tools like Lighthouse and PageSpeed Insights can be used to record any regression or drop in metrics of the website.
10. Authorize Browser CachingBy now you surely have an idea about the numerous files that are loaded when you open a website. These files can, however, be stored for later use as well. By enabling browser caching, you are allowing the browser to store aspects like stylesheets, Java Scripts, images, etc. Once these files are stored in the browser cache, fewer files need to be loaded the next time the user visits the website.
Google to the Rescue!Google offers a wide range of tools, new resources, and content for developers to boost the loading speed of their sites. Some of them are listed below for you to use and speed up your website.
- WebP – an image format that has a smaller file size as compare to jpeg and PNG.
- Guess.js – Prefetching of pages based on machine learning.
- google.com – Performance optimization guides
- Brotli – Improved Gzip compression.
- AMP – Mobile speed optimization framework.