15 minutes could save you 15% or more on performance
Far too often, performance is pushed off till the end of a project when it is often significantly more difficult to implement. Particularly in web development where performance always has to be a consideration because of the number of platforms and internet connections that are possible. Recently I took a deep dive into the performance of my website and improved the First Contentful Paint (FCP) by 3.6 seconds. I wanted to go through some of the tools I used, and best practices that I found when going through the process.
Best Practices
Here is a short list of common gotchas that, when fixed, can help with several metrics involved with your website loading:
Defer offscreen images
In order to save bandwidth during critical load time, you can defer images that are off screen to load later.
Serve images in next-gen formats
PNGs and JPG are not the best image format for the web. Yet, JPEG 2000, JPEG XR, and WebP image formats have better compression and quality characteristics compared to their older image formats.
Serve correct image sizes
While it is possible to crop images using html and css, it is inefficient in the long run. The proper form is to deliver the correct size image needed for the page, at the proper resolution.
Be Mindful On Dependencies and Defer if possible
Loading dependencies through a <script src=””> tag opens you up to a lot of potential performance problems. Sometimes it is hard to wrap your head around exactly what that line is including and the time impact associated with it. Use debug tools to measure the load and remove it if it isn’t being used. You can also use defer and async tags to offset some of the issues.
Tools
Here is a list of tools that are useful for development and testing:
- Lighthouse Measure breaks down web page performance in easy to understand metrics. It also provides plenty of references for how to fix common issues.
- Sharp npm package and the ImageMagick CLI tool are useful for cropping images to the correct size and aspect ratio.
- Webp Convertor is a tool for Mac that allows you to convert JPG/PNG to Webp
- Visual Studio Code is cross-platform code editor that is essential if you are doing any web development.
- Built-in Website Developer Tools are a must. Whether you are using Chrome, Safari, Firefox, etc. it is a good idea to get familiar with their built-in developer tools to measure the performance of your website.
- Google PageSpeed Insights, is a service that analyzes the content of a web page and generates suggestions to make your pages load faster. Reducing page load times reduces bounce rates and increases conversion rates.
Analyzing Results
Lighthouse does a really good job of breaking down results into an easy to understand way, but it’s up to you if the results are within the realm of what you were expecting. The tools built in to most browsers are plenty detailed enough to get a good idea of how your page is doing. There is always going to be some level of interpretation with the performance data, but it’s important to keep in mind what the type of content your website is delivering. In my opinion, the time to first content paint and time to interactive are the most important when loading your page, but there are definitely situations where that may not be the top priority.
So get out there and make your website more performant!
Top comments (0)