Case study: WordPress website support & maintenance with optimization for Monte Carlo Data

Acclaim/Blog/Articles/Case study: WordPress website support & maintenance with optimization for Monte Carlo Data
  • 5 minutes of reading
  • Comments icon
    0 comments
  • 852 views
Share

Check out our latest case study. In this case, we explain the improvements we made to a WordPress site during support & maintenance. Moreover, we show you how we optimised the website in terms of speed and performance.

Monte Carlo Data on laptop

Monte Carlo Data offers its customers end-to-end data observability. It allows companies to see when their data breaks and when to fix it. They came to us for WordPress Support & Maintenance services along with optimizing their website in terms of speed and performance.

Improving website responsiveness & user experience

A big must-have for any WordPress site is making sure that it is responsive to give a positive user experience. There are many ways to make a website more attractive to the user. These include a lot of front-end changes that may seem small but make the world of a difference.

👉 Monte Carlo Data 👈 came to us with a rather flat site, that needed some ‘oomph’ to better user experience. Here are a few things we did:

Adding hovers:

For hovers, our developers will add styles. The point of a hover is that the user knows that the element is clickable, i.e. when you hover over the link, it changes color slightly or animates.

Check out an example of when a user moves their cursor onto ‘Contact’ in the footer 👇

Adding hovers as part of WordPress website maintenance & support services

Adding buttons to the hero section:

Then we also added buttons to our hero section. This will help visitors better navigate the site and explore what this company has to offer. 👇

Adding buttons to the hero section as part of WordPress website maintenance & support services

Adding anchors on header/footer links

We added light-up features to anchors. So if you are on a certain page for example “Resolve” it will be highlighted in a beautiful blue to remind you where you are navigation-wise on the site. 👇

Anchors on header/footer links as part of WordPress website maintenance & support services

Problem with styles for error messages for the „request a demo” form

Originally the request for a demo form looked a little like this:

Request a demo form with errors

It wasn’t very legible, made it hard for the user to order the demo, and just looked messy. We fixed these errors and now the form looks much better

Improved contact form with no errors

Add transition to opacity effect

This is another CSS style element that we implemented for Monte Carlo Data. The items in the menu would change transparency when a user moves their cursor onto it and hovers. This way they gain a better idea that a given item is clickable.

Added a transition to opacity effect

Fix the hamburger lines so that they are evenly spaced

Another key element that we were able to fix in the CSS styles is the hamburger lines that you can see in the GIF below 👇. The even spacing makes it look cleaner and the user is more sure of the fact that this is a menu.

Hamburger lines on the menu are fixed so they are evenly spaced

WordPress site speed optimization & performance optimization

In the Website Care report from June 23, 2022, 👇, the speed of the website is 43 out of 100. While the page load time is almost 4 seconds. These speed results were across all major browsers including Chrome, Safari, and Firefox. The goal was to get their results as close to 100 as possible without compromising the design of their site.

Results before support & site optimization

Performance check before maintenance & support
Performance check before maintenance & support

Results after our support & site optimization

After many modifications which we will explain below, our developers managed to get the website to a lovely 86 out of 100. Moreover, it loads in less than one second. This is a vast improvement in comparison to the original results we saw above.

Performance check after maintenance and support
Performance check after maintenance and support

Google PageSpeed Insights & Pingdom test results

Monte Carlo - PageSpeed desktop results
Monte Carlo – PageSpeed desktop results
Monte Carlo - pingdom results
Monte Carlo – pingdom results

How did we achieve these results?

Optimization work can be divided into two stages – general and detailed.
General, is the implementation of certain “universal” methods that work in 99% of cases. For example:

  • general minification of CSS and JS files,
  • cache,
  • media file compression, using formatting WebP and lazyloading images.

The second stage detailed is optimization work aimed at solving the exact problem of a given application or website. Typically, after implementing “general” methods, we encounter specific problems, e.g.

  • the entire page “jumps” during loading – high CLS factor,
  • problem with the LCP coefficient,
  • despite the minification, we still have a problem with the large weight of the files and they need to be split into smaller ones

The “general” part is simple and quick because most problems are solved by using things like WP Rocket and Smush.
The “detailed” part is just testing, testing, and testing. There is no single solution to this. Sometimes, improving a few lines of code in Hero Section (or above the fold) can completely lower the CLS factor. And thanks to this, the application goes from 70 points to 95 points. Moreover, some elements had to be completely rewritten (e.g. slider), because it uses a very old library. This would completely spoil the end result if left alone.

TL;DR: Running WordPress website support & maintenance for Monte Carlo Data

The first thing we improved on the Monte Carlo Data website is website responsiveness and user experience. We added hovers so that menu items changed colors once a user’s mouse hovered over top of it. Additionally, our developers added buttons to help visitors better explore the site. Some other UX features that were added include:

  • Adding anchors on header/footer links
  • Add transition to opacity effect
  • Fixing the hamburger lines so that they are evenly spaced

Lastly, to improve user experience our developers fixed the form that helps them download a demo. They removed all the errors that popped up and changed the spacing. Making it more legible and easy to use.

Then our developers moved on to WordPress speed optimization and website performance. By implementing ‘universal’ methods such as general minification of CSS and JS files, cache plugins, and media file compression. Moreover, using image file formatting such as WebP and of course lazy loading. After this, our developers fixed some problems that also impacted speed & performance. They fixed aspects like the page jumping during loading. Additionally, they were able to split files into even smaller folders to compress media files even more. Lastly, they rewrote code that needed to be rewritten to speed up the site.

 If you are curious about any of our WordPress website support & maintenance services on this site, 👉 contact us 👈 for a free consultation.

Related articles

Crafting a User Journey with WordPress Design

Embark on a journey of user engagement and satisfaction with WordPress design as your guide. Learn how to seamlessly weave together aesthetics and functionality to craft a user journey that captivates and converts.

Comments

Your email address will not be published. Required fields are marked *