Minification, Concatenation, and GZIP Compression: How to Optimize Your Code
What do we mean when we talk about optimizing your code? Get to know the most popular optimization techniques: minification, concatenation, and GZIP compression.
Read moreFrom Page Caching to CDN: How to Make Your WordPress Site Blazing Fast
Speed is key. Every person dealing with web performance optimization cannot overlook this (apparently) simple concept.
How can we define web page speed?
And how should we measure it?
Which are the secrets of fast websites?
If you want your website to be loved by Google, rank high on the SERP, and convert your readers, you need to ask yourself the above questions.
As for the answers, that’s the reason we’re here!
This guide is all about web page speed for WordPress sites.
Getting Started with Caching
Our main focus here will be the concept of caching in its various forms.
It’s not a random choice. Modern websites are complex structures crowded with dynamic elements, large hero images, background videos, web fonts, and engaging product pages: All these stylish elements, which should be used in moderation, are prone to increase the loading time of your site.
They become burdens that make your pages slow to load while getting your users impatient.
A caching system can help you retain your users, increase conversions, and be loved by Google which considers loading time as one of the most important SEO metrics.
We’ll see how everything works below.
The Problems of a Slow WordPress Site
Loading time is the period between the moment a user starts navigating to the page until the whole content has loaded and is usable.
If you run a website and are working to get a result, be it money, engagements or notoriety, it’s crucial not to ignore the principles of web page speed.
According to the 2017 State of Online Retail Performance report by Akamai, there are specific findings that show how website performance is critical to engage with your public:
- A 100-millisecond delay in website load time can decrease conversion rates by 7%.
- A two-second delay in web page load time boosts bounce rates by 103%.
- Also, 53% of mobile site visitors will leave a page that takes longer than three seconds to load.
That’s not all. Google has announced the switch to mobile-first indexing. That means mobile pages which suffer the most from long load times, should be looked after with much more care by developers and designers.
Load Time
Every time you click on a link, type a URL in the browser, or reload a page, you’re triggering a number of actions in the background of your website.
You probably won’t even notice them, but there are around 20 actions taking part in this process.
Understanding what happens behind the scenes of your WordPress site when your users try to visit a page is crucial.
That’s why you’ll benefit from learning why your WordPress site takes so much time to load and how you can fix its speed issues. Not only will you get a complete overview of the technical side of speed, but you’ll learn how to measure it, and which are the best speed testing tools.
You’ll also discover the seven most common errors that take down website performance.
Server Response Time
A good percentage of the speed of your WordPress site also depends on your server.
In this context, choosing a reliable hosting provider is one of the smartest gifts you can give to your website.
Why?
Because front-end fixes are not sufficient to boost your website load time: They need to be supported by an efficient and fast responding server.
Server response time is measured through Time To First Byte (TTFB). This is the amount of time the browser needs to create a connection to the server and download the contents of a web page.
Learning how to reduce Time To First Byte is one of the first pillars for a healthy and performant website.
Our guide, How to Reduce Time to First Byte and Load Your WordPress Site Faster, will help you through the secrets of server response time and will give you six tips to reduce it.
Caching Systems for your WordPress Site
WordPress is a CMS using databases to work. To put it simply, this means that for WordPress to work and for your readers to access your website including pages, posts, categories, and tags, many requests to the database are necessary.
Every request is handled by thousands of lines of PHP code, which makes things work.
That’s all great, except for one little detail: To satisfy every request the browser sends to your website, your server has to work a lot. There’s a great number of resources working behind every website.
The more your site grows in terms of content and visitors, the more your server will have to toil.
That’s when caching comes to the rescue!
There’s not a unique definition of caching. Multiple caching systems are very often necessary to make your site perform at its best.
Here’s a list of some of these different types of caching:
- Page caching happens on the server and stores the entire HTML of a page, which is WP Rocket’s specialty.
- A Browser cache stores the HTML page, but on the browser’s side.
- A CDN cache stores HTML, and all other static files such as images, CSS, and JavaScript on the CDN side.
- Reverse proxy caching happens on the server’s side and stores all its responses to the client’s server. This is the case with Varnish.
- Object caching stores database queries. This is how Memcached operates.
- Bytecode caching is a PHP extension and stores precompiled script bytecode in the memory.
Over the course of this guide, we’ll see the differences in these types of caching and how you can use them on your WordPress site.
What is a CDN?
A Content Delivery Network is an important technology standing behind every successful site. It lets you count on a globally distributed network of edge servers that will act as a bridge between your website’s origin server and your visitors’ location.
The edge servers save a copy of the static content of your website after it passes through them for the first time. Then, all the images, CSS, and JavaScript files of your pages will be delivered to the end users who will experience a much faster website.
The advantage of a CDN is that every request made by the user will be sent through the nearest location possible. The network is also wide and makes your content available to readers who are geographically far from your origin server.
In our guide, you can find everything worth knowing about CDNs, how they work, and why you should implement one on your website.
What is Cloudflare?
Cloudflare is a world-renowned reverse proxy, and CDN. It provides its services to 12 million domains via 155 data centers scattered around the globe.
It was launched in 2008, and in these years it became an essential and easy-to-install solution for all websites receiving international traffic.
Our guide covers everything you need to know about Cloudflare, and will help you understand if it’s something that can be beneficial for your site. (Spoiler: Most of the time, it will be.)
What is Varnish?
When you hear about HTTP reverse proxies, you have to think of front-end accelerators that will boost your server’s performance and, as a consequence, your site.
Without a doubt, Varnish is one of the most popular HTTP reverse proxies. It’s not a stand-alone tool because it relies on a dedicated web server to work like NGINX, or Apache.
Since Varnish caches both dynamic and static content, it’s a compelling solution to increase your website speed.
Discover how it works as well as what the benefits are of using Varnish Cache with our dedicated guide.
What is Memcached?
Memcached is one of the most famous open source distributed object caching systems. It works like other caching systems, but the database is now at the core of the process.
It eases database load for dynamic web applications so it’s especially useful for big projects like e-commerce stores, or membership websites.
Read our guide to learn all the secrets of object caching and Memcached, and learn how they can boost the performance of your WordPress site.
WP Rocket: When a Single Cache Plugin can Take Your WordPress Site to the Stars
The effortless way to implement a first layer of cache on your site—sometimes with just a one-click install—is with a static cache plugin.
Static cache plugins are focused on caching static front-end resources of your site including images, CSS, JavaScript, and HTML files.
The WordPress repository is crowded with a number of free static cache solutions.
Some of them are really popular, like W3 Total Cache, WP Super Cache, or Fastest Cache.
Then, there are premium solutions like WP Rocket.
Premium is not a random adjective in this context. It means that you have to pay to use the plugin, but in return, you get a premium service.
High performance, complete documentation, and stellar support should be the three pillars of every premium plugin, even more so with premium cache plugins.
Caching, as you might have understood at this point, is a complex world that involves several aspects of your website: its static and dynamic code, the server, the database, and the browser your readers use.
These elements work together and can sometimes interfere with each other, generating issues or bugs. That’s where the guarantee of premium assistance becomes valuable.
WP Rocket Has It All
Its stunning performance along with an effortless setup, and helpful customer support make WP Rocket one of the most beloved caching plugins by WordPress users.
In a recent survey, our customers listed the top three reasons why they’re using WP Rocket:
- Easy configuration
- Speed boost for their site
- Excellent technical support
Configuring WP Rocket is also an incredibly straightforward task compared to other cache plugins in the market.
Considering that upon activation, WP Rocket will automatically activate 80% of the best web performance practices.
What does this mean?
After installing and activating WP Rocket, and without tweaking any extra settings, your website will immediately take advantage of:
- Page caching (creation of a static HTML file cache)
- Browser caching*
- GZIP compression*
- Cross-origin support for web fonts*
- Combination of inline, and 3rd party scripts
- WooCommerce Refresh Cart Fragments cache* These options are automatically applied on Apache web servers, if available.
At this point, you can already run a speed test on your site, and be prepared to be surprised: It’s highly probable that you’ll notice a prompt improvement in speed.
You’ll also notice there are a few settings enabled by default, meaning that all you need to do is enjoy them and let WP Rocket do all the work.
These settings include:
- Mobile caching, which is based on WordPress’ mobile phone detection
- Cache lifespan of 10 hours
- Combination of Google Fonts files
- Disable (WordPress) Emoji
- Disable WordPress Embeds
- Cache preloading (based on your homepage, and the pages linked from it)
By now, you could simply enjoy the speed gain your WordPress site just obtained, and close the backend of your site.
WP Rocket will keep working for you, making sure your cache is cleared whenever necessary, and recreates it automatically.
On the other hand, if you don’t prefer default settings, you can play around with WP Rocket’s advanced options.
There are several options to try out. Keep in mind that some of them have to be handled with care.
From CSS and JavaScript minification and concatenation, and LazyLoad for images, to database optimization, CDN settings, and passing through the additional one-click add-ons, WP Rocket is a unique caching plugin devoted to making your site faster and more powerful.
Try WP Rocket today. You have 14 days to test it so you can be sure it’s the best solution for your website’s performance. (We bet it is!)