WordPress Site Speed, Perfected—Ask Me Anything

[Nick M.]

I updated my caching plugins on my wordpress sites after reading this post. The desktop loading is much improved (using better PNG compression helped too). But on mobile, there's a weird delay before the initial loading of the page. I'm not sure if it's a DNS issue or something else

I'm going to try and use the remote debugging tools to figure out what's going on: Get Started with Remote Debugging Android Devices | Tools for Web Developers | Google Developers

On most modern browsers you can emulate a mobile phone, try using pagespeed plugin in emulation and see if you can replicate. There are a variety of ways to get to the bottom of it, but you have to rule out your phone/service first.

I am sure @bytecode has some good suggestions as well.

@softwareRules, glad the caching helped out your site!

The Chrome developer tools are really good with debugging mobile issues. It's not a substitute for actually getting the device and trying it out, but it's the best alternative out there.

Here's how you can run PageSpeed Insights natively in Chrome:

Lighthouse overview - Chrome Developers

Learn how to set up Lighthouse to audit your web apps.

developers.google.com

As for the delay, what does it look like? Just a blank screen? Unstyled content? Something else? In general, mobile browsers are slower than desktop browsers. And DNS lookups can take significantly longer.

 

Don't like ads? Remove them while supporting the forum: Subscribe to Fastlane Insiders.

[rpeck90]

Un-optimized Shopify sites with 22 MB file size (for home page) actually loads as fast as a heavily optimized WP site, if not faster. I'm still trying to dig out what type of tech stack they're using.

Shopify use Ruby on Rails:

View: https://www.youtube.com/watch?v=HNH7El_BEsw

 

[Nick M.]

The Best WP Rocket Alternative​

I don’t use WP Rocket.

At this point, most people ask why. And well, my answer is that it’s too slow. Not using WP Rocket and speeding up sites normally typically yields faster results. And it’s cheaper.

Now it’s not that WP Rocket is bad. In fact, it does everything exactly as advertised with a simple installation. If you’re looking to make a really slow site faster the easiest way possible, WP Rocket is the way to go.

In fact, everything that WP Rocket does is good practice. Things you should do on your own site. So let’s see how to essentially replace WP Rocket and make your site even faster.

I should note that I’m not 100% sure why WP Rocket is slower because I’ve not looked at it’s source code. My guess is that simply the act of putting everything in one plugin makes it slower.

WP Rocket’s Features

• Page Caching
• Cache Preloading
• Sitemap Preloading
• GZIP Compression
• Browser Caching
• Database Optimization
• Google Fonts Optimization
• Removing Query Strings from Static Resources
• Lazy Loading
• Minification/Concatenation
• Defer JS
• CDN Integration (including CloudFlare)
• DNS Prefetching
• Mobile Detection
• Heartbeat Control

This is the list of features taken directly off their own website.

Everything else it does are just nice conveniences and compatibility features. Not things we need to focus on implementing ourselves. This may look like a long list, but it’s actually quite simple to do everything here.

In fact, if you’ve already read through the post on caching, you’ve already completed several of items.

Now let’s look at a brief overview of what I’d recommend we do. Note that I’m not going to get into any of the specifics in this post, we’ll cover just an overview of what plugins to use. And for those of you who already know code and how WordPress works, in those later posts we’ll go over how to do pretty much everything here without plugins, making your site even faster!

Autoptomize
With over 2 million active installations, Autoptomize is one of the go-to plugins for improving your site speed. We’ll be using it for:

• Lazy Loading
• Minification/Concatenation
• Deferring and asyncing JS
• Help with Google Font Optimization

It’s worth noting that Autoptomize does more than just that, but these are the features we’re using to replace WP Rocket.

Note: will require a code snippet for the functions.php file to async JS

Warm Cache
What good is having a caching plugin if the first user lands on an uncached page? We want every page to be cached all the time, even right after we clear the cache. Warm Cache allows us to do that. Some other caching plugins include cache warming (a.k.a. cache preloading), but none of our fastest 3 include it.

It fixes:

• Cache Preloading
• Sitemap Preloading

My Custom Functions
My Custom Functions will allow us to add code snippets to our functions.php file, while letting us update the theme without destroying our edits. For those that don’t know how to code, don’t worry, I’ll be providing all the snippets.

• Asyncing Autoptomize JS
• DNS Prefetching

Later on, we’ll dig into this file a lot more, because it means we can make the theme itself faster without worrying about creating a child theme. However, for many themes, creating a child theme is actually better.

OMGF
OMGF is a plugin that allows Google Fonts to be hosted locally. Which means fewer DNS lookups and you can get those better scores in GTMetrix for implementing browser caching (not that we care about the scores).

What this plugin does well is that it adds a cron job to always make sure you have the most recent version of the fonts installed, which is the number one reason why you should not load Google Fonts locally.

