1.3.0
Speed is aim to purpose, but it is not the sole purpose alone.
– Some crazy dude on web
There are many ambiguous posts and articles suggesting universal truths, but there isn’t one truth for all. While something may be true for some, it doesn’t necessarily mean it’s true for everyone. More often than not, you will end up encountering nonsense and implementing ineffective optimization strategies that could potentially harm your site’s functionality, rather than enhancing the overall user experience.
Different types of optimization will benefit in these scenarios. For example, if you have customers around the globe, having a CDN is worth it. If you only have local customers, the CDN you need is called a server. I often hear suggestions to use a CDN, and I agree. We run on Cloudflare Enterprise CDN network because we can serve our customers from all over the world using a network of 300 points. This allows us to provide quick delivery of our site pages, ensuring a close and efficient experience for all users globally.
Many websites serve their local communities rather than a global audience. For these websites, it is crucial to have servers located near their customers. For example, if you are running a local pizzeria business in New York, you would want your server to be in New York or at a nearby location in the USA. There is no need to have 299 points to serve customers in Asia, Europe, Africa, or Australia, especially if your site does not deliver products to those regions. If the business does not deliver products to certain continents, they do not need to worry about serving their website there. Another option to consider is blocking access from these continents, as malicious actors may be the only ones attempting to access the site from afar. Personally, I have never searched for ordering pizza in New York while being far away from the location.
You should avoid loading excessive amounts of bloated code in the first place. If you use a modern page builder like Breakdance, which does not load half of the unnecessary internet elements on every single page, you may not need to clean up as much, or at all.
Breakdance generates solid and optimized code. In your optimization/caching solution, please navigate to the CSS/JS tab and disable everything. These elements can often disrupt the code, so if you don’t have an excess of unnecessary items loaded, there’s no need to aggressively clean up, which can lead to page breaks. You could consider implementing lazy loading at times, but avoid lazy loading the main page and essential elements. I’ve come across various tickets where attempts to load HTML first, followed by overlaying CSS/JS content on hover, have resulted in a broken website experience. This can negatively impact user experience and potentially affect your metrics.
One thing that amuses me is the belief that page speed and test scores are everything. If speed were the only factor that mattered, the entire web would load as a blank page. While it may be faster not to load anything, people certainly aren’t searching the web to find nothing. The essence of the web revolves around content – every search I’ve conducted was to find valuable information. Speed is merely a means to provide that content efficiently so that users can access relevant information swiftly.
Speed scores are not designed for developers just to achieve a perfect score of 100. It is important to use them cautiously as they are automated tests that indicate areas where improvements could be made. However, it is essential not to blindly follow them, as a site with an 85 score could be better optimized than one with a score of 100. Avoid compromising the visitor experience simply to attain a few additional points.
So use them, and understand them. Don’t just blindly seek for the score.
Let’s begin by discussing why the server is important and why it is crucial for dynamic sites. The performance of simple WordPress websites is largely dependent on caching plugins, which often completely or almost completely bypass this component.
People often confuse server performance with the optimized stack that hosting companies provide. When a company installs a cache plugin like Litespeed Cache, customers may consider it a miracle. WordPress operates in a dynamic environment, where some instances may be heavily cached and served almost like a static page, while still retaining its uncached form.
When you are optimization, some of them are like doing single image optimization which could make significant impact on page where image is placed, but having fast server is one of the biggest optimization as it will affect almost every aspect of your site. If your site is not purely static, there isn’t better optimization than server with fast CPU.
If you have option, seek single core monster CPUs like:
PHP could executes only on single core, so because of that multi-core performance aren’t that much relevant to site speed. If you could get 50% faster single core CPU server, your site performance would also get boost like this.
Caching alone won’t suffice in this scenario. While it can help with certain pages on a store, the main pages will likely need to be uncached. Specific methods, such as private caching per user and advanced techniques like updating the cache by first serving an outdated copy and then updating the cart and dynamic pages through REST API or AJAX calls, may be employed. However, if one lacks expertise in this area, relying solely on server power may be necessary. For most users who are not highly skilled or technical, attempting to force caching and then managing updates may not be the best option. This strategy is typically more suitable for situations where scaling server resources is limited, necessitating these types of workarounds. In other cases, it may be simpler to opt for a better/larger server that can efficiently handle uncached pages.
If you are running a news website that is updated frequently, with content changing every minute, caching can be beneficial. With a high volume of visitors, you may implement caching with a short lifespan to serve updated content every 10 minutes. The primary purpose of the cache in this context is to alleviate server load rather than compensate for a slow server. Caching can help manage stress on the server, allowing you to accommodate more customers efficiently, but it is not a substitute for a slow-performing server.
When you are in the admin area, there is no page cache available to assist. The content in this area needs to be served directly from the server in order to function properly. If your website appears fast for visitors but becomes sluggish once you access the admin section, then you will recognize the importance of a reliable server.
I have come across numerous complaints about slow tools in WordPress, with people attempting to edit them on $5 unlimited site hosting and lamenting the slowness of the tool. Unfortunately, there is little that can be done in such situations, as in 99% of cases, the problem lies in running the tool on the server. These tools need to save and retrieve data from the server, a process that is heavily dependent on the server’s quality. If you anticipate that managed hosting will handle security measures and supply unlimited resources for $5, I am sorry to say that it will not meet those expectations.
“And do not get me wrong, I am the last person to shame someone for using cheap hosting. I understand that in many countries, people work on sites that may not be highly paid, and I get that. However, we also need to be realistic and find solutions. I would say that paying $30-50 per month is beyond the budget in some countries, so you may need to set up a local environment. You can copy the entire webpage to your local machine, make edits there, and then transfer the updated version to the live site.”
Another suggestion is to go the VPS route, where you would receive less management and support, but more resources for your money. This option may fit into your budget, but it will require more effort and learning on your part.
If you are unsure about the allocated resources, which is often the case, it can be challenging to determine.
Here’s why:
In lot of these cases when you are using managed shared host it is based on trust that you will pay fair amount that host will allocate fair amount. But there is not guarantee, and what is today does not need be tomorrow.
There are some tools which will give you information how is your host performing at this moment of time:
While these are not perfect, they could give you a clue at this moment about how potentially good is your server. Keyword here is potentially good.
What is TTFB? Time it takes from when a client makes an HTTP request to it receiving its first byte of data from the server.
If you are serving worldwide you would want to have this low and balanced from many locations. If you are making local site, closest location only matters to have idea about time that it takes when your client request page, to the first data that he gets back.
This should be as low as possible. Google suggests under 800ms, but it should be really low as possible as this is time that it takes to in which you get nothing.
Tool to use: KeyCDN Performance Test
If you are serving local customers think about getting server close to them, and that server performs.
If you are serving worldwide, and you don’t have CDN yet. Check closest location to server, if that is bad you should switch server before placing CDN as server is basis, CDN is upgrade to copy images, assets, or even fully cached page in many places in the world and try to mimic that you have server there. But when you need dynamic power which only server could provide, if server cannot provide, CDN won’t make a day.
While our goal is to optimize, and we assume that in lot of the cases we could cache tons of content and we should test the best scenario when user hits cached page, you should also check uncached page.
Check our site for example here.
Try following URLs:
In both cases, we utilize a CDN. In the cached scenario, it serves the full page from the cache. Conversely, in the uncached situation, it serves images and assets that are safe to distribute but does not serve HTML from the cache. This approach allows us to assess the performance of our site for visitors both when it is cached and when it is not. Both assessments are crucial, as in life, not everything is ideal, and not every visitor will receive a cached page.
In our runs at the moment of writing this article cached version TTFB was under 200ms worldwide, in 9/10 it was under 100ms and in 8/10 locations was even under 50ms. That is power of full page CDN cache.
Let’s imagine your computer is like a huge library, and there are two types of workers (caches) that help make things faster when you need information: page cache and object cache.
Page Cache
Imagine you want to read a book from the library, but every time you ask for the same book, the worker has to go to the bookshelf, find it, and bring it back to you. It takes time!
So, the library decides to make a copy of your favorite book and keep it at the front desk. Now, when you ask for that book, the worker can give you the copy right away, without going all the way to the shelf. That’s what a page cache does! It saves a copy of an entire web page so the next time someone asks for it, it’s delivered much faster.
Object Cache
Now imagine instead of a whole book, you only want a specific page or chapter from different books. But the worker still has to go find each page from different books, which also takes time.
So, they start saving just the important pages you ask for the most often, keeping them at the front desk too. Now, when you ask for a specific page or bit of information, they can give it to you instantly. That’s what object cache does! Instead of saving the entire page, it saves smaller, important pieces of data (objects) that websites often need, like a chapter from a book.
In Summary:
Page Cache: Saves the whole page, like copying a book, so next time it’s faster to get the same page.
Object Cache: Saves smaller pieces of data, like important pages from different books, so it’s quicker to gather the information bit by bit.
Both make the website faster but in different ways—one works with whole pages (page cache), and the other with smaller pieces (object cache).
As we have stated, they will copy whole page and serve that static copy to later users. We could deliver this copy from:
If we cache something in user browser, that information will be on his machine, and that is fastest as there is no latency with some server to get data. When we cache data in-browser that will be blazing fast.
In theory CDN would one of the fastest as it would be closest worldwide to visitors and would server.
Next would be delivery cache from server, so you would have some special rules from cache plugin for NGNIX server to tell server when to serve static fille, and when ask Application (PHP) to generate content.
Slowest type would be PHP, but still fast. Here server don’t have clue when to serve static copy, and each time asks PHP application. In application part you have PHP code from cache plugin which checks cached files and settings and decide should it allow dynamic page generation, or just pass static copy.
Let’s we could not cache user profile, as this is unique to every visitor. But if when user is logged in we may often need data for that user.
Instead of going every single time across all the users, we may cache that user data in RAM memory (which is fast) and when user opens some page that requires that data we don’t need to lookup all the users, find that user and pass his data each time.
While page cache sits between visitor and applications, and tries to avoid dynamic page generation, object cache tries to avoid expensive calls and searching in database by storing these information in RAM.
If you are serving local area, you don’t need this. If you serve visitors worldwide this could help you.
While we currently only have one server, we have the capability to create replicas of assets, or even entire pages, in various locations worldwide. This would allow us to prevent issues that may arise if the server is located in the EU, causing visitors in Asia to experience longer load times when trying to access data. A Content Delivery Network (CDN) can locate a replica of the full page or specific elements such as images in a nearby location and deliver them to the visitor, resulting in faster loading times for static assets across the globe.
If you don’t use some crap to load tons of not needed data, you won’t need to do cleanings. Mostly you should look after media assets like images and videos to optimize them.
Images almost always should be really small and optimized before uploading on server. You could use image optimization services, but please for crucial pages try to do optimization in dedicated desktop applications.
Dedicated compression application could use your powerful machine, you have much more flexibility to control quality vs size than you will have in any of the plugins. You could try and see if you go aggressive is quality fine, and gradually fine this balance to optimize key assets for the most visited pages.
When doing this optimization you should look after all images above 200kb, as they could bring enough benefits to do fine optimizations. If image is 1MB and you get it under 200kb, you will save 0.8MB which could be almost the size of some smaller page.
How far you will go is after you, and project requirements that you want achieve. This is just my quick eye method which I use to quickly scan and seek for optimization which could make great impact and don’t need crazy amount of the work.
Some tools that you may use:
Avoid loading Youtube videos before user interaction. Youtube will load pretty heavy stuff to play video and it is even bad for privacy. If you need to show video right away use some more lightweight video player.
Yes? Try to make it smaller, if you are looping video. Like 5s video instead whole minute for looped backgrounds or something, don’t loop whole minute video it is costly. If it is really needed to load, you need to try to be aggressive as you could in optimization and reducing file size.
No? You could load on video user click and avoid costly video, lazyload and various method to avoid costly video assets. You could show thumbnail and load metadata, and load video when user click.
In this section we’ll touch tools that you could use to diagnose potential problems and improve website performance.
| Name | Description |
|---|---|
| Google PageSpeed Insights | – Provides performance reports for both mobile and desktop. – Gives actionable suggestions for improvement, focusing on Core Web Vitals like LCP, FID, and CLS. |
| WebPageTest | – Offers advanced performance analysis, including time to first byte (TTFB), render time, and more. – Provides real-world performance testing, including options for various devices, browsers, and locations. |
| GTmetrix | – Provides detailed reports on page performance, including page load time, total page size, and request breakdown. – Offers insights and recommendations for improvement. |
| Pingdom Tools | – Offers a user-friendly way to test the speed of your site from various global locations. – Provides detailed performance reports, including page size and requests. |
| KeyCDN Performance Test | – The Performance Test tool is capable of conducting a single asset performance test from 10 different locations worldwide. It enables testing and measuring the performance of any URL, providing detailed insights into loading times and HTTP response headers. – This tool serves as a valuable resource for evaluating the performance of a single asset and identifying areas for improvement. To optimize your website’s latency, consider integrating KeyCDN into your stack. |
| Name | Description |
|---|---|
| WordPress Hosting Benchmark tool | This plugin will help you to test your hosting server. By running unified tests, you can see and compare different servers or hosting platforms. It does not require any special additional software or tools, as all tests are executed from within PHP – we simply measure time, that each test take. All tests are grouped and target different aspects or components – CPU, memory, filesystem, database performance, wordpress object cache, network speed. |
| WP Performance Tester | It was designed to test the server’s performance by stressing PHP, MySql and running $wpdb queries. It also allows you to see how your server’s performance stacks up against our industry benchmark. Our industry benchmark is the average of all submitted test results. |
| Name | Description |
|---|---|
| Query Monitor | Query Monitor is the developer tools panel for WordPress. It enables debugging of database queries, PHP errors, hooks and actions, block editor blocks, enqueued scripts and stylesheets, HTTP API calls, and more. It includes some advanced features such as debugging of Ajax calls, REST API calls, user capability checks, and full support for block themes and full site editing. It includes the ability to narrow down much of its output by plugin or theme, allowing you to quickly determine poorly performing plugins, themes, or functions. Query Monitor focuses heavily on presenting its information in a useful manner, for example by showing aggregate database queries grouped by the plugins, themes, or functions that are responsible for them. It adds an admin toolbar menu showing an overview of the current page, with complete debugging information shown in panels once you select a menu item. |
If you look around, you will notice that I haven’t mentioned a single host or cache plugin. I have instead pointed towards some tools that may assist you in optimization. The key for you is to discover and refine your own process. It doesn’t matter what I am using; I have my own reasons for using certain tools. Just because I use something doesn’t mean it will work well for you. Simply mimicking my choices won’t necessarily help you.
Start with asking ‘why?’ and not with ‘which?’
There are tons free or paid tools that could help, but don’t use tools just because someone else uses that tool. You need to understand Why are you using, as you are solving yours problem not mine.
I have only mentioned the CDN, explaining why I use it and why you should often avoid using it. Everyone should understand the problem they are trying to solve and then choose the right tools for that particular job.
For creating high-performance websites, it is often recommended to have a good server and implement page caching in all scenarios.
Try to keep it simple; don’t make it complex if it isn’t necessary. I have seen setups with two caching plugins and one optimization plugin. In these Frankenstein-like setups, only God knows what could actually go wrong. These are not needed. If you use two caching plugins, you are not making your site more performant, but rather more fragile and harder to understand.
