HomeContact
Web Performance
Performance Improvement
August 25, 2021
1 min

##Performance improvement on my blog

Initial Pagespeed Run

I am trying different ways to improve the loading speed of my blog on mobile.

When I run my site on pagespeed insight, the current score on mobile is 46

This is the improvement suggestion

The Lab Data

First Contentful Paint 3.4 s
Speed Index 4.2 s
Time to Interactive 12.2 s
First Meaningful Paint 3.4 s
First CPU Idle 9.9 s
Max Potential First Input Delay 450 ms

Opportunity

Serve images in next-gen formats 1.5 s
Avoid multiple page redirects 1.11 s
Efficiently encode images 1.05 s
Properly size images 0.45 s
Eliminate render-blocking resources 0.15 s
Remove unused CSS 0.15 s

Diagnostics

Ensure text remains visible during webfont load
Reduce the impact of third-party code Third-party code blocked the main thread for 1,720 ms
Minimize main-thread work 8.1 s
Reduce JavaScript execution time 5.4 s
Avoid chaining critical requests 1 chain found
Keep request counts low and transfer sizes small 134 requests • 1,505 KB

Initial Site Checker Run

After running the speed test on pagespeed insight, I am also running a free website SEO checker online as some of the issue might be overlapping, so fixing 1 problem will also fix the other in SEO.

Website Score 17/100

All issues
More than one H1 on page:  2 pages
H1 is missing: 1 page
Canonical to non-200: 14 pages
H1 = Title: 5 pages
Title too long: 1 page
Canonical is missing: 6 pages
301 Redirects: 14 pages

Both results are poor, I will have to spend a lot of time to fix it and bring the score up.

SEO fixes

  • Remove multiple h1 on a few blog posts.
  • fixing Canonical is missing issue
this can be done by installing gatsby canonical-urls plugin

npm install --save gatsby-plugin-canonical-urls

// In your gatsby-config.js
plugins: [
  {
    resolve: `gatsby-plugin-canonical-urls`,
    options: {
      siteUrl: `https://www.example.com`,
    },
  },
]
  • 301 Redirects: 14 pages I spent a lot of time trying to solve this issue. This is because of the trailing SLASH in my blog url.
301 Issue
path: 'posts/cloudflare-google-storage-caching-setup'

NO 301 issue
path: 'posts/seo-technic-for-my-website/'

because I have install a gatsby plugin to remove trailing slash for my site, to remove 301 I just need to add / in the path of my markdown post.

If you find my tips are useful, please support my work :)


Tags

#Performance
© 2021, All Rights Reserved.

Quick Links

Advertise with usAbout UsContact Us