Kind of obvious, but this one solves:

• Google Fonts

CDN
So spoiler alert, I currently use StackPath because it’s the fastest CDN I’ve found. That could very well change in the future as web standards change (and they are going to change within the next year or two, I hope). However, even the free CloudFlare CDN does everything we’re going to need it to do to replace WP Rocket.

Our CDN will take care of many of these items for us:

• Browser Caching
• Database Optimization
• Removing Query Strings from Static Resources
• CDN Integration (it’s a CDN, duh)

And a lot more. Today, CDNs are no longer optional because of all the features (and security) they provide.

Overview
Let’s look back at this list from WP Rocket:

• Page Caching (Cache Enabler)
• Cache Preloading (Warm Cache)
• Sitemap Preloading (Warm Cache)
• GZIP Compression (Cache Enabler)
• Browser Caching (CDN)
• Database Optimization (Not worth a plugin)
• Google Fonts Optimization (OMGF)
• Removing Query Strings from Static Resources (CDN)
• Lazy Loading (Autoptomize)
• Minification/Concatenation (Autoptomize)
• Defer JS (Autoptomize)
• CDN Integration (CDN)
• DNS Prefetching (My Custom Functions)
• Mobile Detection (Not necessary with response themes)
• Heartbeat Control (Usually not necessary, but if needed WP Rocket made a free plugin)

There you have it. A simple guide on how to completely replace WP Rocket.

Actually, there’s several more reasons why I’m going to share with you this setup:

• Most of these plugins are compatible with most sites, including Divi and Elementor
• These plugins are compatible with most hosts, meaning that it can work wherever you host your site
• This setup does way more than WP Rocket or what I’ve let on here
• It’s easy to see how everything works and to test for the optimal configurations for your site

Occam’s Razor
Of course, simpler is always better. As I’ve noted, you won’t even need most of these plugins if you want to dive into the code more. So, we’ll work out way through that.

Until next time, may the speed be with you.



*that was a bad pun

 

[Nick M.]

4 “Advanced” Speed Optimizations You Didn’t Know You Needed​

There are many tools online to help you speed up your website. Yet, nine times out of ten, they simply tell you what’s wrong. Not what you could be doing better.

Perfect scores don’t mean perfect speed.​

So here are four musts for website speed that will make your site even faster, even if you’ve already done “everything”.

1. Specifying Character Sets
Let’s talk about how the browser has to render your webpage for a bit.

There are three overarching big steps:

Downloading: This is the act of the browser getting the correct source files. Minimizing download time are things like caching, using a CDN, minification, lazy loading, image optimization, etc.

Parsing: This is the browser interpreting the files it has downloaded. The standard best practice here is keeping DOM nodes as minimal as possible.

Rendering: This is the act of figuring out how to display a page and displaying it. When you talk about asyncing/deferring JS, critical path css, or keeping fonts visible, that’s all to optimize the rendering.

Specifying a character set lowers the time the browser needs to parse a webpage’s code. There are several accepted character sets you can use in HTML, including ASCII, UTF-8, and UTF-16 (though ASCII is becoming outdated).

If you don’t specify which character set you’re using, the browser has to take the time to figure out which character set you’re using. Time you can eliminate by telling it early.

Most well-coded WordPress themes do this by default, but you specify it by adding a meta tag in the head.

<metacharset="UTF-8">

Or for WordPress:

<metacharset="<?php bloginfo( 'charset' ); ?>">

2. Set Image Sizes
Setting an image size doesn’t necessarily seem like the kind of think you’d have to set for speed. But let’s look at what’s going on in more detail.

This is what happens during the rendering step.

Rendering Performance | Web Fundamentals | Google Developers

Style: Style is when the browser determines which styles should be placed on which elements. The best way to limit this step is to remove unused CSS and make your CSS styles as clean as possible.

Layout: This is how each of the elements are placed on the page. Where do the headers go, or the text, or the backgrounds, or the images. The browser is essentially creating a wireframe of where everything is to put data in later.

Paint: Painting is just like it sounds, it’s filling out the pixels with color. Just like an artist uses a pencil sketch to get the layout of their work, they will then paint on top of the sketch to bring color. You can think of this step also like painting by numbers.

Composite: Often times when we’re coding up a website, there will be multiple layers. For instance, the text is on top of the background. Compositing is the act of putting the layers in the right order. You wouldn’t want the background on top of the text!

Crucially, all steps must be completed in order. If you need to update the layout, you’ll then have to paint and composite. However, you can start at later steps. So if the layout stays the same but the color of the text changes, you can just paint and composite. Lastly, layout takes the longest time because to update one elements position or size, the browser then has to recalculate the layout for the entire page! Which means we have to rerender the entire page. So we want to update layout as little as possible.

Let’s look at this in terms of images.

