This is my typical response to a potential client that is very frustrated about WordPress and thinks that WordPress is slow and fundamentally unreliable.

Letter from the client:

I absolutely HATE wordpress because we had a wordpress website before - there was ALWAYS sth wrong/ hacked/ not working/ plugins colliding...its a nightmare. I was also never able to even change 1 word anywhere without getting in touch with some coders.

With Squarespace we never had a single issue. It always works. No hacks, no plugins, it always works, no costs.

However the speed is not acceptable as we are running large marketing campaigns. So whats a speedy alternativ with the pros of SQS without the disadvantages of WP?

We are looking for expert advice as it's a big decision to change platforms if we would do so. We need loading times below 2 seconds, at a maximum. Thanks

My response:

Hi,
I came across your job post and it's an interesting challenge for me. I understand why you hate WP. Your website is simple, at least I see a very simple website and I don't know all its functionality. But let's assume that it's the front page, blog and signup form scheduling I presume a call or presentation. Now looking at Squarespace code and how is made, it's actually one of the heaviest websites I've seen. It loads 5.7MB of CSS and JavaScript. I know from my experience that this number should be under 500KB, so now it's like 10x more than it should be in order to be able to load fast. Optimising this? Good luck with that!

Now back to WP, and please suspend for a while your opinion about WP.
I've been speeding up websites for 5 years, worked with many clients from all around the world. I can tell that you came to this point because you built your website on WP yourself or some inexperienced developer, mostly a cheap Asian WP builder, not a developer, who doesn't understand anything about speed. No wonder it was always a failure.

A fast website is like Formula One, it's built from the beginning to be fast. In the design, aerodynamics, materials, construction and top talented staff, there is no compromise on any detail. None. So if you want to have fast loading website, it must obey the same rules. The top priority is speed, then design and functionality. Why? Because physical laws don't care about what resources are available and budget. It's their rules on this planet, not ours. So far so good?
Right, so in order to build fast loading website it must obey certain rules, otherwise it won't be possible. And no optimization on the end can help. It must be built from the very beginning in a certain way. So how to build fast loading website?

The key is for a developer that:
1. Must understand what does it mean "fast", what's all that technical jargon like TTFB, LCP etc.
1. Must be aware of bottlenecks, yes there are a few that most developer doesn't know about
2. Must understand what makes a website slow
3. Has available tools, or can create such that allows translating the design into a website that would deliver desired results
4. Must have skills to see all details and make appropriate measurements of individual parts

Another part is in the design. Certain features just cannot be part of the design because it's just impossible to load and process by the user's device within the time required.

Now can it be done with WP? Absolutely! Can any developer achieve it? NO!

What do I suggest doing? Well, let me explain. But first let me address your biggest concern, the WP plugins breaking, glitches, insecure code and maintenance.

If you as a client don't want to deal with it, there is a way. How? That's actually easy. I can build the website in WP on my server and generate a static version of your website. So you receive just plain HTML, CSS, JavaScript, images and so on, upload to your server and that has not any part that can break. Zero, because it's static. When you want some change, I do it on my server and upload to your server the new static version. I take care of any issues on my server, none of this would be visible on your public website. It's as simple as it could get. The alternative is to build everything from scratch. That of course is much more demanding for the budget.

Your website is a simple website, it's possible, not like a shop that requires constant database usage.

So few details I see already that your current version is doing wrong. The video on the top is part of page HTML and unnecessary bloats crucial part that has to be as lightweight as possible.

And then, the front page has a lot of content. The same applies here. In order to keep initial HTML as small as possible, all content under the fold has to be loaded sequentially, not in one large bulk as it is now. All this is doable and it requires only skills and dedication, and I have all of it.

If you feel that this can be a solution for you, I can answer any of your concerns.

Best Regards,
Jaro

