A Need For Speed: Achieving a Fast UX with WP in 2023
Peering under the hood of our WordPress website during a recent self-inspection focused on improving our page-loading speeds, it quickly became apparent that we had a few areas in need of a tune-up.
Right off the bat, we knew the bloated third-party theme and the multitude of plugins that came with it had to go. Aesthetically speaking, it was certainly a beauty. But in terms of page-load speeds, even after several rounds of optimizations that yielded improvements, it still left something to be desired.
We realized that in the long run, it would be more beneficial to bite the bullet now and rebuild the website in a more streamlined manner. If you or your company are facing a similar scenario, we highly recommend you do the same.
We get it. The idea of a full website rebuild may seem daunting, but it will be far less time-consuming than trying to maintain a fast and reliable user experience with a bloated third-party theme and a crew of unruly plugins.
UX & Speed Optimizations: A Two-Pronged Approach
To achieve our goals of improving the UX and page-loading speeds of our website, we decided to take a two-pronged approach.
Improving Our Site’s Efficiency
The first prong involved rebuilding and streamlining our core site components and content hierarchies. This made our website more lightweight and efficient, resulting in immediate improvements in loading speeds.
Evaluating & Deciding Which New Optimization Techniques to Adopt
The second prong involved conducting an in-depth analysis of the current state of WordPress page speed optimization approaches in 2023. We carefully evaluated various practices and determined which new techniques, if any, we would adopt.
1. A Common Challenge: Mobile PSI Scores
Like it or not, we live in a mobile-first world.
And, like most of you reading this article, our troublesome areas were all related to our Mobile scores in PageSpeed Insights (PSI). Our real-world UX felt okay, but our Mobile PSI results were just barely moving the needle into passing.
We don’t spend much time on Desktop PSI scores as these are typically good out of the gate. The same goes for GTmetrix. It’s a helpful tool for waterfall metrics, but it only grades Desktop without a paid subscription.
Ultimately, having a great Desktop PSI and GTmetrix score doesn’t count for much if the Mobile PSI is still buried in the red.
2. Achieving a Perfect 100 PSI Score
Alas! After a battery of trial and error tests throughout the month of May, we have put together the makings of a successful speed recipe.
Our site now sits at a comfortable 97 on the infamous Mobile PSI and a perfect 100 PSI score on Desktop.
So we thought it would be fun to share our findings with all of you. After all, what is better than doing great speed with a bunch of strangers and friends? (We kid, we kid!)
3. Does Your UX Score Well in PSI and Real-Life? It should.
We didn’t just want to appease Google’s PageSpeed Insights (PSI) crawler for a good score. Truth be told, a website can have a very high PSI score and still feel brutally slow and clunky in real life.
People expect fast-loading websites. Plain and simple. If your website takes too long to load, visitors are likely to abandon it and move on to a competitor. This can have a significant impact on your SEO and SEM campaigns.
During our rebuild, we wanted the same as most of you reading this article: A site that scores well in PageSpeed Insights and GTmetrix and feels fast to visitors.
Why Having a Fast UX is Important for SEO and SEM
A fast UX is essential for both organic SEO and paid SEM campaigns. Google has said that page speed is a ranking factor, and studies have shown that faster websites tend to rank higher in search results. This is because Google wants to provide visitors with the best possible experience, and a fast loading website is one of the key factors in providing a good user experience.
The science behind a fast UX & a positive ROI
A fast UX can also benefit paid SEM campaigns in several ways.
First, a fast UX can help to improve your Quality Score. Google’s Quality Score is a measure of how relevant and engaging your ads are. A high Quality Score (aka Ad Score) can lead to higher ad rankings and lower costs. A fast UX can help to improve your Quality Score by making the experiences of your ad traffic more user-friendly and engaging.
Second, a fast UX can help to increase your CTR. When visitors click on an ad and arrive at a slow-loading landing page, they’re more likely to bounce back to the search results. A fast UX can help to increase your CTR by making your landing pages load quickly and smoothly.
Third, a fast UX can help to increase your conversion rates. A fast UX can make it easier for visitors to complete the desired action on your website, such as making a purchase or signing up for a newsletter.
4. Our Strategy: Creating the Right Vibes
Having been a lifelong musician, I can appreciate a fine rig. I’ve even had the pleasure of playing on some of the finest. However, the most impressive performances tend to come not from those playing on the fanciest new setups but rather from those who have put in the time to properly hone their craft.
To put it simply, I love it when a musician is able to just light my hair on fire through an unassuming yet rock-solid rig.
That’s the vibe we aimed for with this speed optimization overhaul. Which now brings us to our setup process and tool selection for this job.
Ideal Practices for Creating a Fast UX
Just like the skilled musician from above that lit our hair on fire with an incredible performance, delivering an impressive UX via the page-loading speeds of your website, also requires many tedious considerations and implementations to be successful.
Here are a few:
- Avoid using too many plugins
- Cache content
- Choose a lightweight website builder
- Enable compression
- Implement caching at different levels (browser, server, database)
- Implement code minification
- Implement DNS prefetching
- Implement lazy loading for content other than images
- Implement server-side rendering (SSR) or client-side rendering (CSR) strategy
- Lazy loading images
- Minify CSS and JavaScript
- Minimize HTTP requests
- Minimize the use of external fonts
- Minimize use of external tracking scripts
- Monitor the website’s performance
- Optimize & repair databases
- Optimize API and external service integrations
- Optimize & Remove unused CSS
- Optimize critical rendering path
- Optimize database queries and indexes
- Optimize font loading
- Optimize for browser cache validation
- Optimize JavaScript execution
- Optimize mobile performance
- Optimize network connection and latency
- Optimize resource loading order
- Optimize server response time
- Prioritize above-the-fold content loading
- Reduce the number of DOM elements
- Remove unnecessary third-party scripts
- Select a reliable hosting provider
- Use a content delivery network (CDN)
- Use a web performance testing tool
- Use asynchronous loading for scripts and stylesheets
- Use compression
- Use efficient CSS selectors
- Use modern image formats (e.g., WebP) for better compression
- Utilize browser rendering optimization techniques
- Utilize image optimization
- Utilize a hosting company specializing in WordPress
- etc.
Fortunately, the implementations we feature in this article allow you to cover all of the above and much more.
So let’s dig in.
5. Setup: Practical, Cost-Effective & Inclusive Web Design
We carefully selected common yet reliable tools that are accessible to most website builders and developers.
Over the course of six weeks, we extensively A/B tested countless optimization settings to ensure that our recommendations are practical, cost-effective, and inclusive.
Here’s what we used and how we did it.
6. Toolbox
// testing
PageSpeed Insights
PageSpeed Insights: This is a free tool from Google and the standard for measuring the loading speeds of website landing pages. We put a particular focus on Mobile PSI.
PageSpeed Insights provides both lab and field data about your website. It assigns a score to your website on a scale of 0 to 100, with 100 being the best. The score takes into account various factors, such as the size of your website’s files, the number of requests it generates, and the efficiency of your code.
Our primary focus was on enhancing our mobile speed and scores within PageSpeed Insights.
GTmetrix
GTmetrix is a website performance testing tool that presents a detailed waterfall chart to help developers visualizes how a website loads. Our use of this tool was limited in our rebuild process due to the fact the free version of GTmetrix only provides Desktop grading.
// hosting
SiteGround
SiteGround: (Go Geek): We’ve been hosting WP sites with SG for well over a decade and firmly believe that SiteGround is the best WP hosting provider among the six largest in existence today.
If you want the power of one of the largest hosting companies behind your WP website, the only one we recommend is SiteGround.
We’ve hosted hundreds of WP installations with SG since 2011. Today, they are much bigger and still getting better. We now host over 60% of our total client sites with SiteGround.
SiteGround‘s range of plans, cost effectiveness, and consistently good customer service have made them our top recommendation for most WP installations.
We use and recommend the Go Geek plan.
Thinking of Purchasing a SiteGround Hosting plan?
We think that’s a great idea.
Here’ some additional info we think might help:
On this website, we use SiteGround (Go Geek) hosting. This is what we recommend.
Grow Big can also be a great option if you’re just starting out and only hosting a small site. You can always upgrade to Go Geek later! We don’t recommend going with a tier lower than Grow Big for most businesses.
You can help support free help articles like this by purchasing a Siteground Hosting Plan through one of our affiliate partner links below.
Questions or need help? If you have any questions you can contact us directly or leave a comment below. We thank you in advance!
// theme
Hello Elementor
Hello Elementor is a lightweight and fast-loading theme that is specifically designed to work seamlessly with Elementor page builder.
After years of indifference towards the growing trend of block editors, we made a decision about 18 months ago to give Elementor Pro a serious try.
Since then, we have fully embraced Elementor and incorporated it into numerous site builds. The range of features and user-friendly interface offered by Elementor has greatly enhanced our website development process and provided a user-friendly interface for our clients.
// builder
Elementor
Elementor & Elementor Pro: Streamlining Website Development
Elementor is a robust drag-and-drop page builder plugin for WordPress, offering a more visual and artistic approach to website customization compared to traditional coding.
The hype in this case is real, Elementor Pro really is “The Swiss Army Knife of WordPress Plugins: With widgets for every need, endless customization options..” This allowed us to nix all of the bulky plugins that came with our previous third-party theme.
Efficient Customization with Templates and Widgets
Through a diverse range of template, widget, and block functions, we can quickly create processes and templates for different sections of a site hierarchy or specific landing page sections. The intuitive interface and real-time preview features enable us to witness changes in real time.
The Advanced Features of Elementor Pro
Upgrading to Elementor Pro brings access to advanced features, including theme builders, pop-up builders, WooCommerce integration, and extensive design options. This upgrade enhances the website development process.
Rapid Development with Elementor Pro
Elementor Pro consolidates page element plugins, reducing the need for additional plugins and simplifying website development. It offers comprehensive capabilities that provide creative control and flexibility.
Designing Unique and Professional Websites
With Elementor Pro, we can rapidly design unique and professional websites tailored to their specific needs. It serves as an efficient solution for building exceptional landing pages and full websites.
Elementor Deep Dive: Balancing Creativity and Coding Expertise
Elementor: Beyond the Marketing Hype
While Elementor and similar block-editors market that they require no coding knowledge, the reality is bit more nuanced.
Rediscovering Artistic Joy in Web Design with Elementor
Designing websites solely through code can lack artistic fulfillment, but Elementor‘s visual swapping of web design elements transforms the workflow into a more enjoyable process. Elementor brings organic, artistic joy to the workflow of skilled web designers.
Striking the Perfect Balance with Elementor & Coding
Approaching Elementor with a deep understanding of HTML, CSS, JS, and PHP, and integrating it with an Elementor Pro workflow, proves to be a win-win. For example, experienced coders can anticipate the impact on page loading times and UX metrics when incorporating different elements.
Professional Results with Elementor Pro
While traditional coding knowledge isn’t a prerequisite for getting started with Elementor, hiring a Pro ensures the creation of a professional website with Elementor. What’s more, some agencies (like ours) will not only set up and maintain the site, but also teach clients how to effectively use Elementor.
Elementor & Page Loading Speed: Slow or Fast?
Navigating the Reviews & Criticisms
Elementor has faced criticism in the past regarding its potential impact on page loading speeds due to excessive scripts. However, our experience with Elementor leads us to conclude that many of these criticisms are at least, somewhat misguided.
Balancing Functionality and Performance
Elementor’s utilization of more JS compared to other page builders serves a purpose. It is because Elementor provides the most comprehensive and visually appealing page builder elements in the WordPress ecosystem.
Therefore, understanding the potential impact of specific elements on page speed is crucial for the site developer, as is the knowledge of optimizing the site for improved user experience (UX).
Developer Choices Matter
The elements within Elementor that tend to contribute to longer loading times are largely dependent on the choices made by the developer. If your Elementor back-end is running slow, it is likely because the designer prioritized aesthetics over page load speed or didn’t consider page-speed UX when incorporating certain features.
I’ve written on this point prior. By and large, if your WordPress installation is wonky, broken, compromised, or otherwise FUBAR, it’s most likely due to internal development choices, actions, or inactions rather than external factors and forces. There are exceptions, of course.
Addressing Concerns and Making Improvements
Elementor’s development team has made significant strides in recent years to address page speed concerns and implement various improvements. They actively listen to their customers and consistently work on enhancing the performance of the plugin.
There’s a reason why almost 9 million sites actively use Elementor, firmly planting it at the #1 WP page builder position in 2023. In fact, according to w3techs, roughly 43% of the entire internet runs on WP, and of that, 8% runs on Elementor.
Achieving a Balance: Speed and Visual Appeal
Web designers no longer have to sacrifice a fast-loading page for visually appealing elements. With proper planning and know-how, it is possible to achieve both without compromising user experience.
Moving Web Design Forward
Elementor has improved the processes through which millions of people approach web design, providing a powerful and flexible platform for creating stunning websites. We tip our hats to that.
Thinking of Purchasing Elementor Pro?
We think that’s a fantastic idea.
Here’ some additional info we think might help:
All you need to start using Elementor Pro is a paid Plugin Plan.
While Elementor also offers hosting plans, you don’t need it to use Elementor Pro.
On this website, we use SiteGround (Go Geek) hosting + a Plugin Plan for Elementor Pro
You can help support free help articles like this by purchasing Elementor Pro through one of our affiliate partner links in this article.
Questions or need help? If you have any questions you can contact us directly or leave a comment below the article.
We thank you in advance!
// optimization plugin
Perfmatters
After testing several of the highest-rated and most popular WordPress page-speed optimization plugins, we have found Perfmatters to be the best tool for the job, by far.
We consider Perfmatters to be the most comprehensive and well-built WordPress optimization plugin available in the market today. Its reasonable price point sets it apart and makes it a standout choice.
Perfmatters is developed and supported by a talented team of brothers who promptly respond to service requests, leaving a lasting impression on us.
We wholeheartedly recommend this plugin.
Here are some of the features and functionalities in Perfmatters that we particularly like and utilize:
Perfmatters toggle settings
One of the crown jewels of Perfmatters is the Script Manager feature.
This feature allows for complete control over which scripts are executed at a granular, page-by-page level. It also provides options to block scripts in multiple locations simultaneously.
How to Optimize with Perfmatters
Below is a fantastic YouTube video demonstration hosted by Kyle Van Deusen (co-founder of The Admin Bar and the owner of OGAL Web Design) featuring Perfmatters co-founder Brian Jackson as he shows you how he optimizes Elementor with Perfmatters.
If you’re interested in learning how to optimize a WordPress site, this a great video to start your deep dive.
Thinking of Purchasing Perfmatters?
We’d have to agree, that’s an awesome idea!
Here’s some additional info we think might help:
All you need to start using Perfmatters is a paid license.
On this website, we use Perfmatters for optimization and our BunnyCDN rewrite.
Keep in mind that Perfmatters handles optimizations, not cache. We use SG Optimizer for Caching and it works great with Perfmatters as will most other free and paid caching plugins.
You can help support free help articles like this by purchasing Perfmatters through one of our affiliate partner links below.
Questions or need help? If you have any questions you can contact us directly or leave a comment below the article.
We thank you in advance!
// caching
SG Optimizer
As our hosting provider, SiteGround offers the advantage of using SG Optimizer for caching purposes. Unlike typical caching plugins, SG Optimizer establishes a direct connection with SiteGround, allowing us to benefit from advanced caching mechanisms such as Memcache. We also take advantage of dynamic caching and webp image delivery with SG Optimizer.
For Best Results: We suggest that you use all 3 of SiteGround’s Caching Options together. This works great with Perfmatters & BunnyCDN as well!
// cdn
BunnyCDN
BunnyCDN is the latest addition to our toolbox, BunnyCDN has quickly become our preferred content delivery network. The recent launch of their new and very user-friendly admin interface has made setting up new CDNs fast and painless.
What is a CDN? Why should I add one?
A CDN, or Content Delivery Network, is a network of servers that are distributed around the world. When a user visits your website, the CDN will deliver the content from the server that is closest to the user. This helps to improve the loading speed of your website for users all over the world.
What are the advantages of choosing BunnyCDN?
BunnyCDN is a content delivery network (CDN) that offers a number of advantages over other CDNs. Here are some of the pros of using BunnyCDN:
- Speed: BunnyCDN is one of the fastest CDNs available. They have a global network of servers that are optimized for speed. This means that your content will be delivered to your visitors quickly, regardless of their location.
- Pricing: BunnyCDN is very affordable. They offer a variety of pricing plans to fit your budget. You can also pay as you go, so you only pay for the bandwidth you use.
- Features: BunnyCDN offers a number of features that other CDNs don’t. These include:
- Image optimization: BunnyCDN can automatically optimize your images, reducing their file size and improving their loading speed.
- Video delivery: BunnyCDN can deliver your videos with high quality and low latency.
- Security: BunnyCDN offers a variety of security features, including DDoS protection and SSL certificates.
- Support: BunnyCDN offers excellent support. They have a team of experts who are available 24/7 to help you with any problems you may encounter.
Overall, BunnyCDN is a great choice for businesses that want a fast, affordable, and feature-rich CDN.
Here are some additional pros of using BunnyCDN:
- Easy to use: BunnyCDN setup is strait-forward. You can get started in minutes.
- Scalable: BunnyCDN is scalable, so you can easily add more bandwidth as your traffic grows.
- Reliable: BunnyCDN is a reliable CDN. They have a 99.9% uptime guarantee, so you can be sure that your content will be available when your visitors need it.
If you’re looking for a CDN that offers all of these advantages, then BunnyCDN is a great option.
Thinking of Purchasing BunnyCDN?
That’s a great choice to speed up your WP install.
Here’ some additional info we think might help:
BunnyCDN offers a 14-day trial 100% for free.
On this website, we use Perfmatters for optimization that also handles our BunnyCDN rewrite. It’s a great combo.
If you’re not using an optimization plugin that can handle CDN rewrites, no worries. BunnyCDN has a great WP plugin you can use to your connect your WP site to your BunnyCDN account. Quick and painless.
You can help support free help articles like this by signing up for BunnyCDN through one of our affiliate partner links below.
Questions or need help? If you have any questions you can contact us directly or leave a comment below the article.
We thank you in advance!
Why didn't we use Cloudflare or SG's CDN to speed up our site?
Here is where we diverge from many WP speed optimization guides.
We value Cloudflare and other proxy services more for their security features than for their page-speed optimization capabilities.
While Cloudflare does offer excellent services, we don’t recommend relying solely on them to accelerate landing pages on sluggish WP installations.
We do utilize Cloudflare for some of our projects, primarily for security purposes. For instance, if you have a WordPress installation on a subdomain but want the WP URLs to resolve on the same root URL as the main non-WP site, Cloudflare’s DNS proxy can be quite useful. It serves as a valuable proxy in such cases. Additionally, if your site is experiencing a flood of spam or DDoS attacks, employing a proxy like Cloudflare becomes a sensible choice.
SG has recently launched V2 of its CDN, which shows promise. However, just as we recommend using different companies for domain registration and hosting providers to keep services separate, we also prefer maintaining a distinction between our CDNs and hosting providers. This isn’t a reflection on SG’s CDN; it’s simply a general principle we follow.
Are There Benefits To Separating Service Providers?
You bet there are! Keeping a separation of services using different companies for hosting providers, domain registration, CDNs, plugins, and other services offers many important benefits:
Reliability: Reduces the risk of a single point of failure and minimizes the impact of downtime or technical issues.
Specialized Expertise: Access to the best providers for each service, leveraging their expertise, support, and specialized features.
Flexibility and Scalability: Freedom to choose and switch services based on specific needs, enabling easy resource scaling.
Performance Optimization: Utilizing unique optimizations from different providers to enhance website performance.
Security: Diversifying services across providers adds an extra layer of protection against single security breaches.
Cost Optimization: Comparing pricing and selecting the most cost-effective options for each service.
Avoid Vendor Lock-In: Retaining the freedom to switch providers without disrupting the entire infrastructure.
Streamlined Management: Efficiently managing and delegating tasks to respective experts or teams responsible for each service.
Proper coordination, compatibility, and system architecture are crucial for seamless integration and optimal performance.
Final Thoughts
WordPress + SiteGround + Elementor Pro + Perfmatters + Bunny CDN = A Winning WP Combo in 2023.
Sure, we could have chosen a pricier managed WordPress solution or a boutique hosting company. We could have opted for a minimalist page builder that relies less on JavaScript. However, we deliberately decided against these options for this particular project. We appreciate these tools and the companies that develop them. In the near future, we will provide further details on other excellent combination options available at various price points. That’s one of the advantages of utilizing a WordPress backend—the wealth of setup and customization possibilities that can cater to diverse industries and projects.
However, we wanted to seize this opportunity to solidify a few concepts:
1. You do not have to spend a fortune on hosting to achieve a fast and reliable user experience (UX) that scores well with both real website visitors and PageSpeed Insights (PSI).
2. Websites can be functional, non-minimalist, enjoyable, and still load quickly.
3. By choosing SiteGround, WordPress, and Elementor as your backend and combining them with Perfmatters + BunnyCDN, you can enjoy a dependable performance & blazing-fast UX (provided you have the right setup and management, of course!)
Affiliate Disclaimer
We utilize affiliate links on this blog and genuinely appreciate your support. Our commitment to integrity drives us to be selective with the products and services we promote. Rest assured, we refrain from endorsing subpar hosting providers, ineffective cache plugins, or any products that do not meet our standards. Your trust is important to us, and we strive to deliver valuable recommendations based on our own experience and expertise.