By default, images have no sizes until they are loaded. Which means the browser is busy with the layout, painting, and compositing of all the text before the images is loaded, then has to redo all that work when the image is loaded. Because once the image is loaded, it has a size, so layout needs to be updated.

And this happens for every image.

That’s a lot of work, don’t you think?

So if you specify the image dimensions in the HTML, it saves lots of time rendering the page.

3. Disable Image Hot linking
Image hot linking is when another website uses your images by linking to it directly. Not copying an image and using that copy, but rather linking to your copy hosted on your server.

Though this is legal in the EU and the US, it steals your bandwidth, can overload your host, and slows your site down.

But it happens.

Though it might not effect you now, it could in the future. And there’s no compromises in speed, security, or functionality to check for hot linked images.

There are many methods for this, so it’s best to look at what your CDN or host says to do for image hot linking.

4. Instant Page

There’s a chance that you might have heard or thought about the other three items I’ve listed. But if there’s anything here that you’ve not heard of, it would be this one. And it’s so simple to implement.

As a website owner/developer, we want our pages to load as fast as possible. Ideally instantaneously. However, with current technology (and the speed of light), there’s a limit to how fast we can make our pages load.

But what if we knew what link a user is going to click on before they click on it, and start loading that page early? If this were possible, and we already had a page that loaded fast, we really could have instantaneous load times.

Of course, this isn’t hypothetical.

It’s called instant.page.

And it’s a simple 1kB JS script that does exactly this. When a user clicks on a link, they usually hover over that link for a bit. Typically 200-500 milliseconds. Sometimes longer. That means we can shave off a lot of time.

Adding the script is simple. Here are three options.

For HTML sites, add this to your footer:

<scriptsrc="//instant.page/2.0.0" type="module" defer async integrity="sha384-D7B5eODAUd397+f4zNFAVlnDNDtO1ppV8rPnfygILQXhqu3cUndgHvlcJR2Bhig8"></script>

For a WordPress plugin, download either WP Instant Links or the instant.page plugins.

For WordPress functions.php, add this snippet to where you enqueue your other scripts:

wp_enqueue_script('instant-page', '//instant.page/2.0.0');

Of course, async, defer, and combine with your other JS.

Conclusion
As you can see, getting the fastest possible site is not simply about getting high scores on common best-practices tools. It’s also about knowing the intricacies of how your site renders and gets displayed.

And it’s about finding every possible advantage to speeding up your site, even beyond those commonly found on “Ultimate Guides to Speeding up Your Website” articles.

 

Don't like ads? Remove them while supporting the forum: Subscribe to Fastlane Insiders.

[ApparentHorizon]

@MJ DeMarco You ever marked a technical thread as Gold/Notable? B/C I nominate this one.

 

[SamRussell]

Wow, great guide - thank you! I've added a few of these features to my website... it'll be interesting to see how conversions improve over the next couple of weeks!

Do you have any advice on a CDN?

 

[softwareRules]

As for the delay, what does it look like? Just a blank screen? Unstyled content? Something else? In general, mobile browsers are slower than desktop browsers. And DNS lookups can take significantly longer.

On mobile it's blank and I see the progress bar going and then all of a sudden the content starts to fill in. I also thought DNS lookup delay, not sure yet.

 

Don't like ads? Remove them while supporting the forum: Subscribe to Fastlane Insiders.

[Nick M.]

Wow, great guide - thank you! I've added a few of these features to my website... it'll be interesting to see how conversions improve over the next couple of weeks!

Do you have any advice on a CDN?

Do post or PM me your thoughts! I'd be curious how everything works out for you.

