Page speed is important if you want to rank on google. I recently managed to do this:
In this article, I'll share how I managed to make my site fast and some of the things I noticed that slowed it down.
Bundling your Scripts to reduce their File Size
When scripts are sent across the web, they contain a lot of unnecessary bloat. Unlike humans, computers can read code even if its just a bunch of characters, so reducing any excess is going to help increase the speed of your page. There are many bundlers like webpack, which will automatically take your scripts and optimize the file size. Make sure you are using them!
Use Purge CSS
Purge CSS checks your entire code for unused selectors and removes them from your style sheet.
Prefer regular Stylesheets over Styling with JavaScript
One of the biggest surprises for me was the fact that removing styled components, a framework that made it possible to use CSS in React, significantly increased the speed of my site. I was not aware that there was actually so much client-side JavaScript being executed by styled components, given that I assumed it was compiling to CSS on the server. The JavaScript execution time was reduced by 1.3 seconds, which could easily be the difference between a medium or good lighthouse score.
Reduce the Size of your Images
Images are some of the biggest files that you send across the network. You want to have your images to be as low resolution as possible, without reducing the quality.
Avoid unnecessary Libraries
Often, I would throw a library or package at a problem I was having. I really advise against this, because you end up having to undo a lot of the implementation once you want to increase the page of your site and these excess libraries are increasing the overhead.
Render the Website on the Server instead of the Browser
When you are using a single page framework, the content of the site is built from within the browser via JavaScript. There are services, however, that allow you to render these JavaScript based websites into HTML documents on the server and send them to the client. When you are rendering the content on the server, you gain multiple benefits: your website is easier to read for web crawlers like those from google and your users browser no longer has to do the heavy lifting of building the content. This is significant, because it means that the user can see and interact with content much faster, which is one of the most significant metrics that make up your page speed score ("Time to Interactive" and "First Contentful/Meaningful Paint"). Personally, I use Gatsby to render and process the content, but there many other good ones.
Avoid iFrame Embeddings if possible
It can be tempting to include a social media iFrame widget, but these are going to slow down your site considerably. Although you took care of adjusting the size of all your images to fit your website, Facebook and Twitter are not, so be ready to take a speed hit when you embed their content.
Top comments (0)