If you read about the subject of website performance online and why marketers should care about things like Google’s Core Web Vitals. You will probably find an endless list of articles going into the technical details of the subject and why they are important. They will tell you all about how to get the best scores and potentially lead you down a long, complicated, and expensive path to chase that coveted “100” score, even though you might be the reason for never reaching it.
Here is the problem, most B2B websites use WordPress. They have a lot of extra scripts to provide types of analytics that are extremely useful. They use page builders to make creating pages faster and editing their website easier. They have rich multimedia like quality images, infographics, animations, and video to provide the best user experience. They also want custom fonts, illustrations, sliders, or other interactive features.
Essentially all of the fancy content and features that marketers want to wow their visitors are essentially at odds with site performance and Core Web Vitals scores. I will not go into great depth about the technical details of Core Web Vitals, this content is everywhere on the Internet.
What I want you to take away from this article is how to make better decisions when you are working with your agency and understand the tradeoffs of your decision as they pertain to performance. Just as you can’t “outrun a bad diet,” you also can’t fully optimize a website where the marketer’s and agency’s decisions did not factor in the performance implications upfront.
Should marketers use WordPress and page builders, and can they have good website performance scores?
Absolutely! WordPress sites with page builders like Elementor can be optimized to get near 100 scores. Now, you won’t get this performance out of the box, and you’ll have to work towards it. But it is completely possible to have a beautiful, interactive website that also performs well for the user and in the eyes of Google. I will warn you this is not only up to your agency or developer. The willingness to address necessary tradeoffs is also up to you.
What are some common marketer decisions that can negatively impact performance?
- Not prioritizing performance: The ego of agency teams and clients can get in the way of making good performance decisions. Agency designers and user experience teams should take performance data into account. And clients need to listen to their agency partners and take their advice when they have data backing up their decisions.
- Too many tracking scripts: Google Tag Manager (GTM) is both a blessing and a curse. At first, I loved telling my clients just to add what they wanted to GTM, so I didn’t have to do it. Then at some point, you get an email stating that the website is running slow, and look in tag manager and see 35 tracking scripts. No kidding, the site is running slow 🙂
- Too many fonts: Do we really need 5 fonts with 5 weights each? Every file that gets downloaded adds overhead to your website. It’s important to strip out what you don’t need and consider only including essential items.
- Too much going on “above the fold”: Oh, do we really need that video carousel on the top half of your website? Videos are larger than all other assets, and features that are very interactive take more processing time to load and run. The best-performing websites keep it simple above the fold.
- Unoptimized images: I can’t count how many times after I hand over a website and come back a few months later to find new images uploaded to the website that are HUGE and in formats that aren’t the best for their application. There are easy solutions, though. Plugins like Imagify will handle the heavy lifting for you and optimize your images automatically.
- Google Maps: Google Maps JavaScript library is a performance hog. Do you really need that interactive map on your contact page? Could a really nice image of the map do the trick that links to the interactive map? If so, you will automatically improve your speed scores by stripping out all Google Maps code.
- Video: If you just take the embed code of a YouTube video and drop it on your website, you just add unnecessary overhead. Typically, I suggest that you create an image of the video thumbnail and only load the custom code of the video once a visitor designs to click on it. Deferring when this code runs will speed up your website considerably.
What are some common agency decisions that can negatively impact performance?
- Page Builders: In my opinion, page builders should be used freely. It’s just important to optimize them as best as you can. The upside is too great to have your agency hand-code everything for performance while leaving the editing and creating new pages on the site to be cumbersome. Using page builders without optimizing them is frowned upon. GeneratePress or Elementor would be my choice.
- Not optimizing WordPress: WordPress, out of the box, does too much. Do you absolutely need emoji support, dashicons, support for Windows Live Writer, unused useless global features like “duotone” image support, etc? These should probably be disabled, and you should get the performance benefits. This usually needs a performance plugin is required to save time.
- CDNs: Many reputable Content Delivery Networks (CDNs) like Cloudflare optimize the network traffic using the most modern protocols available. They also cache assets to make them available faster and provide other security features. If you aren’t using a CDN, you should be.
- Caching: Besides optimization, agencies should have a caching solution available for you. Caching saves a version of the page that can be served to the visitor without fully executing the code to display the page every time. Caching is a very valuable tool that should be used, you do have to remember that extra steps are required to see the latest versions of your changes. Sometimes clients get confused when they see an old version of something remembering to reset the cache, and even regenerate the cached files from time to time.
- Not lazy loading assets: For your website to be usable as fast as possible, the top portion of the website must load first. If you have a long page with many multimedia assets, it’s a good idea to “Lazy Load” those assets. That just means loading them when they are closer to being used, such as a user scrolling down the page. The tradeoff, of course, is that your website is not fully loaded, and users might notice it if they are rage-scrolling your site.
- Plugins: Having too many plugins or using plugins with poor performance. To be honest, this is both marketers’ and agencies’ fault. How often have you said or heard, “I found a plugin that…” or go to your backend and see 20 plugins your agency installed for all those fancy effects you asked for. Be disciplined when adding new plugins and functionality to your site. If it’s not needed, then don’t do it.
- JavaScript and CSS: Oftentimes, neither WordPress nor plugin developers think too much about the performance of their HTML and JavaScript. We know this because many libraries written by Google, WordPress, or Social Media platforms are notoriously known for being performance hogs. For example, many WordPress plugins install their CSS and JavaScript on every page of your website, even if you only use the plugin on one page. To fix this issue, you have to turn to a performance plugin and heavily optimize the site for the most efficient use of JavaScript and CSS.
What tools can I use to check the performance of my website?
There are a few tools you can use to test the performance of your website. I will give you a few options, all providing something different and unique.
- Page Speed Insights: This website uses the `Lighthouse` technology, which is an open-source coding library, to evaluate the performance of websites. Essentially simulating how a mobile defile loads a page.
- Chrome Dev Tools: You can test a site from right within Chrome. There is a `Lighthouse` menu option available. If you are testing your own site, remember to sign out because being logged in as an administrator will slow down your website.
- GTmetrix: The GTmetrix tool is similar to `Lighthouse` based tools but I’ve found that it provides far more detail about how to fix potential problems the other tools identify. The reality is that I use GTmetrix and Page Speed Insights in most cases.
What does all of this mean?
There is not one correct answer when it comes to the question of how to achieve optimized site performance. The reality is that there are tradeoffs to each decision, and marketers and agencies have to work together to find the right balance between high-performance scores and the user experience they are striving for. This give-and-take approach generally creates the best outcomes.