As for a CDN, I currently use StackPath. It is $10/month, but well worth the money. Faster than CloudFlare, insanely good support (potentially the best I've ever seen), and easy to setup and use. I haven't rigorously tested CDNs yet, but StackPath is the best I've looked at. I'd be somewhat surprised if there's a better one than StackPath.

With that said, if you need WAF, go with CloudFlare. StackPath's WAF costs more and makes your site incredibly slow. CloudFlare specializes in security without compromising speed. If you're looking for absolute speed, I'm sure there's other services that will provide the same security protection as WAF that you can use in conjunction with StackPath.

 

[Nick M.]

On mobile it's blank and I see the progress bar going and then all of a sudden the content starts to fill in. I also thought DNS lookup delay, not sure yet.

Honestly, it could be many, many things. I'd have to look at the site to really give you a helpful answer. Otherwise I'd simply be guessing and likely would be wrong.

The reason is simple: "content not filling in" is a symptom of many underlying problems. There are ways to diagnose what it is, but it requires looking at how the site loads.

 

[Taz]

How do you feel about using multiple CDN's? I see a lot of mixed results on the internet. I use WP Rocket, Cloudflare, and Stackpath as well as imagify. Despite my best efforts, I am having difficulties getting speeds under 1s.

 

Don't like ads? Remove them while supporting the forum: Subscribe to Fastlane Insiders.

[Nick M.]

Top 5 Myths About Site Speed​

There are many myths about what it takes to make a fast site. However, not all of them will end up making your site fast.

So let’s explore the top 5 myths in detail.

Myth #1: Load Time Matters
This myth has got to die. Because load time doesn’t matter.

Why?

Simple: users don’t care about load time. In fact 95% of the time, you probably don’t even notice how long it takes for a webpage to fully load (citation needed). And for the typical user, the only way to know when a page is fully loaded is to look for the favicon to appear. Are you looking there?

So if we don’t care about load time, what really matters with site speed?

Optimal User Experience

”Onload is not the best metric for measuring website speed […] What we’re after is a metric that captures the user’s perception of when the page is ready.” —Steve Souders: Former Head Performance Engineer at Google

We don’t need a site to load fast. We need a site to feel fast. In fact, we can often use this to our advantage. Which means, we can actually increase load time to increase speed!

Sounds paradoxical, but it’s true. Here’s how.

Several years back, Google defined several new metrics for web developers to use instead of load time. And they are meant to answer the following questions:

1. Is it happening?: Did the navigation start successfully? Has the server responded?
2. Is it useful?: Has enough content rendered that users can engage with it?
3. Is it usable?: Can users interact with the page, or is it still busy loading?
4. Is it delightful?: Are the interactions smooth and natural, free of lag and jank?

(source)

Isn’t that the kind of experience we want to give our users? That’s how they developed their metrics that are more useful than load time.

1. Is it happening?: First Paint / First Contextual Paint
2. Is it useful?: First Meaningful Paint / Hero Element Timing
3. Is it usable?: Time to Interactive
4. Is it delightful?: Absence of Long Tasks

Furthermore, they’ve also defined two more metrics that further help shape our understanding of how complete the site feels:

• Time to Visually Complete
• Speed Index

Typically, when I say “this website loads in X seconds”, I’m referring to one of those two stats (usually speed index because that’s the number that affects Google search ranking).

Notice how none of these user-centric performance metrics are load time?

This means that to make a site feel faster, we can actually delay non-essential resources to speed up these metrics. The technical terms for this technique are “progressive rendering” and “prioritizing the critical path”.

This can, in some cases, make the overall load time slower.

Take lazy loading of images. That’s a technique that’s used everywhere. Yet, it can technically take your site 20 seconds to load. Or 3 minutes. Or however long it takes for users to scroll.

That’s an extreme example, but it helps to show that load time doesn’t matter.

Myth #2: PageSpeed Insights is the Best Speed Tool
Your next thought may be that Google’s own PageSpeed Insights must be a great tool to help you test your website’s speed. I’ll admit, it’s good. It’s leagues ahead of Pingdom, more useful than GT Metrix, and shows you the user-centric metrics.

In fact, from its November 2018 update, it’s substantially more useful than it was.

Though it is a tool I use, it is not the tool I use the most. I use webpagetest.org.



Why?

Couple reasons:

• PageSpeed Insights gives recommendations and can be hard to diagnose the problem
• The PageSpeed score leads you into a false sense of security (see 4 Speed Optimizations You Didn’t Know You Needed)
• Webpagetest runs multiple tests, ensuring the results are typical (not an outlier)
• Webpagetest provides technical data you can use to make your site faster
• Webpagetest allows you to clearly see the bottlenecks in speed

With that said, I still use PageSpeed Insights to double check that the site uses best practices, but I do not use it to measure speed.

Myth #3: CDNs Will Speed Up Your Site
This myth is one of my favorite myths!

CDNs can speed up your site. But don’t believe that a CDN will speed up your site.

Let’s look at both at how CDNs actually work, and my personal recommendation for CDNs.



Without a CDN, you probably have a single server that’s hosting your website. It can be located anywhere in the world, but let’s say it’s located in Oregon (because many hosts have servers there). This is completely fine.

If someone in California views your site, it will be served fairly quickly. That’s because California is fairly close to Oregon. It’s only about 20ms round trip. However, if a person from New York views the site, it could take a bit longer. In fact, New York City is about 90-100ms from Oregon. That’s 4-5 times slower. And this can’t get any faster because the speed is limited by the speed of light.

So then if you have someone from Europe visiting your site, it will take 200-250 milliseconds! You may have a great load time on the west coast, but across the world it’s really slow!

Of course, you may think that a quarter of a second round trip is still not that bad. Well, it doesn’t just mean your site is just a quarter second slower. In fact, because this round-trip time is for every single resource, your entire site overall is 10x slower! Furthermore, the initial DNS lookup and TLS handshake requires several exchanges between your browser and the server. Which means that even the initial loading of the webpage suffers a lot!

So here’s where a CDN comes in: CDNs have servers all around the globe. You simply connect them to your site and then it can get served from the closest server. This means your site has a consistent load time anywhere in the world!

But here’s an important distinction: a CDN doesn’t necessarily speed up your site. It just makes it consistently fast. Or if your site is slow, it makes it consistently slow.

Furthermore, not all CDNs are equal. Some are faster than others. For instance, take CloudFlare. Now CloudFlare is a perfect example of making your site consistently slow. Because it’s free and has great security features, I’ve tested out CloudFlare extensively. However, it has not made any of my sites faster. If it normally has a 400ms TTFB time, that will become consistent everywhere around the globe.

Which is why I’ve opted to use StackPath lately. On the exact same sites, everywhere I’ve used it, StackPath is about 2x faster than CloudFlare. StackPath is a CDN that actually makes your site faster.

Now, to be fair, CloudFlare has recently made a big announcement that could make it faster than StackPath, but it hasn’t been rolled out to everyone yet. Expect a speed test coming when it does.

But as you can see, a CDN doesn’t necessarily make your site faster. Though it can make your site faster. With that said, get a CDN.

Myth #4: Using a CDN for Images Improves Speed
Specifically in WordPress, there are many image optimization tools. And for most of them, they will also advertise that you should connect it with their CDN for images. Should you?

Well, there’s two sides of the same coin. Like above, CDNs can make your site faster. But here we’re dealing with a CDN specific for images.

This means that your images will get loaded from one CDN, and the rest of your site from another.

However, this violates a couple principles of site speed. The first being Occam’s Razor. Two CDNs is not the simplest solution, so it’s likely not the best solution. So just like two caching plugins are slower than one, two CDNs are slower than one.

And there’s a specific reason for that: when you setup a CDN for images, the images get served from a second domain. Remember the DNS lookup and TLS handshake mentioned earlier? Well, this applies to every domain you connect to. At best, it takes 200ms. So this means that your site automatically becomes at least 200ms slower if you serve your images from a second CDN.



So in the picture above, with the thin blue, orange, and purple bars (dns, connect, and ssl), that’s all wasted time where the site could be faster.

Again, CDNs can improve speed, but don’t think they will improve speed.

Myth #5: Mobile Browsers are Slow
It’s fairly well known that sites on phones load slower than those on your computer. And there’s a reason: mobile internet connections are typically slower.

So this may seem like a bad thing. Mobile browsers are inherently slower. Well, in one respect, they are. However, we can’t use that as an excuse for slow sites.

My goal is always 1 second for desktop and 2 seconds for mobile sites. Compared to most sites on phones, 2 seconds is really fast. Yet it’s slower than desktop. But the typical mobile site isn’t twice as slow as its desktop counterpart. It’s 3-4 times as slow.

For reference, Google specifically recommends 1.2 seconds and 3 seconds on desktop and mobile, respectively.

So how can we still get mobile sites to load fast?



Well, let’s not make the site fast despite the fact that it’s a mobile device, but make the site fast because it’s a mobile device!

Phones have a smaller screen than laptops or desktops, which means it’s possible to load much less of the site and have it become visually complete. We can take all the techniques of progressive rendering (as we learned above) and use them even more than on desktop sites!

Again, it’s making the site load slower to make it feel faster. Because so much less fits on a phone scree, you can delay so much more!

Conclusion
There are a ton of resources online about speeding up sites. And while many will actually tell you tips that will make your site faster, very few actually help you learn why your site is faster. And that can leave you very confused.

That’s why it’s important to cut through all the myths of site speed to learn how to make your site feel fast, really.

 

[Nick M.]

How do you feel about using multiple CDN's? I see a lot of mixed results on the internet. I use WP Rocket, Cloudflare, and Stackpath as well as imagify. Despite my best efforts, I am having difficulties getting speeds under 1s.

Perfect timing with your question! Just wrote a post that explains it.

But essentially, 1 CDN is better than 2.

For every CDN you use, the browser has to perform another DNS lookup and TLS handshake. That means that instead of using that time to load the resource, it's having to connect with a new server. If you have one CDN with everything served from there, you've eliminated all unnecessary DNS lookups and TLS handshakes.

For reference, that's 200-500ms saved for each CDN.

If I were you, I'd get rid of CloudFlare and the Imagify CDN and pass everything through StackPath. StackPath is the fastest CDN I've tested so far, although CloudFlare recently announced a feature that may make it faster in the next month or so. As far as I know, WP Rocket does not include a CDN and it's perfectly compatible with StackPath.

 

[Taz]

Perfect timing with your question! Just wrote a post that explains it.

But essentially, 1 CDN is better than 2.

For every CDN you use, the browser has to perform another DNS lookup and TLS handshake. That means that instead of using that time to load the resource, it's having to connect with a new server. If you have one CDN with everything served from there, you've eliminated all unnecessary DNS lookups and TLS handshakes.

For reference, that's 200-500ms saved for each CDN.

If I were you, I'd get rid of CloudFlare and the Imagify CDN and pass everything through StackPath. StackPath is the fastest CDN I've tested so far, although CloudFlare recently announced a feature that may make it faster in the next month or so. As far as I know, WP Rocket does not include a CDN and it's perfectly compatible with StackPath.

Okay that's actually pretty interesting. Most places, people recommend using both CloudFlare with Stackpath.

So now would Stackpath make up for the loss of features that cloudflare comes with? Such as DDOS protection and the other bells and whistles? For example the firew and page rules?

P.S. I also don't use imagify CDN (didn't even know they had one), I'm using SG Optimizer for my images, haha I don't know why I had imagify in my head.

 

