Taking PageSpeed Insights into account while designing a WordPress website is both ideal and necessary for a number of reasons. One of the most important factors to consider is user experience. A website that takes a long time to load or is difficult to navigate can lead to a poor user experience, which can ultimately result in a loss of traffic and revenue for a business.

But while a slow loading website can lead to a poor user experience, so can a clunky website. In order to maximize PageSpeed, you need to defer or delay the execution of any JavaScript on your web pages. And JavaScript controls many aspects of a good web design. So herein lies the rub.

Taking PageSpeed Insights Into Account While Designing A WordPress Website

Delaying Or Deferring JavaScript

JavaScript can control a hero section's slideshow. It can control a scrolling banner or a mega slider widget. It can control an image accordion. It can control a flip box. It can control a simple blog post carousel or a portfolio carousel. It can control an animated icon or an image tooltip or a background switcher or an image zoom magnifier or a morph slider or even just an animated hamburger menu icon.

JavaScript controls the "life" of the web, and delaying or deferring its execution on the page can make a website seem, well, kind of "buggy."

However, here's the catch:

In order to achieve a maximum PageSpeed score, you HAVE to delay or defer the JavaScript. You have to make the webpage wait to execute any JavaScript code during a webpage's initial loading sequence. The best way to do this is by creating a "listener" event that waits for an action from the user, such as a keystroke, a mouse click, or even just a mouse movement.

With WordPress, you can easily achieve this using a caching plugin such as WP Rocket (which is what we primarily use) or any other such plugin like Breeze, WP Fastest Cache, or others (there are literally dozens of them out there).

Using Elementor With PageSpeed In Mind

So with this in mind, it's important to know which elements and widgets are going to affect your website's PageSpeed and loading times, and more importantly, IT'S IMPORTANT TO KNOW WHICH ELEMENTS AND WIDGETS ARE GOING TO BE MOST AFFECTED BY DELAYING OR DEFERRING THE JAVASCRIPT.

Something to keep in mind:

For the most part, anything that moves is going to be controlled by JavaScript (obviously, there are exceptions to this, but this is just a general rule).

So, while using a page builder like Elementor in conjunction with a CMS like WordPress can help streamline the website development process, it's very helpful to know which elements and widgets are going to be most affected when optimizing a website's performance.

Knowing this information ahead of time can help you design with PageSpeed in mind, so you can create smoother user experiences that allow for seamless transitions for users who navigate to your web pages.

Case Study: Ellig Group

For instance, check out Ellig Group's website. Navigate to their homepage, but don't do anything yet. Literally, either just click on the link to their site or type their web address in your search bar, but don't do anything else. Don't click on anything. Don't move your mouse. Do nothing.

Here's what you should see:

You'll notice that their hero text loads ("GLOBAL EXECUTIVE SEARCH FIRM" and "DEI is our DNA"), but not their background image slide show. This is because that slide show widget is controlled by JavaScript, and in order for the web page to achieve a maximum PageSpeed score, that JavaScript needs to be delayed. In this case, it's being delayed by a "listener" event. So until you move your mouse or click your mouse or hit a keystroke, the JavaScript won't load.

While this enables the website to achieve a high PageSpeed score, in my opinion it does make the user experience seem kind of "buggy." It gives off the impression that the website isn't functioning properly.

One way around this would be to simply showcase a static background image instead of a slideshow with movement. In this case, the client opted for the slideshow. This is why being able to understand and communicate to the client your recommendations is key.

Case Study: Loaded Media

Here's another example that's being caused by the same thing:

However, in this example, not even the header loads. Instead, we just see a hero section with a blue background and some white text. As soon as you perform a "listener event," you'll notice the header finally loads and the background becomes a video.

Pretty sloppy, if you ask me.

We Are Experts At Designing For PageSpeed

Our portfolio of past work is one of our most valuable assets. We have years of experience optimizing a website's performance. By looking at our previous projects, you should be able to get a sense of our skill level and expertise, as well as the techniques and technologies we are comfortable working with.

In conclusion, taking PageSpeed Insights into account while designing a WordPress website is crucial for ensuring a positive user experience, but perhaps more importantly, knowing which elements and widgets are going to be most affected when delaying or deferring the JavaScript on the webpage can help us make the best web design choices.

And we didn't come by this information overnight.

To book your FREE consultation, use the form below.