Simple fixes for better web performance

Why does web performance matter?

Back in the day, when we connected to the internet via a dial-up connection, we had to be patient. Today’s users are a different story: the modern customer doesn’t wait. In fact, around 40% of users will abandon a site that takes more than 3 seconds to load. Therefore, web performance is all about people: since individual users want their content delivered to them quickly and seamlessly. However, this speedy delivery is so often affected by increasing numbers of sophisticated technologies that live on websites to drive sales or boost brand image - that have a side-effect of delays to web performance. As we know, delay means damage.

Indeed, page speed has been a Google ranking factor for desktop sites since 2009, and in 2018 it was announced that Google will also penalize for mobile web performance too. What does this tell us? That web performance should be taken seriously.

Why do web performance audits?

In light of this information, it's important that we gain visibility on whether the sites we build are fast performing or not, and therefore whether we’re delivering speedy, satisfying experiences to our end users.

So, here at Netcentric, we decided to conduct performance audits that would provide some metrics and data that would allow us to see just how our sites are performing. By using our expertise in AEM, and the best practises in web performance, we started developing of our very own web performance audit.

Considering conducting a web performance audit on your site? Here’s the structure of the audit we did into various sites that Netcentric was involved in the development of.

The web performance audit structure

We divided the audit into six parts:

- Network load performance where we look at factors like time to first byte and headers,

- Rendering performance where we examine the DOM tree, CSS and how fonts and images perform,

- Perceived performance where we look at loading of the images and whether there were skeletons on pages,

- User experience involves measuring how users interact with the site,

- Third party services were their impact on rendering is closely examined and

- Organizational elements were we send out a survey to the team members to see how they handle web performance.

How did we conduct the test?

In order to carry out our web performance test, we used a number of useful tools to access insightful data about the websites we’ve developed. These included:

What did we discover?

From our test, we gained a number of crucial insights into how the websites we’ve developed with our clients are performing. Here are some vital areas of web performance you should analyze within your own audit:

HTTP/1 versus HTTP/2

Our test found that all except for one site in our audit were delivered through HTTP/2. HTTP/2 brings with it many benefits when it comes to web performance. It’s rapidly taking hold, with the coverage for HTTP/2 already at 83% and growing among browsers.

Bundling and code coverage

Bundling is one technique that’s changed recently, with most now choosing to deliver their site using a single TCP connection. HTTP2 has been a game changer when it comes to delivering smaller files, rendering bundling, some say a thing of the past. However, this is another area you should check for during your web performance audit.

Code coverage was an area in which we found room for improvement within our audits. For instance, AEM Grids adds an additional 5000 lines of code to your CCS what you might not be aware of. Therefore, this should always be revised to determine whether or not it’s being used. Code coverage is a key area to include in your audit that can bring benefits when it comes to the performance of your site.

Compression and minification

Many sites have issues with compression, as we found in our audits, which remains an easy, fixable issue. Minification should also be examined. From our analysis we found out that that around 40% of CSS files weren’t minified, and minifying it could make an impact on speed for end users.

External libraries

When examining external libraries, we’re not just checking for speed, but we’re looking at security too. What we found when testing was a number of outdated versions, which from a performance perspective means you may be missing some improvements but the bigger issue is that they can make the page vulnerable. If we add JQuery and other libraries throughout projects without checking them, libraries can often remain outdated, slowing down our sites. Therefore, proper monitoring of external libraries is really important.

Caching

Caching is another important area that we found could be improved on. This is simply the result of not setting headers correctly, leading to improper caching.

Fonts

In our audits, we found that 40% of the tested sites weren’t leveraging WOFF2 fonts, an easy shift which brings positive results. This might be another area to examine if you’re looking to improve the speed of your site.

Images

Images are usually the fastest way to transmit a message, however if not delivered properly they can hurt performance quite badly. Often there are a lot of images on the page and they increase initial payload and load time. As a solution to this issue, lazy loading technique was introduced deferring loading of non-critical resources at page load time to a time of actual need. Our audits results showed that 70% of the sites tested already have lazy loading in place. We recommend to enhance the standard AEM solution for image rendering with an image manager from a CDN, such as Akamai. They provide an advanced compression which considers the internet connection speed as well the browser capabilities when it comes to next generation image formats.

Mobile optimization

In 2020, 70% of cellular network connections globally will occur at 3G or slower speeds. Since we’re fast becoming dominated by mobile, with many even using their phones to access sites whilst using a computer too, this is an area we must keep in mind. We must adapt better to ensure seamless mobile performance as well as desktop.

Real user monitoring

To go beyond your web performance audit, you should also collect RUM (real user monitoring) data. This allows us to visualize how users behave and interact with your site after it’s gone live. By gaining access to this all-important data, we can draw further conclusions about how our pages are performing. In the long-term, this will enable us to optimize our digital experiences even further thanks to high web performance and usability.

Quick fixes

Ready to improve your performance? Below are some simple approaches that have large-scale impact with slow-scale effort:

Making small changes such as these will make a huge improvement to your site’s performance, without necessitating any redesign or widespread alterations.

tag
User Experience (UX)
style
dark-plum