Don't like ads? Remove them while supporting the forum: Subscribe to Fastlane Insiders.

[Nick M.]

Okay that's actually pretty interesting. Most places, people recommend using both CloudFlare with Stackpath.

So now would Stackpath make up for the loss of features that cloudflare comes with? Such as DDOS protection and the other bells and whistles? For example the firew and page rules?

P.S. I also don't use imagify CDN (didn't even know they had one), I'm using SG Optimizer for my images, haha I don't know why I had imagify in my head.

To be honest, I've never heard of using both CloudFlare and StackPath before, but after looking at how others have done it, my first instinct would be that it's still slower than one CDN because of all the DNS lookups and TLS handshakes.

When I've tested StackPath and CloudFlare before, the main speed difference is in the Time to First Byte (TTFB) for the html. All the resources loaded in the same amount of time. The setups I looked at had CloudFlare serving the HTML and the resources going through StackPath. That would mean you'd get the slower TTFB, and another 200-500ms wasted in another connection. Therefore, either CloudFlare or StackPath should be faster than both.

If you want the absolute most secure site, go with CloudFlare all the way. They have the best security features I've ever seen. Your site will only be 100-200ms slower than StackPath from what I've tested. However, that time discrepancy can make a difference on your overall business.

If you want the absolute fastest site, go with StackPath. They do have security features like DDoS protection and several other security features. However, I'd not recommend their WAF. Maybe you'll have a different experience, but for me it made my testing site painfully slow. (like 4 seconds was fast with their WAF). They do have a feature called "Edge Rules" which has some overlap with page rules. However, check out what if it has what you need before moving over. StackPath does have a 2 week free trial, so you can make sure it has all the bells and whistles you need from before you switch your site over. For most static sites, I use their full integration, and for ecommerce sites (or any kind of dynamic site), I use the standard WP integration.

