My take on how to improve the performance and accessibility of our website with React? (1) Performance

Google Lighthouse

Usually, SEO ranking plays a huge role in making our website stand out. As you may have known, page loading speed is one of several factors that affects your SEO ranking, and improvement in website performance results in ranking up in SEO. Therefore, this leads to the topic I will be discussing in this article,

How could we improve the performance of our website?

1. Reduce bundle size, unused packages and third-party libraries

When we first started coding as a Frontend Developer, Create React App(or CRA for abbreviation) is our best friend. It bootstraps our single page application in React so that we don’t have to worried about the required configuration. But there are tradeoffs in using CRA. The drawbacks are: its bundle size is bulky, and with all the unused package preinstalled it can slow our website in terms of performance.

One solution is that we don’t use CRA in the first place and configure webpack and babel depending on the situation. However, for those who already used CRA for their projects, it can be hard and time consuming to eject our existing project.

Therefore, one workaround I found to reduce the bundle size is with the use of a library named depcheck. We can install the package by

npm install depcheck

and run command,

depcheck

Then we will see all the unused dependencies and missing dependencies in a list. which later we can uninstall accordingly. Here is an example of the list I got for my portfolio website.

PS D:\Github Projects\portfolio-website> depcheck
Unused dependencies
* @fortawesome/fontawesome-free
* @fortawesome/free-regular-svg-icons
* @material-ui/icons
* @mui/styles
* @testing-library/jest-dom
* @testing-library/react
* @testing-library/user-event
* body-parser
* concurrently
* mongoose
* node
* react-swipeable-views
* request
* sass
* web-vitals
* webpack
Missing dependencies
* eslint-config-react-app: .\package.json
* @material-ui/styles: .\src\components\Project\ProjectDetails.jsx

My take: Third Party UI library are usually large in size, which could dramatically lower the performance of our website. For example, my website uses icon from fortawesome, UI components from material UI, and animation library from gsap. From the Lighthouse Treemap below, we can see a lot of unused resource from them(on the right half).

Tree map from Google Lighthouse

Therefore, think considerably before you implement them in your projects.

2. Use lazy loading and code-splitting

There are a lot of different ways to lazy load. And we can lazy load different elements.

• Component lazy loading in React

For component, luckily in React there are build-in method that we can use to lazy load our components. It allows us to dynamically import components.

const MusicPlayer = React.lazy(() => import("./MusicPlayer"));

Here is an example taken from my website, where I am dynamically importing my Music Player component. The reason to use lazy loading is, this component is at the very bottom of my page near footer, so users do not need to see it during the first painting.

The lazy component should later be rendered inside a Suspense component that looks like this,

<Suspense 
     fallback={
        <Box>
             <Widget>Loading...</Widget>
        </Box>}
>
     <MusicPlayer />
</Suspense>

My take: The habit of breaking our website into smaller reusable component now makes more sense because in a way we can only load the essential components during the first painting, so users won’t have to wait for everything to be loaded. Though the differences for smaller website are in milliseconds, for a scalable website that later becomes enormous, these differences could adds up to seconds I could imagine.

• Metadata preloading (audio/video)

Set preload attribute to none restricts browser from loading the audio or video file when the page loaded, thus saving a lot of network resources.

Here is an example taken from my website,

<audio id='audio' preload='none' ref={audioRef}></audio>

My take: The audio/video file are usually greater than 3MB (before compression),which takes longer time to load if we wait for it. Therefore, load the metadata after user taking their first action could greatly improve page load speed.

• Lazy loading with images

Set loading attribute to lazy would delay the loading until everything else is loaded. This is extremely helpful if we have a lot of images to display on our website.

Example:

<img src="image.jpg" alt="..." loading="lazy">

My take: Although theoretically we can lazy load every images on our website, we don’t want to apply these settings to images that are within the first viewport that users can see.

Results by Google Lighthouse shows performance improvement

I will show the improvement of my website. Simply by doing these tricks I mentioned in the article, it makes me realize that even a small effort in doing so could lead to a 34% performance leap. (Your result may vary.)

Before:

before

After:

after

In the next article, I will be discussing how we could improve accessibility of our website, which is also a measure factor of SEO ranking. Make sure to keep your eyes on my next medium update.

Let’s connect:

Portfolio | Github | Medium| LinkedIn

Code-Splitting - React

Lazy loading - Web Performance | MDN