Most of the blog posts dedicated to speed just point out that we need to measure website speed and offers links to online tools that can do the jobs, but don't explain how and what to measure. For those who are looking for a one-click-solve-all solution will this article be a great disappointment. But those who stay can learn how to get the most accurate measurement and what tools to use.

1. What's the most important point on the website to measure?

In our previous post Website loading speed explained we describe what matters to the real world visitor. Just as a quick reminder here are the most important points to measure:

  1. First paint
  2. First meaningful paint
  3. Visually Complete
  4. Time to interactive

All these vectors will influence how your visitor will experience your website so that's why important is to measure them.

2. Geographical location

The golden rule of the physical location of the hosting is its geographical proximity to the most important visitors. Where we're making the measurement is as important as what we're measuring. Why? It's because with longer distance increases the lag and distorts the values. Where you want to measure the loading speed of your website?

  1. As close to the server as possible. Why? Because we cannot influence anything beyond the server, I mean the infrastructure that connects users.
  2. Where your most important or targeted audience is. So for example, if you have 80% of your visitors in US and 20 in Australia, you want to measure both, especially if you're using the CDN

2.1 Do you know where your hosting has their servers and are you sure it's actually there?

In our practice, we found that most inexperienced WordPress users have no clue where their website is located. We had a case of a beauty e-shop that the hosting company assured the user of hosting the server in Singapore, but after the test, we found out it was actually in the US. How you find the location of your server? Easy!

  1. go to KeyCDN ping testing tool
  2. enter your server IP address (if you don't know what is it, just ask your support)
  3. look at the column "Min" where is the lowest number, that's location is closest to your hosting

3. Tools to measure website speed

There are few popular tools but after years of testing their reliability, we came to the conclusion that there are only two that get the most accurate readings. Which ones they are?

  1. Webpagetest.org
  2. Google Chrome developer console

With these two tools, you can get the data you need to understand how your website is loading. There are other tools, like GTMetrix, Pingdom or Google Speed Insight, but we find them unreliable, confusing or lacking necessary options to get precise measurements.

 

3.1 Webpagetest.org

After performing thousands of tests and comparing results with real-world data, the WebsPageTest.Org came to us as more reliable with most possibilities of collecting important data. Its most important features are:

It may appear too geeky but to start to measure the loading time of your website, you need to set just a few basic settings like location, connection and you are good to go. But before we dig into measuring itself, let's talk about methodology and the process, and that after Google Develop Console

3.2 Google Chrome Developer console

Google Chrome became the most popular browser some time ago and besides of ability to browse the world wide web, it offers a Developer Conole. If you're not familiar with it, it's a tool that helps developers to create and tune websites so they run as expected. It offers a wide range of features and for the purpose of measuring, we will use only one part called "Network". To get there just press F12 and set up all settings that are indicated with the arrow or triangle:

 

Now we are good o go to measure the loading time on the Google Chrome developer console.

4. The methodology for measuring the speed of the website

4.1 Key performance indicator - KPI

In order to focus on measurement, we've got to have clear our key performance indicators - KPIs. We need to ask the question of what is important and where to measure it. In the beginning, we mention that First paint, First meaningful paint, Visually Complete and Time to interactive are the most important measure we need to get in order to understand our website. The next question is what URL we measure and from what location. Most users measure only the front page, and that's a good starting point but it should be the only one. For example, we have a real estate website where visitors can search for properties. If the front page loads in 1 second, but then it takes 10 to get the search result, you will lose a lot of visitors on the search page. A similar situation applies when you have for example a special landing page, if the first paint is 4 seconds, but the front page loads under 1, that's not very good either. I always recommend taking time and having a look at Google Analytics to see where visitors are landing at your website, as well as where they exiting. If there is a sub-page with a high exit rate, maybe there is something that makes it load slow and visitors leave.

4.2 Geographical testing location

Most inaccurate readings are made due to ignoring the fact that the geographical distance between the website server and testing server matters a lot. As distance increases, loading time too. Therefore, we have to measure as close as possible to the website server.

 

To be continued...

The speed matters, what else?

It's 3 minutes reading + 5 minutes videos for better illustration.

Website speed is a concept that describes how people perceive the way how a website is displayed on a device they just using. It's about feeling what evokes in them, not the actual time.

It's all about the perception

When we're talking about loading time, it can't be reduced to a single number. Consider the following two scenarios where the top number is the time in seconds and under is what's displayed on the screen on the given time:

Both websites are loaded at the same time, 2.5 seconds. Which one would feel better to you? Do you prefer to stare at the empty screen for 2.5 seconds? No? Then it's the first one.

 

Loading time is not just one number.

To get the whole picture of website speed it would be impossible to get with only one single number. The reason is that different subpages may and often do loads differently. For example, the search page might get a longer loading time than "About us" page because to perform a search is much more server's resource-intensive. The most appropriate picture of the loading time is a distribution curve made from all data collected from all visitors of the website. It would look like this:


Source: Web Performance: Leveraging the Metrics that Most Affect User Experience (Google I/O '17)

For a few lucky ones this website will be loaded in 0.4s, for the majority, it will be 1.2s and for some, it will take up to 10s to load the website. The well-optimised website has loading time for the majority as close as possible to left.

What matters to every single visitor of your website?

How your website is perceived by your visitors is more important than how fast is loaded. Here are the key questions every visitor asks: https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics

  1. Is it happening?
  2. Is it useful?
  3. Is it usable?
  4. Is it delightful?

Let's break it down.

1. Is it happening?

How a user after clicking on the link can know if the website is actually working? A simple answer is: Screen is not blank, something being displayed since landing on the website. If there is a piece of the menu or just a spinning loader, that's much better than just a blank screen. Faster the website displays anything, makes it in the mind of the visitor know that is functional and lowers the probability of bouncing back.

2. Is it useful?

Let's imagine you search for a plumber and by clicking on the Google Search you get to the website promoting a course of becoming a plumber. Is that useful for you at that moment? No! How does it relate to the speed? Well, after your website starts to display step by step all elements, a user wants to know that this is the right page.  The sooner you display a piece of content that represents this page, the less chance there would be that visitors will bounce back. It calls the "Hero content" and if the website is well optimised for speed, hero content is displayed as soon as possible.

Here is an example of a website with bad design and vague hero content displayed on the very end of the loading website:

 

As you can observe, the first bit that is displayed is an advertisement, logo, sharing buttons, search bar and menu. You have to wait till about 6 seconds to realise that is something about life insurance. Isn't it a bit late?

And now compare it to what I consider good hero content displayed fast:

 

On this website, the visitor knows already at 1.6 seconds that it's a spray tanning studio, and in 2.4 seconds the image of the procedure is displayed. No confusion with that, is it?

3. Is it usable?

This part is not that much related to the speed itself but to the user experience. I bet you've been to the website that has very small buttons and you were struggling to interact with the website. The important part that makes people browse your website,  share it and come back is how easy can tap on the button, how easy it is to read the text and find the menu. I mention this bit because no use to have an ultra-fast website that people can't use. To find out more look for an article about Accessibility or look video Power to the People - The Low Hanging Fruit of Accessibility.

4. Is it delightful?

This bit as the previous one is related indirectly but there is one important part that can be influenced by the web developer and that's "Time to interactive". Look at the following situation:

 

In this video, you can see that on my phone the website was loaded quite fast but I had to wait like 5 seconds to start to interact with it. The cause of such a delay is using too much Javascript. Generally, Javascript is the element that mostly contributes to slowing down the time to load the website and to make it interactive.

Conclusion

As you can see, when we're talking about the speed of the website we have to consider various dimensions. The speed for the real-world user cannot be determined by a single number, a one-time measurement of one page or a score generated by online tools. Now the next question is: How to measure website speed to get the most accurate intel?

WP Speed Doctor Copyright © 2022
Top