With that said, keep in mind that I'm going to be redoing my CloudFlare v StackPath testing again in about a month or so because of CloudFlare's announcement of adopting QUIC.

 

[Shahadar Hussain]

I can optimize the whole website by checking some different speed analyzing tools. But I can optimize size in desktop version but can't much optimize on the mobile version. What can I do for it?

 

[Tiger TT]

@Nick M. What are your thoughts about Sucuri's WAF/CDN? They have their own CDN on top of WAF. I'm using their services and I see that their CDN only caches about 70% of the traffic. The rest still hits the hosting side. Do you think this is a good approach?

Maybe I can install a caching plugin so that the traffic that hits my hosting side also gets served cached pages.

 

Don't like ads? Remove them while supporting the forum: Subscribe to Fastlane Insiders.

[cloverex]

@Nick M. how do i send you a PM? im a new member, thats why i dont see the option?

 

[Ouroborus]

Nice post,
I learned a new thing & seems a very intriguing concept from this thread, & that is Instant Pages.
Didn't really knew a single line of JS can achieve that.
But tbh, this thread relies too much on plugins & hence too much on php, php is slow & not secure )
To the people who really want to speed up their sites: Stop installing various cache plugins & other functional plugins.

I sell dedicated servers for a living & currently host 1k+ WordPress sites on my farm.
Therefore, I think I can provide some advice,
1)If you're site doesn't require users to log in, then use FASTCGI CACHE which is an inbuilt nginx module. It skips the whole php part of site serving & servers directly from your RAM(the fastest possible hardware in terms of serving the internet)
2) If you're hosting an e-commerce or a sites that requires it's users fo login the use REDIS CACHE, which is actually an object cache, that caches your MYSQL DATABASE QUERIES(yes, you read that correct). The biggest bottleneck for WordPress is that it relies on database to function, what if you can cache a whole database & it's functions, Problem Solved.
There you have it. Test & enjoy! )

Thanks,

Best Regards.

 

[Xeon]

Quick question about loading and CSS.

