DEV Community

loading...
Cover image for How I Made My Website Load 18% Faster

How I Made My Website Load 18% Faster

mwrpwr profile image Joseph Maurer ・4 min read

15 minutes could save you 15% or more on performance

Source: Arnold Francisca

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

Source: Google Lighthouse

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

Screenshot of Firefox Performance Data

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!

Discussion (0)

pic
Editor guide