How I Made My Website Load 18% Faster
Tags: webdev, performance, lighthouse, javascript
Published: 2021-03-26 03:42:53

<h4>15 minutes could save you 15% or more on performance</h4>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*ZJd-jecnNEwaZLbE"><figcaption>Source: <a href="https://unsplash.com/@clark_fransa?utm_source=medium&amp;utm_medium=referral">Arnold Francisca</a></figcaption></figure><p>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 <a href="https://web.dev/first-contentful-paint/?utm_source=lighthouse&amp;utm_medium=lr">First Contentful Paint (FCP)</a> 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&nbsp;process.</p>
<h3><strong>Best Practices</strong></h3>
<p>Here is a short list of common gotchas that, when fixed, can help with several metrics involved with your website&nbsp;loading:</p>
<h4><a href="https://web.dev/offscreen-images/?utm_source=lighthouse&amp;utm_medium=lr">Defer offscreen images</a></h4>
<p>In order to save bandwidth during critical load time, you can defer images that are off screen to load&nbsp;later.</p>
<h4><a href="https://web.dev/uses-webp-images/?utm_source=lighthouse&amp;utm_medium=lr">Serve images in next-gen&nbsp;formats</a></h4>
<p>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&nbsp;formats.</p>
<h4><a href="https://web.dev/serve-responsive-images/?utm_source=lighthouse&amp;utm_medium=lr">Serve correct image&nbsp;sizes</a></h4>
<p>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.</p>
<h4><a href="https://web.dev/render-blocking-resources/?utm_source=lighthouse&amp;utm_medium=lr">Be Mindful On Dependencies and Defer if&nbsp;possible</a></h4>
<p>Loading dependencies through a <em>&lt;script src=””&gt;</em> 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&nbsp;issues.</p>
<h3><strong>Tools</strong></h3>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/640/1*dU0ByRhDEpzWIxOG4927EA.jpeg"><figcaption>Source: <a href="https://developers.google.com/web/tools/lighthouse">Google Lighthouse</a></figcaption></figure><p>Here is a list of tools that are useful for development and&nbsp;testing:</p>
<ul>
<li>
<a href="https://web.dev/measure/">Lighthouse Measure</a> breaks down web page performance in easy to understand metrics. It also provides plenty of references for how to fix common&nbsp;issues.</li>
<li>S<a href="https://www.npmjs.com/package/sharp">harp npm package</a> and the <a href="https://www.imagemagick.org/script/index.php">ImageMagick CLI tool</a> are useful for cropping images to the correct size and aspect&nbsp;ratio.</li>
<li>
<a href="https://apple.co/3c4wFQb">Webp Convertor</a> is a tool for Mac that allows you to convert JPG/PNG to&nbsp;Webp</li>
<li>
<a href="https://code.visualstudio.com/">Visual Studio Code</a> is cross-platform code editor that is essential if you are doing any web development.</li>
<li>
<a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">Built-in Website Developer Tools</a> 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&nbsp;website.</li>
<li>
<a href="https://developers.google.com/speed/pagespeed/insights/">Google PageSpeed Insights</a>, 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.</li>
</ul>
<h3><strong>Analyzing Results</strong></h3>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/582/1*7L3ViOBF-VmebpZAt-ZT0A.png"><figcaption>Screenshot of Firefox Performance Data</figcaption></figure><p>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 <strong>time to first content paint</strong> and <strong>time to interactive</strong> are the most important when loading your page, but there are definitely situations where that may not be the top priority.</p>
<p>So get out there and make your website more performant!</p>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=8f8cc50e442d" alt="" width="1" height="1">