When my website loads (Wordpress), on some pages, it will show the HTML version first, then after 1 second, it'll show the styled version. Is there a way to delay page loading until the CSS rendering is completed?

While it's not a big issue, it's kind of unsightly that the user has to catch a glimpse of the ugly stuff for 1 second before the nice CSS styling takes over. I remember there was a term for this kind of phenomenon, can't remember what it's called.

 

Don't like ads? Remove them while supporting the forum: Subscribe to Fastlane Insiders.

[MoneyPhantom]

Quick question about loading and CSS.

When my website loads (Wordpress), on some pages, it will show the HTML version first, then after 1 second, it'll show the styled version. Is there a way to delay page loading until the CSS rendering is completed?

While it's not a big issue, it's kind of unsightly that the user has to catch a glimpse of the ugly stuff for 1 second before the nice CSS styling takes over. I remember there was a term for this kind of phenomenon, can't remember what it's called.

The term you are searching for is "critical CSS".

The issue you describe happens because you load all of the CSS in the body tag instead of the head tag. Resources linked in the head tag prevent the page rendering whereas external resources from the body tag do not.

Conclusion: Link the CSS you want to have available when the page is rendered for the first time in the head tag. Fact and result is that this will increase the felt loading time for the user. Meaning, in best case you do not move all of the CSS resources into the head. Instead load all the "critical CSS" which is needed to display above-the-fold content within the head and everything else in the body afterwards.

