Let's take a look!
- Third-party tracking code (like Google Analytics and Facebook Pixel)
- Slider images and carousels
- Animations and interactive elements
- Contact forms and social media sharing buttons (especially if they're attached to multiple pages on your site)
When a browser opens a website, it loads the entire HTML from top to bottom. As it should, right?
If those scripts have code bloat, your page's loading time will be even slower.
The faster your website loads, the better the experience it will give your users. If your page struggles to render essential elements, users won't stay around for long.
The FID (First Input Delay) metric measures the time from the first user interaction with a page to when the browser starts processing the response. Website owners should strive for a FID of 100 milliseconds or less.
But here’s the kicker:
Go to PageSpeed Insights. After entering your website's URL in the textbox, click Analyze.
You'll see a complete analysis of your Core Web Vitals. Scroll down to see the Diagnosis section (it may take a little while to load).
In DevTools, open the command menu by typing Control + Shift + P (Windows and Linux) or Command + Shift + P (Mac).
Next, type "coverage" in the text box and select Show Coverage.
Once you see the Coverage tab, click Reload.
As long as your above-the-fold content doesn't require it and it doesn’t break any critical website functionality, you can remove the unnecessary code discovered in DevTools (as shown above).
<script src="script.js" defer></script>
Or, you can include the async attribute in the <script> tag. For example:
<script src="script.js" async></script>
Instead, you can also use plugins like Asset CleanUp: Page Speed Booster.
You can use open-source frameworks like Rollup, Webpack, and Parcel to apply code splitting to your website.
Minifying removes any extras, resulting in lighter code that executes much faster.
You can remove unnecessary characters manually, or you can use plugins like Fast Velocity Minify to get the job done. Alternatively, you can also use Cloudflare's auto-minify functionalities.
- Prefer static images over sliders and carousels (especially above the fold). Sliders are fantastic, but you shouldn't use them at the expense of your page speed.
- Don't overuse social widgets and third-party tracking resources.