Category Archives: tips

How to Cache AJAX Requests

One area which can be a pain for performance enthusiasts is showing up-to-date recent posts in a sidebar widget or show off your popular posts in the footer. The traditional way to work around this is by using AJAX so Javascript makes a call for PHP to pull fresh data out of the MySQL database. This is very convenient but also potentially resource heavy and slow because of the entire process flow. Let’s cache those instead with Swift Performance.

Speed Benefits of Caching AJAX Get Requests Swift Performance

For this example we use WordPress Infinite Scroll – Ajax Load More plugin for lazy loading posts, single posts, pages, comments and more with Ajax powered queries. It is a great plugin, however we already know that it takes between 300-400ms for the site to display the data. That is not the plugins’ fault, it is just the nature of AJAX

Luckily we can cache this AJAX request and get it down to 50ms with Swift Performance. We will assume you already have Swift installed and configured on your site.

Here are some GTMetrix results before and after caching the AJAX requests.

Uncached AJAX Response Time

With Swift Cacheable AJAX Actions feature DISABLED took 431 ms.

Cached AJAX Response Time

With Swift Cacheable AJAX Actions feature ENABLED took 55 ms.

That is a pretty amazing increase in performance by caching the AJAX request with Swift Performance.

How to Cache AJAX GET Requests with Swift Performance Pro.

Feature description:

Cacheable AJAX Actions – With this option you can cache resource-intensive AJAX requests (eg AJAX search). You should specify the action names here. You can also set cache expiry time for AJAX requests in seconds. For example you can use it to cache custom ajax search or cache WP datatables ajax responses. It´s advanced stuff. If you don´t know how to use this feature, it`s better not to use it.

AJAX Cache Expiry Time – Cache expiry time for AJAX requests in seconds.

You find this feature in Settings->Caching->General of Swift Performance. If AJAX calls are resource-intensive you can cache those with Cacheable AJAX Actions.

So, to achieve this, you first need to find the Ajax Action as Ajax always has an action. Load the page in GTMetrix and open the Waterfall tab, look for the admin-ajax.php and open that tab.

Just click on the Params tab and note the action, in this example: alm_get_posts

Then return to your WordPress site backend, Swift Settings and look for Cacheable AJAX Actions in Settings->Caching->General: set alm_get_posts there. That`s all.

 

Verify if Swift is Caching the AJAX GET Requests

Use Curl or Load the page in GTMetrix and open the Waterfall tab, look for the admin-ajax.php, open that tab Headers. Cache response header should reporting a HIT (swift-performance – HIT).

Now you have successfully cached WordPress admin-ajax GET requests with Swift Performance and your AJAXified content will load faster while PHP and MySQL get a much deserved rest.

CDN for more speed, performance and security

CDN is short for Content Delivery Network which is a network of servers that deliver cached static content from websites to users based on the geographic location of the user.

You can/must use CDN on top of having a web hosting account. CDN helps speed up things, but doesn’t replace a web hosting account.

Akamai and Gomez.com explored the correlation between website load times and visitor activity. Here are just some of the facts they found:

  • 47% of people expect websites to load within 2 seconds.
  • 40% of people consider 3 seconds too long to wait for a website to load.
  • If a page were to delay in loading by just one second, it could mean a difference in 7% in conversions.

For websites with a lot of traffic and/or with a large global audience, this is a huge deal. Those few seconds you lose in load time (and in potentially converted business) are extremely valuable.

Akamai predicts that within two years 55% of global web traffic will pass through CDNs.

Cloudflare with AkamaiFastlyHighwindsLevel3 and EdgeCast is part of the Google Cloud Platform CDN Interconnect program. Cloudflare is a content delivery network (CDN) and acts between your website and your visitors.

CDN providers are usually using a cookiless unique subdomain for every site. These providers usually use pull technology, so they can proxy the content for the first request, and serve the following requests from the cached version from their server.