You can either generate the critical CSS manually (not worth the work IMHO if you're not a millisecond fanatic) or use some auto generators available throughout the web (but you may need to fix some things manually as they are not perfect).

 

[Patrick Ciora]

Hi @Nick M.!

I am very interested to dive deeper into this topic, but first I would highly appreciate if you can help me out with a specific question.

Would you recommend using WordPress in general to start off a business, over a static self coded website from scratch (based on a template)?

 

[AppMan]

I am looking for free business directory plugin that provide REST API , do you know any wordpress plugin for that ?

 

Don't like ads? Remove them while supporting the forum: Subscribe to Fastlane Insiders.

[EN_VY]

How much of this can be applied to shopify?

Curious if there's a reason you like wordpress so much? Although you're addressing my biggest gripe with wordpress...it being so slow typically!

It has taken me countless hours testing different things but now sites I've build score 90+ on mobile and desktop. And they're websites with effects, video, plenty of images and sections.

The problem with Wordpress is these bloated themes like The7. Not only are they bloated but people use pagebuilders like Elementor or Beaver Builder which are also bloated.

What has worked for is me is:

Use fast hosting, I recommend a VPS minimum
Stay away from page builders
Optimize images and serve in WebP
Use caching plugin.

 

[EN_VY]

The Best WP Rocket Alternative​

I don’t use WP Rocket.

At this point, most people ask why. And well, my answer is that it’s too slow. Not using WP Rocket and speeding up sites normally typically yields faster results. And it’s cheaper.

Now it’s not that WP Rocket is bad. In fact, it does everything exactly as advertised with a simple installation. If you’re looking to make a really slow site faster the easiest way possible, WP Rocket is the way to go.

In fact, everything that WP Rocket does is good practice. Things you should do on your own site. So let’s see how to essentially replace WP Rocket and make your site even faster.

I should note that I’m not 100% sure why WP Rocket is slower because I’ve not looked at it’s source code. My guess is that simply the act of putting everything in one plugin makes it slower.

WP Rocket’s Features

• Page Caching
• Cache Preloading
• Sitemap Preloading
• GZIP Compression
• Browser Caching
• Database Optimization
• Google Fonts Optimization
• Removing Query Strings from Static Resources
• Lazy Loading
• Minification/Concatenation
• Defer JS
• CDN Integration (including CloudFlare)
• DNS Prefetching
• Mobile Detection
• Heartbeat Control

This is the list of features taken directly off their own website.

Everything else it does are just nice conveniences and compatibility features. Not things we need to focus on implementing ourselves. This may look like a long list, but it’s actually quite simple to do everything here.

In fact, if you’ve already read through the post on caching, you’ve already completed several of items.

Now let’s look at a brief overview of what I’d recommend we do. Note that I’m not going to get into any of the specifics in this post, we’ll cover just an overview of what plugins to use. And for those of you who already know code and how WordPress works, in those later posts we’ll go over how to do pretty much everything here without plugins, making your site even faster!

Autoptomize
With over 2 million active installations, Autoptomize is one of the go-to plugins for improving your site speed. We’ll be using it for:

• Lazy Loading
• Minification/Concatenation
• Deferring and asyncing JS
• Help with Google Font Optimization

It’s worth noting that Autoptomize does more than just that, but these are the features we’re using to replace WP Rocket.

Note: will require a code snippet for the functions.php file to async JS

Warm Cache
What good is having a caching plugin if the first user lands on an uncached page? We want every page to be cached all the time, even right after we clear the cache. Warm Cache allows us to do that. Some other caching plugins include cache warming (a.k.a. cache preloading), but none of our fastest 3 include it.

It fixes:

• Cache Preloading
• Sitemap Preloading

My Custom Functions
My Custom Functions will allow us to add code snippets to our functions.php file, while letting us update the theme without destroying our edits. For those that don’t know how to code, don’t worry, I’ll be providing all the snippets.

• Asyncing Autoptomize JS
• DNS Prefetching

Later on, we’ll dig into this file a lot more, because it means we can make the theme itself faster without worrying about creating a child theme. However, for many themes, creating a child theme is actually better.

OMGF
OMGF is a plugin that allows Google Fonts to be hosted locally. Which means fewer DNS lookups and you can get those better scores in GTMetrix for implementing browser caching (not that we care about the scores).

What this plugin does well is that it adds a cron job to always make sure you have the most recent version of the fonts installed, which is the number one reason why you should not load Google Fonts locally.

Kind of obvious, but this one solves:

• Google Fonts

CDN
So spoiler alert, I currently use StackPath because it’s the fastest CDN I’ve found. That could very well change in the future as web standards change (and they are going to change within the next year or two, I hope). However, even the free CloudFlare CDN does everything we’re going to need it to do to replace WP Rocket.

Our CDN will take care of many of these items for us:

• Browser Caching
• Database Optimization
• Removing Query Strings from Static Resources
• CDN Integration (it’s a CDN, duh)

And a lot more. Today, CDNs are no longer optional because of all the features (and security) they provide.

Overview
Let’s look back at this list from WP Rocket:

• Page Caching (Cache Enabler)
• Cache Preloading (Warm Cache)
• Sitemap Preloading (Warm Cache)
• GZIP Compression (Cache Enabler)
• Browser Caching (CDN)
• Database Optimization (Not worth a plugin)
• Google Fonts Optimization (OMGF)
• Removing Query Strings from Static Resources (CDN)
• Lazy Loading (Autoptomize)
• Minification/Concatenation (Autoptomize)
• Defer JS (Autoptomize)
• CDN Integration (CDN)
• DNS Prefetching (My Custom Functions)
• Mobile Detection (Not necessary with response themes)
• Heartbeat Control (Usually not necessary, but if needed WP Rocket made a free plugin)

There you have it. A simple guide on how to completely replace WP Rocket.

Actually, there’s several more reasons why I’m going to share with you this setup:

• Most of these plugins are compatible with most sites, including Divi and Elementor
• These plugins are compatible with most hosts, meaning that it can work wherever you host your site
• This setup does way more than WP Rocket or what I’ve let on here
• It’s easy to see how everything works and to test for the optimal configurations for your site

Occam’s Razor
Of course, simpler is always better. As I’ve noted, you won’t even need most of these plugins if you want to dive into the code more. So, we’ll work out way through that.

Until next time, may the speed be with you.



*that was a bad pun

How is it more simple to replace WP-Rocket by using multiple plugins? Not saying WP-Rocket is the only solution but you are able to complete most of optimization tasks with 1 single plugin.They just introduced a feature that delays JS execution until user interaction. Total game changer and if sites were loading fast before, they load event faster now.

 

[Pat D. Rick]

Does it always make sense to use a CDN?
The other day I heard someone talk about it and he said that it's not necessary to use a CDN if you're in a tiny market where all users basically are located in just one country (like only german speaking market for example).

 

Don't like ads? Remove them while supporting the forum: Subscribe to Fastlane Insiders.

[Hadrian]

Thank you Thank you Thank You for this thread! My Wordpress website is painfuly slow but I will get stuck in using this thread asap. Hmmm I wonder can anyone give me some quick tips on how to speed up FTP audio track loading times via Siteground? Gracias!

 

[Xeon]

Would be good if WP Rocket has a version for Shopify. It would be insane.

 

[bracknelson]

Thanks for covering the topic thoroughly

 

Don't like ads? Remove them while supporting the forum: Subscribe to Fastlane Insiders.

[LifeisSuffering]

As a Total Newbie, i wanna learn how to code a website and an app for my business So my question is where do i start learning and what language should i learn, and if you have any advices please tell me

 

[Knicks]

As a Total Newbie, i wanna learn how to code a website and an app for my business So my question is where do i start learning and what language should i learn, and if you have any advices please tell me

Not OP but it depends on what you're trying to do. Do you want a simple website with contact info and maybe a blog or something? Then just search for the WordPress/Elementor tutorial from Tyler on YouTube. This guy's teaching style is awesome.

If you need a real web app you may need more than WordPress. Although there are themes on ThermeForest.com which may be suitable for something like a SaaS app. It really depends on what you're looking for.