How to Improve Website Speed – Got 100% Score at Google PageSpeed Using Kadence Theme and Shared Hosting
The biggest challenge I have ever faced since I started building websites is optimizing a website for speed. It always seems impossible to score 100, regardless of how many YouTube tutorials or tips and tricks videos I watched. And it’s become more difficult to improve website speed when I used a shared hosting plan to host my website.
Most of my clients are not ready to make a heavy investment at the beginning of their projects until they are certain about it’s success. So they prefer Shared Hosting Packages to keep the cost low at the start. Here I would give an example of a similar project where I was using NameCheap’s Stellar Plus Shared hosting Package, which is an elementary hosting plan and suitable only for small website projects.
I was using Kadence Theme, which is bundled with Kadence Blocks content editor. As I was using pro versions of both theme and content editor, I assumed it was far-fetched to achieve ideal performance while using advanced widgets and blocks.
In this article, I’ll share my complete personal journey of how I achieved this milestone. I’ll explain the exact setup, tools, and step-by-step process I used to reach a 100% Score at Google PageSpeed Insights Test despite using shared hosting and without hiring a developer.
How I Improve Website Speed and Does this matters?
Before going into the process, it’s important to understand that why the Google PageSpeed Insights score is so important.
Google PageSpeed Insights is a tool by Google to measure a website’s loading speed. It also set some standards named as Core Web Vitals to measure a website’s and it’s pages’ performance, particularly how quickly a page fully load. It’s also help to point out the areas that need attention and suggest fixes for improvement. These Core Web Vitals include:
A higher score not only indicates a fast-loading website, but it also helps to improve user experience, SEO, and more traffic. Being a designer, my focus always remains on making an attractive design, which most of the time results in a sluggish website. I realized that my focus should be more on the technical aspects as well as good design and layout, because despite having a good design it seems challenging to achieve a seamless client experience.
My Initial Struggles (When 80% Felt Impossible)
Upon first launching my website was looking great, and I was fully convinced that everyone was going to love it as well. As i was aware that, along with good design, a website must be efficient and technically sound, I ran different performance tests on my site, and after the Google PageSpeed Insight test results were very disappointing. Upon first test site could attain only 65 – 75% on desktop, and the condition was even worse for the mobile test.
At first, I tried to convince myself that because my design is good, I have to pay the price for a good design and compromise on speed. However, on comparing my website with others, I noticed that some other websites are attaining 95 – 99% score along with having an attractive design and extensive animations. So it means it’s possible to achieve high performance and speed along with good design and user interactivity. I took it as a challenge for me. Further, I was not very good at dealing with the technical side of the website, it was an opportunity for me to improve this skill as well.
So the trial and error phase started, and I concluded that the problem was not with Kadence theme or Kadence Block, and neither was it because of shared hosting. The problem was how I set it up.
Some mistakes I was making early on:
The Turning Point:
Discovering the Power of Kadence + Smart Optimization
Things started to change when I dealt with it more systematic aproch rather than trying different hacks suggested by lots of YouTube videos.
I came to the conclusion that Kadence Theme + Kadence Blocks is in fact the fastest, most lightweight WordPress setup. Kadence is developed with a primary focus on performance; however, it is essential to configure it properly to acquire the desired results
The rest came down to:
Let’s break down the exact steps I took to finally hit 100%.
Choosing the Right Theme & Blocks (Why Kadence Was Key)
Kadence Theme Pro was a big discovery. Like all other design-oriented developers, I was a big fan of feature-loaded content builders such as Elementor, Divi, and Thrive. Whenever there is a need to build a website with good design choice was one of these builder but it always at the cost of performance. But now i had a theme with more or less same features yet lightweight and with primary focused on performance.
Key optimizations from Kadence:
As Kadence Blocks provides most advance design features built-in and there was not need to use other plugins and scripts, It reduced the number of requests on my pages.
Cleaning Up Plugins
There was time when I have more than 20 active plugins to achieve different tasks. It was defiantly means that website has to load multiple scripts and style for each plugin resulting an extensive loading time. I cut down this number to 8 more necessary plugins.
There was a noticeable improvement in PageSpeed scores after reducing the number of active plugins the use of Kadence for most of the design and structural work.Optimizing Images
The biggest factor that is mostly ignored by new developers is proper image optimization. Even a single image that is not properly resized and with a non-recommended file format can ruin the entire speed score. I normally prefer to optimize images before uploading them to the site, in that way I can keep full control over the optimization process. I use usually use some image editing software like Photoshop or some online image optimization service and make sure that:
Trying to keep the homepage size as small as the quality is not compormized. Ideal page size is between 600 - 800 KB.Setting Up Caching & CDN
Lightweight Design Choices
Instead of using heavy sliders and animations, I choose other techniques to improve user experience and engagement. For Instance:
Resulting a cleaner and faster website without losing attractive design.
Testing With Google PageSpeed Insight
Finally when my website ready for first launch ... I though it better to run a speed test.
Honestly I was not expecting this!!!
100 on Mobile. 100 on Desktop.
Lessons I Learned Along the Way
Final Results
After all my optimizations, my setup looked like this:
Conclusion
Once it seemd far-fetched to get 100% score on Google PageSpeed Insights. My point of view was always that it required expensive hosting, a custom-coded website, extensive development knowledge and skills. So I've never bothered to even try to achieve it with low-budget projects.
However, when I tried, I came upon this conclusion that it's all about adopting a systematic approach and making smart choices, such as choosing the right theme, optimizing different assets, and proper configuration.
The purpose of giving my own example is to provide a way out and encourage other developers focusing more on design. If being a designer, I could achieve this; anyone with a similar approach could achieve it
I wouldn't say "Proof in the pudding" anyhow, my site is live and open for a speed test.