Cloudflare will handle the traffic at DNS level, which means it won’t change the host for the static content. Because of this, it can also improve security. Whenever a user visits your site, Cloudflare will first check for any indicators of malicious intent. Once Cloudflare verifies the visit isn’t motivated by nefarious purposes, it serves up data from the data center that’s geographically closest to your visitor

That provides your web security and much faster website load speeds.

Proxy caching with Cloudflare

What is proxy caching

Speed is important. Even if you have optimized your site already, the load times can vary based on the physical location. You may also have a good server, but you can still improve TTFB and page load time with proxy caching.

Many sites are using Cloudflare as a CDN, however you can also use it to cache your pages, and let Cloudflare serve them to your visitors. It means, that on the first visit Cloudflare will cache the page content as well, so following requests won’t even hit your server. Of course if you are using Cloudflare for page caching you will need to enable Auto Purge for Cloudflare.

NOTE: only Cloudflare Business and Enterprise packages let you to bypass the cache based on cookies, however in most cases you can also use this feature with their free plan, but your logged in users will get the same cached pages. Of course My Account, Cart, Checkout (and any excluded) pages won’t be cached.

Let’s see how can Cloudflare caching can improve the speed of an already optimized site.

Environment:
Siteground StartUp Hosting (Bulgaria)
WordPress 5.0.3
OceanWP + Elementor (Business demo content installed)

Configuration

Swift Performance

Enable Auto Purge and set API credentials to let Swift Performance clear cache if it is necessary

Also enable Proxy Cache and set the Proxy Cache Maxage to 1 year (30879000)

Cloudflare

Add a Page rule in Cloudflare to cache everything

Testing

We will test the site loading speed with GT Metrix from 2 locations: Vancouver, Canada and Hong Kong, China. We will choose Chrome desktop browser for the tests.

First test

Swift Performance is inactive, Cloudflare standard caching enabled. Even if Cloudflare is active, it caches only static content, not the page itself.

Location Fully loaded time Onload Contentful paint Test link
Vancouver 1.5s 1.5s 1.2s
Hong Kong 1.9s 1.8s 1.8s

With Swift Performance

We activated Swift Performance and configured it. We already improved the speed, but is it enough? Not for us…

Location Fully loaded time Onload Contentful paint Test link
Vancouver 1.3s 1.2s 0.9s
Hong Kong 1.6s 1.4s 1.3s

Proxy cache enabled

Lets see what happens if we let Cloudflare cache the page itself.

Location Fully loaded time Onload Contentful paint Test link
Vancouver 0.7s 0.6s 286ms
Hong Kong 0.5s 286ms 224ms

Conclusion #1

The most important factor for user experience is Contentful paint time. We decreased it to 2-300ms, which is almost instant load. That means when the user clicks your link in Google results, the page will be shown instantly on their device.

But there is an other important aspect: load time on 3G

Testing on 3G

We will test the site loading speed with GT Metrix from 2 locations: Vancouver, Canada and Hong Kong, China. We will choose Chrome desktop browser for the tests again, but now we limit the connection speed to 3G

First test

Swift Performance is inactive, Cloudflare standard caching enabled. Even if Cloudflare is active, it caches only static content, not the page itself.

Location Fully loaded time Onload Contentful paint Test link
Vancouver 10.7s 9.8s 4.2s
Hong Kong 12.5s 11.2s 7.0s

With Swift Performance

We activated Swift Performance and configured it. Lets see if it is good enough this time…

Location Fully loaded time Onload Contentful paint Test link
Vancouver 5.8s 5.6s 3.3s
Hong Kong 5.6s 5.4s 3.3s

Proxy cache enabled

Lets see what happens if we let Cloudflare to cache the page itself.

Location Fully loaded time Onload Contentful paint Test link
Vancouver 4.4s 4.2s 2.2
Hong Kong 4.4s 4.2 2.1s

Conclusion #2

We decreased the rendering time (contentful paint) to 2.2s. If you imagine yourself with your phone in your hand, you just clicked to a link somewhere, and you need to wait 5-7s to see the content, or only ~2s you can imagine the difference 🙂