Is your WordPress website loading so slowly that you have been searching for “how to fix my website”? Or perhaps you have gotten tips to fix your website but they sound confusing, making you overwhelmed?
In my own research, I realized most website fix articles are very technical.
In this article, I hope the analogies I use will make it easier for you to relate. So that you will understand what is required to fix your WordPress website.
While I was designing my website, I totally ignored the things to consider when building one! I was more attentive to the look and feel (interface) of my website that I forgot about its performance (experience).
A website needs to always consider its look and feel together with its performance. In more technical terms, the UI (user interface) and UX (user experience) of a website need to work very well together.
In the Google Search Update in August 2021, both UI and UX are weighed considerably to complement each other.
When I used Google PageSpeed Insights to find my site’s performance, I was horrified that my website had a red score! I needed help with my website!
Related Article
Affiliate Link Disclosure
Some of the links on here are affiliate links, and I may earn if you click on them, AT NO EXTRA cost to you. I hope you find the information here useful! Thanks.
Here is the summary of this article:
What Is Page Experience?
How To Fix My Website For Better Page Experience?
What Is The Google Search Update?
1. Core Web Vitals
i. Loading – Largest Contentful Paint (LCP)
How to fix LCP
ii. Interactivity – First Input Delay (FID)
How to fix FID
iii. Visual Stability – Cumulative Layout Shift (CLS)
How to fix CLS
2. Mobile Friendly
How to fix Mobile Friendly
3. HTTPS
How to fix HTTPS
4. No Intrusive Interstitials
a. Intrusive Popup
b. Intrusive Standalone Popup
How to fix PopUps
FAQ
How To Improve My Website Page Experience
What Is Page Experience?
Imagine going to a new restaurant that has been the talk of the town. You found yourself smiling as you approached the entrance of the restaurant because the staff acknowledged your presence with a reciprocating smile. They immediately welcome you and walk you through the restaurant. While you walk in, soaking in the atmosphere and finally being able to relate to all that talk about this establishment.
Similarly, Google uses the term Page Experience Ranking Signals to rate someone’s experience as they either click on a link or hit the enter key right after typing the URL to your website.
How long it takes for them to see your page’s content is crucial. Your page should fully load within 3 seconds.
Page Experience Ranking Signals affect how users experience interactions with a website more than just the content within. Google takes into consideration how the website layout and its content allow ease of interaction for a user.
How To Fix My Website For Better Page Experience?
For each of the factors that affect your website’s Page Experience, I have listed my suggested fix below. These are what I have done to fix my site to get a better Page Experience. I hope you will find them just as useful.
What Is The Google Search Update?
When you do a Google Search, several factors will be taken into consideration before you get to see the results on the first page.
It’s like asking the librarian for a book you need for a reference on a certain subject. The librarian will pick the best 3 books to recommend to you. The choice of the best 3 books is based on their knowledge and expertise as well as the availability of the book in there.
The same with your Google Search. Google will trawl the Internet based on many factors like the following:
- Core Web Vitals:
- Is your website loading quickly?
- Are your website buttons interacting and working well?
- Is your website layout stable?
- Mobile Friendly: Is your website optimized to be viewed on a mobile device?
- HTTPS: Is your website secured with a padlock?
- No Intrusive Interstitials: Is your website content blocked by an auto popup?
Let’s dive into how we can fix the website issues below!
1. Core Web Vitals
A doctor would check your 4 primary vital signs at the triage; body temperature, blood pressure, heart rate, and respiratory rate. In this case, “Doctor” Google checks your website’s Core Web Vitals against these 3 components:
i. Loading – Largest Contentful Paint (LCP)
Take the LCP as the clinic staff who first greets you when you arrive for your appointment. The first impression they make matters to you and your whole visit to the clinic. Whether they greet you with a smile or acknowledge your entry through the clinic matters.
That is how the LCP is calculated by Google. How long does it take for a user to be impressed by your website’s loading of its content?
The loading of your website’s LCP has to make a very quick first impression – all within 2.5 seconds.
How To Fix LCP
Edit Photos To Have Smaller Size
The LCP of my website has got to be my profile photo. As a designer, I was more focused on making sure my photo is of great quality. But I forgot that for websites, the best quality needs to be small in size.
This was the first step to repair my website.
When my website was graded red by Google PageInsights and D by GTMetrix, my profile photo had a size of 1MB. After editing, the photo size shrunk down to 79kb without compromising its quality.
You can resize/edit your photos to have a smaller size using TinyPNG.
Replace Image CTA Buttons
Previously my website had 4 CTA (Call-To-Action) buttons with large photos as their background image. This caused a delay in the LCP as the images were of high size each.
I then replaced the images with icons for clarity instead. This has significantly improved my LCP as well.
For CTA buttons, full-background images are unnecessary. While I wanted my website to be aesthetically pleasing, I compromised on its quality. Thus, replacing the images with icons does the work of a call-to-action better.
You can still have your website looking good with the use of icons instead of large-sized photos. This is a helpful fix your website.
Optimize CSS
Besides the photo being the Largest Contentful Paint, the other backend factor not visible and can affect your page performance is the CSS (Cascading Style Sheet).
(2023 Update)
I now use the free version of Jetpack to help me with the CSS performance. I no longer use Autoptimize.
To help me improve on the CSS, I downloaded a free WordPress Plugin called Autoptimize.
After downloading and activating the Autoptimize Plugin, these are the options that need to be enabled in Settings > Autoptimize:
In JS, CSS & HTML
- Check Optimize CSS Code
- Check Aggregate CSS-files
ii. Interactivity – First Input Delay (FID)
The FID is a lot like the customer service you receive during your visit to the clinic. Did the staff inform you where to go next? Was there staff to help you?
The interaction on your website depends on how well your call-to-action buttons react to the user’s interaction.
The FID takes a much shorter time and demands your website’s interactivity to be within 100 milliseconds.
How to fix FID
Optimize JavaScript
JavaScript is responsible for most of a website’s interactivity. Any element or object that requires an action upon clicking will call out for the JavaScript to work its way.
In the Autoptimize settings, enable the JavaScript options below:
In JS, CSS & HTML
- Check Optimize JavaScript Code
- Check Aggregate JS-files
iii. Visual Stability – Cumulative Layout Shift (CLS)
The CLS is like the clinic’s furniture. How are they being arranged within the clinic? Is there an obstruction of furniture while you need to get from one point to another?
Have you been to a website where you’re reading a portion of text then suddenly an image appears and shifts the other portion of text away from view?
Much like the example below from web.dev. After a few seconds, the “Click Me!” button suddenly appears mid-way and shifts the second portion of the text below. This happened because there wasn’t a declared dimension for the button.
This causes layout shifts and there is no visual stability.
If the dimension for the button has been declared, you will see a blank space that should be taken up by the button before it appears. The calculation of your website’s visual stability is more technical.
The allowance of your website’s CLS is between 1 to 5 seconds.
How To Fix CLS
Fortunately, this is easy to fix for WordPress websites. For each photo you upload, you will be asked to input the width of the image/photo. Otherwise, just click on the image/photo and a field will pop up asking for the width.
If you have advertisements on your WordPress websites, you have to declare the ad’s dimension. Include the size in the script before your ad’s placement.
There are great examples from web.dev on advertisements.
Some of the best practices given by web.dev are as follows:
- Create a placeholder for your ad by declaring the style/dimension before the ad’s script
- Best to avoid placing an ad at the very top of the page (top of the viewport)
- If you do not have control over which size of an ad will appear on your website, reserve the largest possible size. (Only do this if necessary. This should be the very last resort.)
All these 3 components are very vital to your website’s health. Ensuring these 3 are at their optimum would mean your website is already half healthy. The next 3 factors are less technical but just as important.
2. Mobile Friendly
Your website should be optimized for mobile browsing. The layout of your website viewed on a desktop browser should be different from when it is viewed on a mobile device. According to Google, mobile-friendly pages’ text and content are readable without zooming and the CTA buttons are appropriately spaced.
Below there are 2 examples of websites; one is not mobile friendly, and another which is.
The left example is a non-mobile-friendly website. The layout is squeezed to fit the mobile view. The text is very small, too. The right example shows a mobile-optimized website.
How To Fix Mobile Friendly
The advantage of WordPress websites, you can easily make your website mobile-friendly. The latest update of WordPress makes editing your site much easier for both desktop and mobile devices.
However, I prefer to use Elementor on top of my WordPress site. Designing with Elementor has given me much freedom of creativity.
Creating a mobile-friendly website using either the native WordPress or Elementor capabilities should be relatively easy. Your mobile site should not be the same as your site when viewed via desktop.
Your mobile site should be much leaner in design and flow. Always have in mind that the font should be bigger than the desktop’s font size so that reading your site through a mobile device will be comfortable for anyone.
3. HTTPS
When the World Wide Web (www) was first introduced, websites were having their domain names start with “http” (HyperText Transfer Protocol). With the implementation of security over the Internet, a secured website will have its domain name start with “https” (HyperText Transfer Protocol Secure) instead.
A secured website has an SSL (Secure Sockets Layer) certificate. It’s similar to a person’s Identification Card. Having a secured website allows users to know that your website is authenticated and legit.
All information or data that a user may need to enter or provide within your website is secured and encrypted. Most web hosts offer a complimentary SSL certificate.
I am on DreamHost – they gave 2 options; a free SSL certificate and a more comprehensive SSL certificate which requires an additional charge. I am taking advantage of the free SSL certificate.
A secured website will show a padlock beside the domain name or URL in any browser. When you click on the padlock, you can see the validity of the SSL certificate. You can also click on the certificate to see its details.
How to fix HTTPS
As I am on DreamHost, the fix to have a secured site is as easy as a click to add on the SSL certificate.
It’s always good to check with your web host if they offer SSL for your domain name. Some web hosts provide the SSL certificate for a minimal yearly fee.
4. No Intrusive Interstitials
How crazy is the technical term for “no popups covering your website’s content”? That’s basically what “No Intrusive Interstitials” mean!
There should not be any obstruction of a popup on your website that makes your content less accessible or not visible.
There are 2 examples given by Google on what is meant by no intrusive interstitials:
- Intrusive Popup
- Intrusive Standalone Popup
a. Intrusive Popup
Your website should not have auto popups because it is not a natural interaction expected of a user.
Auto popups happen when a user enters a page and a popup appears immediately, covering the main content of the website.
The example image shows the popup greying out the main content.
b. Intrusive Standalone Popup
A standalone popup is when the popup covers the entire viewable screen – totally obstructing your website’s content. The above shows the example.
How to fix Pop Ups
Google suggests many fixes with examples. In simpler terms, you may fix your website popups with the following guidelines:
- Allow your popup to still show your page content; do not block the whole area
- Have your popup take up minimal top space on your page
- Always have clear CTA (call-to-action) buttons for ease of either closing off the popup or declining/accepting your site’s terms
FAQ
How Can I Improve My Page Experience?
Here are some of the ways you can improve your Page Experience:
- Edit your photos to have smaller size by using TinyPNG
- Replace CTA buttons with image background with icons instead
- Optimize CSS and JS (JavaScript) using Autoptimize
- Optimize CLS (Cumulative Layout Shift) by declaring the width of your images
- Optimize your website for mobile devices
- Secure your website with SSL certificate so your domain name begins with https
- Optimize pop ups to not obstruct your website view
Conclusion
I hope with the analogies I have used in this article helps you to understand better the technical jargons out there and clarify your questions on “how to fix my website”.
With all of the above information, I hope you are now able to know what includes in a website’s Page Experience. You should now be more confident on how to fix your website.
I also hope you feel empowered with the new tech knowledge so when someone screams “I need help with my website!”, you are able to help them too!
