All In One WordPress Optimization Guide With Cloudflare Integration

All In One WordPress Optimization Guide With Cloudflare Integration 2019

Updated On:

All In One WordPress Optimization Guide With Cloudflare Integration 2019 to speed up WordPress site and boost your website page speed loading time! All In One WordPress Optimization Guide With Cloudflare Integration is completely based on the best practices applicable for any WordPress websites, general HTML based websites and blogs, focusing mainly on WordPress Optimization for Images, WordPress Optimization for SEO, WordPress Optimization for Mobile Devices, along with different types of FREE WordPress Optimization Tools widely available throughout the internet, Correct Process of WordPress Optimization Test, some must have WordPress Optimization Checks, and tons of important WordPress Optimization Tips.

However the results about the speed of individual WordPress websites may vary from each other, but don’t worry, you will see the betterment of speed by the end of this article. Additionally, it’s a very good practice always to make a backup of your website before making any changes. I will discuss about the most important reasons why having a great page speed loading time on WordPress benefits your business and as well as users will not abandon your website, they will spend more time on your site.

Before we dig in, let us understand what are the factors which affects the loading speed of a website most and a general overview of the internet user statistics. Before we dig in, let us understand what are the factors which affects the loading speed of a website most and a general overview of the internet user statistics. The very first thing we should know that the internet users do not have a lot of patience and when it comes to page loading times. Like if we click on a link or input the URL and we wait a second, two, three and that’s it. The Google statistics show, that 50% of users expect a mobile site to load in 2 seconds and 53% users are likely to abandon the page, if it’s loading longer than 3 seconds. That’s a real short period, if you consider that the average loading time of a homepage, on a mobile device, is 19 seconds (on a 3G network). Loading times on desktops or computers are faster and an average loading time is 5 seconds, but that’s still too long.

Please Note: Results may vary and will vary from site to site, as each and every website is different in its own nature. Also, please keep backups before making any changes on your website. Strictly, DO NOT implement each and every setting blindly that you read in this article, have patience and test thoroughly each function. Website optimization is not a 15 min magic wand job, so read the article, and understand your requirement and employment settings accordingly.

All In One WordPress Optimization Guide Cloudflare Integration

Hey, if you don’t have a WordPress site, don’t leave the guide yet. The major speed optimization techniques explained in this step-by-step guide, can be applied to any type of website.

It’s true that loading times vary for a couple of reasons, for example, the visitor’s internet speed, visitor’s location and how “heavy” or bloated our website is. There is very little we can do about the visitor’s internet speed, but we can take care of other aspects and improve experience for everybody. In our guide, we will look at how to optimize our WordPress website for speed, to make it fast and lean, so let’s start then!

WordPress Optimization Guide With Cloudflare TOC

new_releases

The Ultimate WordPress Security Guide to enhance security of your WordPress Site. I bet this is something what you want most. No matter what you blog is about or how big or small, Security always come first and for all. Start digging right now!

The Base

When it concerns about your website’s speed as fast as possible, we need to build it on good groundworks or base. Just as you build a house, you don’t want to build it on quicksand and have problems right at the beginning. You want to build it on solid base, so it will last for a long time without any problems. The three most important things to check here are:

  • The Hosting
  • The WordPress Theme
  • The WordPress Plugins

WordPress Hosting

Selecting the right hosting is the key factor of your WordPress website and is therefore a crucial component, which should not be overlooked, even if you already have a hosting. Switching over to a better hosting provider will speed up your WordPress loading time for up to several seconds. Generally, with low prices, you get low performance and this is what we don’t want. So, let’s have a look at the hosting options available and explain what the differences are.

Shared Hosting

This is the most common hosting solution because it’s cheap. But as we mentioned, with low prices, you get lower performance. On a typical shared hosting, there are thousands of accounts on one physical server, which means that the server resources are shared between all websites created by these hosting accounts.

shared hosting

The server configuration of shared hosts is often very limited and you don’t have a lot of breathing room to configure as per your need. The server is preconfigured to specifically, usually very generic in settings, and it should run WordPress without a problem. Problems arise later when, like running out of memory or in a form of a restriction of PHP settings, that’s a plugin may need to function properly.

Although, as of writing this article, I am using Viewen’s completely free cloud web hosting!

Managed Hosting

Now this is a big upgrade from shared hosting, because your website gets a bigger space and more resources, but it costs more. On the managed hosting, the servers are less populated and that translates to more server resources for your site. These servers are typically optimized to run WordPress as smoothly as possible, they have more memory, processing power, better security and a caching system all in correct place.

managed hosting

The configuration and the hardware, software, installation of these managed hosting servers are done by the hosting company (hence the word “managed”). In a way this can be also called as pre configured but in this case, it’s optimized for the betterment of WordPress solely. Other services, like backups, load balancers, disaster recovery and security checks-ups, preventions, can also be a part of the managed hosting, depending on the offer of the hosting company.

VPS or Dedicated Servers

With dedicated servers, you have the complete control of the whole server with all its resources and with the VPS, you get a portion of the server because you are still sharing the physical server machine with others. When we say about page speed optimization for WordPress, there are no server-side limitations when you are setting up your WordPress on either VPS or dedicated server. You are aware that exactly how many resources there are available for your website and you can configure it to your liking. You can also implement cutting edge features and technologies before the standard hosting providers support them (which may lag years behind the server software technology).

VPS or Dedicated Servers

Now, both of these options offer maximum control and resources, but they also come at higher prices and demand more advanced technical skills to set them up and maintain in the long run. VPS or Dedicated servers can also be managed, so you don’t need to be a server administrator for that. They are mostly applicable for websites with high traffic volume.

If you are in two minds which hosting to go for, I would suggest the managed WordPress hosting option, which should also be able to scale (that is allocation of more resources from the server), whenever needed.

A basic free website optimization, that every decent hosting company offers by now, is to upgrade the PHP version to 7.x. Be sure that your WordPress site is running on PHP lower than 7, like 5.6 or even older, then please contact your hosting support and ask them to update it to the latest stable version ASAP. In case if they don’t have the option to use PHP 7. x, then I would recommend staying away from them. PHP 7 is, a great improvement when it comes to speed and performance and it’s very easy to switch to it, so take advantage of it.

Shared Hosting vs Dedicated Hosting vs Cloud Hosting

Always remember, a good hosting choice will save you a lot of pain down the road and if you do come across a problem, a good customer support should be able to help you out, so I would also tell you to keep in mind to choose a host that offers good support.

WordPress Theme

Okay, we need to choose a good WordPress theme for our site, we always start with the design of the theme and that’s OK. We should first look around a few themes that we like, because we want our site to be awesome and a great design is the first thing a visitor will see. The second thing is of course the functionality of the theme. Does your shortlisted theme or the theme recommended plugins offer the functionality that we need? If it does, nothing is better! We’re in business now boy! But what we almost always forget is to check how fast the theme loads and its overall performance.

You can test the loading time of the theme demos and we’ll quickly see, if the theme is optimized for speed or not. We can check with which page speed tools to use and how to use them in a section below, but for now, I just want you to know about this extra step of theme verification, before purchase. It is for sure, the loading time of the demo pages can probably be improved, so if you don’t get a perfect score, not to worry, no WordPress theme will get a perfect 100% score, except, if it has very little content on its demo page. As a golden rule, you should skip the themes that are not in the red figures (scores 50 or even lower on the page speed tools).

A fine balance between the theme design and functionalities vs. theme speed. For example, any empty WordPress theme with a bit of a text, will load very fast, but a bloated theme with a lot of functionality (most of which you might not need), with a lot of multimedia content, will load much slower. And pointing that part out is our goal, when selecting a good and a performant WordPress theme.

WordPress Plugins

You may ask me now “How many plugins are too many?”. It’s not an issue with the number of WordPress plugins, but in the code quality and impact the plugin has on the system. We may have 30 or even 60 plugins activated, with each plugins handling some specific functionality (with good code) and the site will run OK. But on the other hand, you have only 5 active plugins and one of them could be clogging your system, making your WordPress slow.

Going through the codes of each plugin is a good idea, but a very impractical one. It’s not possible for everyone and even a developer or programmer guy don’t have that much of time to spend there(well, if you want you can).

I always recommend just don’t install and activate any plugin you think you need.

First of all, think about it, does your site really need that extra functionality? For instance, if you need a button shortcode, check your theme documentation first, maybe the theme has a shortcode for it and you don’t need to install and activate a whole shortcode bundle plugin just for a single button shortcode. This is a very petty example, but I want you to think before installing and activating every new plugins. One single improper plugin is enough to make your site heavier and therefore slower, plus it could lead to a security breach, if the plugin is poorly coded or unmaintained. Even a tiny plugin adding just 1 line of code which can really matter!

One great thing you can count on, when selecting the plugins, is the vast global share and consequently a huge community of WordPress. Without proper coding knowledge, a good rule is to stick with the popular plugins with lots of active installs, good average rating score and positive reviews. Friends, this will make your selection a whole lot easier and secure!

WordPress Page Speed Optimization Steps

Okay, buckle up guys, take a backup of your WordPress site, before start the game. Better be safe than sorry!

Now, I would better warn you here not to expect the 100/100 score in the pagespeed tools. Running after the 100/100 score is not at all a good idea or even possible on some sites. It all depends on what kind of content your site is displayed and for what type of visitors. If your site has only a bit of text and an image, then sure, a perfect score is totally possible. But in case you have a long page, somewhat like this one, which you are reading right now, with a bit of multimedia content and other 3rd party app integrations, like code highlighter and so on, then the 100 score is not in your sights and you should also not pursue it.

Am I mad or what? Well, sounds like so, otherwise why it should not be a good idea to go for 100/100? Because, if you really follow the instructions of the page speed tools and optimize everything as they say, then your site might not function properly at all. If you begin to relocate all the render blocking JS and CSS files to the footer, then the CSS flashing would appear (unstyled contents would appear first and when the CSS would load, the site would “flash” into place! I hate that and I do not agree with The Giant Google!), the same will happen with JS codes, that may modify any DOM elements after the JS code would load.

Focus on the Page Load Time, Number of Requests, Size of the Page rather than the A, B, C, or 90/100 Score Cards.

Focus on GTMetrix Test

Focus on Pingdom Score

In this way you may break your site, if you start to follow the instructions blindly and keep optimizing your WordPress site for a better loading time, just to get the perfect score. The perfect pagespeed score is just a mere number, which absolutely doesn’t matter, if your visitors end up with a broken site. We need to search for the balance of page speed and user experience both.

It’s definitely good to see the higher Green Ranking Numbers, but DO NOT make them your goal.

Page Speed Tools

When it comes to Page Speed Optimization that can be really hard, but thankfully, we have the free online tools that make our lives easier and advise us what to do, in order to improve the speed of our websites.

The first and foremost rule of optimizing your WordPress for speed is this: Always Measure Before!

Run any one of the tools, that we will take a look at in the section below, after each optimization step and keep track of the improvements. This way you can understand, which tasks or tweak bring in the biggest improvements. You also need to run tests multiple times, to see the real average loading time as the simple logic is for the first visit by any tool or simple human operated computer or mobile is fetching the website with all of its resources needs to display. So the first run is never the result to set any conclusion.

new_releases

Wondering why your mails are going to Clients Spam folder! Setup SendGrid today with The Complete Step-By-Step Setup Guide and relax! All your mails will now deliver correctly right in your clients inbox!

The simple thing to understand for all of us that pages load differently, depending on where the hosting server is located. Like, my server is located in the North America and my visitor is from Asia, the page will load slower for him, than it would for a Mexican visitor. This can be fixed easily with a CDN (Content Delivery Network), but we will look at this a bit later on in the article. For now, I just want to say that, this issue is same for visitors across the world and also for page speed optimization tools. There are some tools which also allow you to perform the test from different locations, so you can see how that affects the loading time.

The page speed tools we will use are:

There are more other tools too, but these are the most popular, easy to understand and the best ones, so let’s stick with them.

Google PageSpeed Insights

As the title of this tool says, this is a Google’s product, so any other introduction is worthless. Just next to the score (see split into desktop and mobile) and the useful instructions on what to do to improve your page loading time, we can also draw a conclusion on what Google likes to see on a website. Which properties it wants to be optimized on a website to rank well in the search engine results similarly which they don’t want.

It will show, how good is your server response time, if any unoptimized images or resource files (JS or CSS) are present, it will generate a zip file with their optimized counterparts, which you can replace on your server. Let me tell you a secret here, I use this tool as me Image Optimizer, well sometimes! We will look at the image and code optimization later on, just for the sake of information know that Google PageSpeed can help you with that.

But Google PageSpeed Insights do not give you the detailed information, like other tools does, but it’s a good starting point, which covers all the important aspects of page speed optimization. It will list all the steps that will improve your site the most.

After running this tool on my site and I got a score of 90 for desktop and 80 for mobile, so there is room for improvement according to Google (but I don’t want that). The list of possible optimization suggestions includes:

  • Eliminate render-blocking JavaScript and CSS in above-the-fold content
  • Leverage browser caching

google speed pagespeed insights mobile

google speed pagespeed insights desktop

GTmetrix

GTmetrix shows a detailed and minute step by step information about which things are optimized and which are not. And each optimization detail is listed and rated on a scale from 0-100. The list is ordered by importance of the resources, so if you follow the optimization tasks from top to bottom and tune the ones that don’t have a 100% score, definitely you’ll be on a good path to speed up WordPress site as quickly as possible.

GTmetrix also generates scores using PageSpeed and YSlow test tools, for your page and displays the tasks that need to be improved. A solid feature is it’s Waterfall report, which will graphically represent how your site is loading and you can spot the bottlenecks faster. In the image below, you can see that my free shared hosting took 82ms to respond with the first information. That’s too lucrative, isn’t it?

GTMetrix Waterfall Report

It also offers different locations around the globe to test your site!

After running this tool on my site and I got PageSpeed score of 97 and a YSlow score of 77 (fair enough).

GTMetrix Results

  • Fully loaded time: 1.5s
  • Total page size: 1.28MB
  • Requests: 60

Though again I must mention, don’t just go by the big number score cards.

We will use the GTmetrix Tool for measuring our optimization progress in this guide, I like it!

Pingdom Website Speed Test

Pingdom, much like GTmetrix displays all the necessary optimization, data and information, but in a different way. You will get the same basic summary of data as on the GTmetrix tool (without the YSlow score). Now with Pingdom, we can test the page speed from 4 different locations around the globe and the results are all different for each location, which shows that server location is important, but we will be able to improve that as well (with Cloudflare CDN later on in the article).

Pingdom too shows important information in gist, like the content size or number of requests is made, filtered by the content type also buy domain and it also has a nice waterfall report.

After running this tool on my site and I got Performance Grade of 94 (Not bad).

Pingdom Results

  • Fully loaded time: 1.16s
  • Total page size: 1.4MB
  • Requests: 59

Web Page Test

WebPageTest tool has lots of configuration options than any of the previous tools. You can choose more locations, a specific internet speed can be selected, you are able to enable/disable a few browser options and you can test specific devices respectively.

It will show a detailed waterfall report with all information for each run (by default WebPageTest makes 3 runs, but you can change that in the settings) and it will show an A to F grade for each of these speed optimization factors:

  • First Byte Time (response time)
  • Keep-alive Enabled
  • Compress Transfer (gzip)
  • Compress Images
  • Cache Static Content
  • Effective use of CDN

You can dig the into details, by checking all result tabs, where you will find a lot of useful information. I use this tool when I need a detailed report or if I needed to test a location available on their site, otherwise I think the GTmetrix has more concise information.

WebPageSpeedTest Results

For the purpose of reference, those were the starting point results from the page speed tools we will be using for measuring our speed optimization progress.

Image Optimization

To be honest, this is the most ignored aspect of website performance and at the same time it can bring the biggest improvement to your site speed. If you never thought about optimizing the images before uploading to your WordPress site, then this is an imperative first step for your WordPress loading time optimization.

Uploading large and often over-sized, unoptimized images, used in a small place on your website are a big “NO and NEVER”. For example, if you have an image slot that will not be bigger than 600 x 400 px on your site and you upload a 1920 x 1080 px image (or even bigger!). Now, you think what may be the consequences and repeating this mistake a couple of times and your site will be a sloth.

The first thing is to resize the images to the specific and the proper size. On my site, the featured image slot will never be bigger than 755 x 378 px, so I resize the image to that size.

“Was that’s all, job done, right?” Nope, just 5% may be. We need to improve the images even further. There are a variety of tools, that optimize (compress) the image without losing its quality (not visible to human eyes). Those will also help drastically reduce the image file size, making it faster to load.

There are 2 ways of image compression, that can be done manually or with WordPress plugins.

Tiny Guide for Image Optimization

Choose the correct image format – the most popular image formats for online use are JPEG and PNG. You will save a lot on image file size, by selecting the correct image format. You should use:

  • The .jpg format for photos, images with gradients and images with millions of colors.
  • The .png format for images with limited colors (logos, complex graphics, other graphics) and images with transparency.

Resize your images – As I have already mentioned above, you should first resize images before uploading them to your WordPress site. Check how large is the container space where you will be using the image is and resize it accordingly. You can resize the images with an image editing software, like Photoshop or GIMP.

Compress your images – Now, this can be done easily with an online image compression tool or with a WordPress plugin:

Online compression tool: I recommend the Compressor Online Tool. Simply upload your image to the Compressor app and after processing download the optimized image, which you should then upload to your WordPress site. This sounds a bit tedious huh? yes this tool is best as when compared with TinyJPEG or TinyPNG, as the quality of compression is precisely perfect in our Compressor Tool, so of course there are bunch of WordPress plugins, which can simplify this process.

WP image compression plugin: Again, I tested the most popular image compression plugins and and found: ShortPixel Image Optimizer the best among the mob. After you install the plugin, you will have to request an API key in order to use the plugin (a very simple process). The default settings of the plugin are great, so you don’t need to set anything up, simply go to Media -> Bulk ShortPixel and click on the “Start Optimizing” button. All new uploaded images will also be optimized. Note: the free version of this plugin only allows 100 image optimizations/month, if you need more, you would have to switch to their paid plan.

Finally, I cannot recommend enough that you should use above mentioned plugins only, but there are many other like SmushIT and TP Image Optimizer. Personally I don’t use any image optimizer plugin as it will add some extra JS and CSS, which I don’t want, again on the other-hand I find Compressor tool best for image optimization, I have carefully tested that it may increase a 1 or 2 kb for the image quality if needed. Very intelligently coded. Choice is always yours.

ShortPixel Bulk Process

Use Cloudinary CDN for Image and Video Upload, Storage, Manipulation, Optimization and Digital Asset Management

Images and videos are common things we need for every blog, but most of the time we cannot store all of them on our shared or managed servers, which naturally has disk space limitations. Even on unlimited disk space storing and serving images is not at all a good idea. In that case we can use Free image and Video CDNs. In my case I use Cloudinary Free Plan, which is more than enough for me and that is applicable to many other bloggers as well. There are other similar CDN’s with free plan, but I recommend Cloudinary as I found their support for free accounts is too awesome! On the other hand your site will be more faster as the global Cloudinary CDN will take care of your all assets store with them. This will additionally boost your SEO scores too.

The main features of Cloudinary are:

  • Image Manipulation
  • Image Optimization
  • Video Transcoding
  • Responsive Images
  • Fast Delivery
  • File Upload
  • Cloud Storage
  • Asset Administration

Cloudinary CDN for Image and Video Upload Storage Manipulation Optimization and Digital Asset Management

Another cool feature about Cloudinary that I found, is, they increased my free limits just by sharing on my social network! Well, are they asking too much? Naah… That is awesome man! What’s more you expect? Just see the image above. I use only the featured image from my hosting, and all other images, like in page images, that you are watching right now, are all on Cloudinary. This way I am saving my hosting bandwidth and space too.

Google PageSpeed Optimized Images

This is a real funny alternative way on how to optimize your existing images on your WordPress site. If you followed the steps above as I mentioned, in the Tiny Guide in Image Optimization section, then you have probably already optimized images and therefore Google PageSpeed will not show any images for you. Good job! You can still read this section for informational purpose only.

new_releases

Take a look on 14 Best WordPress Page Builder That Cut Out Coding. Sounds interesting, huh? No need to learn coding and all technicalities. Just start and put your blog live in minutes!

Remember, I mentioned in the Google PageSpeed tool introduction section, that Google generates a zip file with optimized files you can use on your site. Yes, I make Google to work for me like this way sometimes. You can download the zip file, by clicking on that link below:

PageSpeed Insights download images

You see in that zip file, you have a folder called image, which has the Google optimized images. You can upload them via FTP or your hosting file uploader. Simply replace or overwrite the images in the correct uploads folders (…/wp-content/uploads/…). After that, all you need to generate the smaller versions (thumbnails) of these images in your WordPress site. You can do that with the Regenerate Thumbnails plugin. For my site, I do these optimizations manually, as I already told, that too much plugin is what we don’t want. Yes, you can say it will take time, true, but hardly 15 mins, well, if you really love your site that time is nothing. Again the choice is always yours.

Other Image Improvements

Well, here we’ll look at some further improvements about the images, that we can take advantage of, to squeeze some extra performance.

Lazy Loading Images

Lazy Loading is a prevalent technique for loading images, where images are loaded asynchronously or load as you scroll down. The images which are not visible at the time of loading the page or above-the-fold do not load on page load (they are loaded after or even only when they’re needed). This means, that only those images which can be seen at the top of the page are loaded, while other images (not seen) are loaded after the page loads or as the user scrolls down the page (on demand). If you have a long page with many images similar to this one you are reading now, you can save a lot of initial page load time with this technique. Though personally I don’t like this feature and I don’t use it.

Lazy loading can be implemented simply with a WP plugin. We will use the WP Rocket caching plugin later on and it has a lazy load feature as well.

Please Note: Results may vary and will vary from site to site, as each and every website is different in its own nature. Also, please keep backups before making any changes on your website. Strictly, DO NOT implement each and every setting blindly that you read in this article, have patience and test thoroughly each function. Website optimization is not a 15 min magic wand job, so read the article, and understand your requirement and employment settings accordingly.

Image Hotlinking

Now, what is hotlinking? It’ is showing an image that is hosted on another server. For example, if you have some very popular posts with nice images. A visitor (or thief) might simply link the image source URL and use it on his own site. That means, the images on your site will be requested and served from your server. Now, if you multiply the thief by a 100 and you have thousands of external requests that your server has to respond to, which results a sure slow down of your server.

Well, this is not a part of direct page speed optimization, but rather a server optimization. But you should solve the hotlinking issue with some code in the .htaccess file. This will disable the image on their websites:

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www.)?your-website.com [NC]
RewriteRule .(jpg|jpeg|png|gif)$ - [NC,F,L]

This is an advanced step, so I do NOT recommend this for everyone. Most of the security plugins have this feature inbuilt, like in All In One WP Security and Firewall Plugin. So don’t worry if you are in double mind, just use that plugin feature and all will be well. There is a same option too in Cloudflare for preventing hotlinking.

Browser Caching

Whenever any user or visitor visits your site via a browser, that needs to download all resources (HTML, images, JS, CSS, etc.) from your server in order to display your site to the visitor. When that same visitor visits any of the other pages on your website again in that session, the CSS and JS files usually stay the same, but the browser might still download all of them again from your server, if you don’t have a proper server configuration.

By adding right caching headers and expiration dates on your server, to allow static resources (JS, CSS and other files) to be stored in the browser’s cache. This will immensely improve the performance for returning visitors or for visitors who look at more than one page on your site.

Generally, the hosting servers have that pre-configured. If you see page speed optimization tools report that you are missing the “Leverage browser caching” optimization or something like that, then it’s best getting in touch with your hosting provider and ask them to set-up browser caching for your site. They will surely be able to sort it out or at least point you in the right direction on how to do that yourself.

My free hosting with Viewen already has browser caching already configured, so there is nothing for me to do on my site.

Resource Compression (Gzip or Deflate)

When the files are sent from your server (HTML, JS, CSS, etc.) to your visitor’s browser, they can be compressed, so that they can be transferred faster, which improves your page speed. This is possible by enabling Gzip or Deflate compression on your server.

You may get in touch with your hosting provider support and ask them, if they can enable resource compression for your site or you can configure it yourself, but be sure you know which server type your hosting provider is using. Again, don’t worry, we will do that with WP Rocket easily, well, nothing to do in that section actually. WP Rocket by default enables Gzip Compression once it’s activated.

Remove Unneeded Codes

This is another very important step that many of us are not aware of. Do you know that how many extra meta tags are added to your WordPress site automatically? Even if you don’t need them, they will be there always, and as you have already understood that even a single 1 line of code can hamper the speed factor. Also, on the other hand, some of these meta tags or hint, can be a cause of the potential security threat for your site without your knowledge. Don’t worry, we have a perfect solution for this.

The WP Hide & Security Enhancer Plugin is the perfect solution for this job to be done. Simply install and activate the plugin and remove the default WordPress features you don’t want on your site. For example, I don’t use RSS feeds, and many other functionalities, so I disable the feature. Therefore, accordingly you need, you can refine your settings. Another great feature of this plugin is to hide or rename your theme and plugin details, even the WordPress Theme Detector App cannot detect if you implement this correctly, but I won’t say this is mandatory. Focus on the unneeded codes. Please note that this is an advanced step so just DON’T enable everything blindly.

Main plugin functionality:

  • Custom Admin Url (Don’t enable if you are using All In One WP Security & Firewall or any other security plugin with the same feature enabled).
  • Block default admin Url (Don’t enable if you are using All In One WP Security & Firewall or any other security plugin with the same feature enabled).
  • Block any direct folder access to completely hide the structure (Don’t enable if you are using All In One WP Security & Firewall or any other security plugin with the same feature enabled).
  • Custom wp-login.php filename (Don’t enable if you are using All In One WP Security & Firewall or any other security plugin with the same feature enabled).
  • Block default wp-login.php (Don’t enable if you are using All In One WP Security & Firewall or any other security plugin with the same feature enabled).
  • Block default wp-signup.php (Don’t enable if you are using All In One WP Security & Firewall or any other security plugin with the same feature enabled).
  • Block XML-RPC API
  • New XML-RPC path
  • Adjustable theme url
  • New child Theme url
  • Change theme style file name
  • Clean any headers for theme style file
  • Custom wp-include (Don’t enable if you are using All In One WP Security & Firewall or any other security plugin with the same feature enabled).
  • Block default wp-include paths (Don’t enable if you are using All In One WP Security & Firewall or any other security plugin with the same feature enabled).
  • Block default wp-content (Don’t enable if you are using All In One WP Security & Firewall or any other security plugin with the same feature enabled).
  • Custom plugins urls
  • Individual plugin url change
  • Block default plugins paths (Don’t enable if you are using All In One WP Security & Firewall or any other security plugin with the same feature enabled).
  • New upload url (Don’t enable if you are using All In One WP Security & Firewall or any other security plugin with the same feature enabled).
  • Block default upload urls (Don’t enable if you are using All In One WP Security & Firewall or any other security plugin with the same feature enabled).
  • Remove wordpress version
  • Meta Generator block
  • Disable the emoji and required javascript code
  • Remove pingback tag
  • Remove wlwmanifest Meta
  • Remove rsd_link Meta
  • Remove wpemoji
  • Minify Html, Css, JavaScript (Don’t enable if you are using WP Rocket or any other caching plugin with the same feature enabled).

WP Hide & Security Enhancer Plugin Settings

Check your site every-time you enable 1 functionality and see that everything is OK. Otherwise, disable that functionality, it won’t hurt the performance that much.

Remove Unneeded JS or CSS files

Everyone of us uses many plugins, which by default includes JS or CSS files on all your pages and you actually are not using the plugin features on those pages, then it’s best to remove them. You can do this with some custom codes in your child theme, but I would strongly recommend that you use a plugin for that. It’s much easier, and safer!

We will use the WP Asset CleanUp Plugin to manage that job easily. After you have installed and activated the plugin, go and edit your home page because home pages are generally the “heavier” pages, so we will look at it for our example, but you can do that for other pages as well.

Below the page content editor, you will see a section called WP Asset CleanUp. In this section you will see the list all CSS and JS files that are included on your front page. Now, your job is to find the odd man out, means those files are not needed on your Home Page.

WP assets clean up screenshot of the home page

For an example, in my site, I am using the Contact Form 7 plugin, but I am only using the contact form on my “Contact” page, so we can safely remove (unload) its CSS and JS files from our home page. You can look at each asset in the list and check, if it is possible to unload. But be very careful for the files with the red exclamation icon, you should never unload those files, as they are core WordPress files and they are needed for the site to work properly. For the cause of example, I installed the plugin to show you, otherwise, I do not use this plugin. As it doesn’t make any change to my site, but it may work on your site, so do test it.

Render-blocking JavaScript and CSS in above-the-fold content

About this particular optimization that Google PageSpeed Insights suggests is : “Eliminate render-blocking JavaScript and CSS in above-the-fold content”. This is a really tricky one. Remember when I said, that it’s not good to run for a perfect score in the page speed tools? It’s one of the reasons for that.

PageSpeed eliminate render blocking

I might not respect Google suggestion and simply ignore it. As I really don’t like to see a skeleton of a website loading before my eyes and then the whole site loads. It’s just not for me, but I don’t want any other website to look in this way. Trust me, if your site is fast enough from all other aspects, then just forget it! “Google is not the Internet“.

“But why would you disrespect Google? How dare you!” Well, this is only a tool and it gives you suggestions on what to do, but it does not know, if implemented some of these changes will break your site or ruin a good user experience (UX) for your visitors. For example, if the tools had suggested that we load the style.css file with all the theme styles asynchronously, then it would have created the FOUC: Flash of unstyled content.

This is a very bad UX/UI practice, so I would ignore the suggestion from the tool and keep a good UX instead of improving our score. After all, Google is also using other factors, it can gather from your website to rank it in the search results and user experience is one of them. When optimizing the website for speed, NEVER follow the recommendations blindly and forget about all the other aspects and goals your WordPress website has!

For the sake of the record, we will have a look at how to load files asynchronously in the WP Rocket plugin section below since the WP Rocket has it build in, we don’t need any other plugins. It’s for only them who really wants to run for the scorecard.

Server Side Caching

As we have already spoken about browser caching, now we also have to take care of the server side cache. To understand what is server side caching we have to know the basics of how WordPress works, so let’s have a look first.

When any visitor opens a WordPress website page, the following things happen (basic explanation):

  1. Server receives a page request.
  2. WordPress PHP code begins to execute the request.
  3. WordPress access the database to get the information it needs to build the requested page.
  4. WordPress creates the HTML file.
  5. Server responds with the HTML for the browser to display it to the visitor.

So, these 5 steps need to be repeated for each page view and for each visitor. Now, that’s really a hell lot of repetitive work for the content while it stays the same for each visitor (if your site is displaying mostly static content, which majority of websites is).

The server side caching eliminates pretty much most of the server’s hard work as it removes the need for repeating steps 2,3 and 4. Once we set turn on server side caching, the whole process of a page request looks like this:

  1. Server receives a page request.
  2. Server retrieves the page HTML from the cache (provided a cached version is available).
  3. Server responds with the HTML for the browser to display it to the visitor.

Here we see that the execution of the WordPress code and accessing the database is bypassed, which eventually decreases the page loading time.

All of us has seen the Google PageSpeed Insights tool suggestions, saying “Reduce server response time”. The Insights tool shows that the server responded in 0.98 seconds, which is not good. We’ll work on that to shorten it with server side caching.

Each cached page is generally saved with an expiration time of 24 hours, but that setting can be changed to any number. Which means that instead of working on hundreds of page requests on the whole WordPress HTML creation, processing, it will only run once a day and to generate that cached page and the server will serve that cached page to other visitors. Therefore, not only the page speed will be faster, but the server will also have much less load.

When you are updating an existing page in WordPress and an old cached version of the page is still available on your server, then either you would have to clear that cache manually (generally with the click of a button) or some tools would do that for you automatically. WP Rocket provides both of the options by default, so we will see that in the next sections.

new_releases

Get Free Cloud Web Hosting today. Viewen is the only one of it’s kind in this fast competitive market who provides true “Best Free Cloud Web Hosting and Application Hosting with 100% original cPanel, SSL, Softaculous, PHP, MySQL, Full HTTP/2.0, ALPN Support, Instant Support and NO ADS.”

Many hosting providers already have a server side caching in place for their users, but this feature is usually available for managed WordPress hosting packages. So, it’s better that before you start to follow the instructions below, on how to set up server side caching, you need to make sure that your server have it set up for you.

Finally, now we will start looking at the much awaited WP Rocket and it’s settings on how to set up the WP Rocket plugin to enable server side caching and it’s other features that it has (like lazy loading images, loading assets asynchronously, minification of JS and CSS files and much more). It’s true that WP Rocket is a premium plugin (paid), but I believe it’s worth the investment. But hey! Don’t worry, WP Fastest Cache is a good free alternative, but it does not have all features as WP Rocket.

WP Rocket (Server Side Caching Plugin)

The best thing about WP Rocket Plugin is it will have some basic features enabled as soon as we install and activate the plugin:

  • Page Caching: Page Caching creates an ultra-fast load time, essential for improving Search Engine Optimization and increasing conversions. When you turn on WP Rocket, page caching is immediately activated.
  • GZIP compression: Enabled automatically when you activate the plugin and decreases bandwidth usage with it’s GZIP compression.
  • Cache Preloading: As WP Rocket’s crawler simulates a visit to preload the cache, the indexing of your website by search engines is instantly improved.
  • Static Files Compression: WP Rocket reduces the weight of your HTML, JavaScript and CSS files through minification. Lighter files means faster load time!
  • Management of the headers (expires, etags, etc.).

The WP Rocket Plugin default settings are also very good to give it a start!

So, let’s have a look at the settings WP Rocket plugin has to offer. WP Rocket has a cool menu in your top WP admin menu bar. From there, you can directly access the WP Rocket’s settings page, clear the cache, preload the cache, clear Cloudflare cache (if your site is on Cloudflare), Purge OPCache (if your hosting has enabled this feature) and access other useful information regarding this plugin.

A word of caution that enabling each and every WP Rocket setting might have different results or even negative effects on your WordPress speed and the UI also, therefore depending on which theme you are using or plugins you are using, so just enabling all WP Rocket settings is NOT at all recommended. You have to test each and every setting, that if all things are okay on the front-end UI part and also measure it with pagespeed tools, to see the difference.

Eventually we may also see some of the settings will not improve our page speed, therefore we will not be using them. I am afraid to say, but let’s be honest that there is absolutely NO shortcut to this whole process. Every single website has it’s own theme and set of plugins, so we have to go through a multiple number of A/B testing to get the best settings for our websites. For my site I have only a handful of settings enabled as the rest was already optimized or doesn’t need any extra fabrication. One simple thing we must keep in mind while working with caching plugins that turning ON each and every setting will NEVER speed up any website, rather it may break the whole website. So be patient and have a cup of hot chocolate or coffee and take tours of the whole process.

Clear Cache

Server side caching will automatically start working once you activate the WP Rocket plugin, so let’s look at how we can clear it. You can manually clear cache, if you click on the menu item “Clear cache” in the WP Rocket top admin bar shortcut menu. The plugin will be clearing the cache automatically, when you update customizer settings, change/update widgets, categories, etc. and it will partially clear cache when you update a page. For more information on when the automatic cache clearing will occur, please refer to this WP Rocket question.

The cache has a lifespan that can be set in the “Basic” tab of the WP Rocket settings. I recommend setting this to 1 day or 24 hour.

WP Rocket cache lifespan setting

Preload Cache

A unique feature of the WP Rocket is “Preload cache”, which will preload the cache of your home page and the pages that it links to, so your users will always get a cached version of the page.

You will find the preload cache settings in the settings page under the “Preload” tab. Look for the “Preload bot” option, there you will find a manual and an automatic option. If you enable the automatic bot option, the preload cache will run every time you update or create a page or if the cache expires. This option can influence the performance of your server so keep an eye on the performance logs if you enable it. If you are updating and creating a lot of posts or pages and you have a shared hosting, I would advise you to not enable this option. You should enable just the manual bot option instead, which will create another WP Rocket shortcut menu item, titled “Preload Cache” and it will preload the cache only when you click on it (after you are done editing posts and pages).

In the “Preload” settings tab, you will also find settings to preload the cache from a sitemap, so you can define a sitemap and it will use the URLs in the sitemap to preload the cache for those pages. By default WP Rocket detects and enables sitemap based peloading for Yoast SEO XML sitemaps.

LazyLoad

We have already seen how lazy loading images work in the image optimization section of this article, but now that we have WP Rocket installed, we can actually enable this feature. Simply go to the “Basic” tab of the WP Rocket settings and enable the Lazy Load for images and if you are using any videos or iframes, then you can enable that as well.

WP Rocket lazy load images settings

Once you have, you enabled this feature, you must check your site and see how the images load. The lazy Load script might also break your site layout or you might not like how the images are loaded (content jumping), so always check your pages. The feature is quite handy, especially when you have a lot of images below-the-fold and it will help you to reduce the number of initial image requests on the original page load. But, somehow I don’t like the jumping loading pages and it really don’t go with my theme design so I don’t use it. You can use it, but test thoroughly.

Minify Files

GTMetrix gives us continuous suggestions that we can still improve are to minify HTML, CSS and JS files. But as our WordPress theme and the majority of recommended plugins are already using minified versions for the JS/CSS files and we have Gzip enabled on our server, we really don’t have much to do here. Go to the “Static Files” tab in the WP Rocket settings and check all 3 options under the Minify files option. Save the settings and go check your website in an incognito/private tab, see if any issues that these options might bring to your site.

On my website, the JS minification breaks some functionalities, so I had to disable the JS minify file option. The HTML and CSS options worked OK. But don’t come to a conclusion of this as it is a very normal thing, as I have said before all options are not needed. Eventually, as my website is on Cloudflare, so the minification feature from the Cloudflare option is turned on and my purpose is solved. We just need to figure out, which options, or the combination of settings and how they can improve our site is the key factor of website optimization. And this will be different for each and every website, so again, have patience.

Varnish Cache is a web application accelerator also known as a caching HTTP reverse proxy. You need to install it in front of any server that speaks HTTP and configure it to cache the contents. Varnish Cache is really, really fast. It typically speeds up delivery with a factor of 300 – 1000x, depending on your servers architecture.

Varnish performs really, really well. It is usually bound by the speed of the network, effectively the turning performance into a non-issue.

If Varnish is configured at our hosting end then you will probably know that. If you are not sure you can always ask your host for it. If they have Varnish enable on their server you may then enable the Varnish cache clear option in WP Rocket settings, and that’s all. Nothing more you need to do with it. WP Rocket will take care of the rest. It has nothing to do on the website front-end part, so no need to worry about that.

Combine JS and CSS files

Now before we start with this section, we need to keep in mind that HTTP/2 was already prevalent and many hosting providers have implemented it on their server, so combining all the CSS and JS files are not at all needed. Even if your hosting doesn’t have HTTP/2 enabled or you don’t know then simply check your site with this free tool by KeyCDN’s HTTP/2 Test and Verify HTTP/2.0 Support. It’s really funny and unfortunate that most of the website speed test tools like Pingdom, GTMetrix haven’t upgraded the tools to detect and show in the result. In that place they continue to show that you have this much of the files to be merged into a single one. Ridiculous!

If you see your site or the server is supporting HTTP/2 then leave this option, also if your site runs with Cloudflare, then also you have HTTP/2 enabled by Cloudflare by default.

We all see in GTMetrix YSlow tab is telling us to “Make fewer HTTP requests”. It says that our WordPress is using 9 external JS scripts and that we should try to combine them into 1 and that the page is using 4 external CSS files and we should try to combine them into 1 file as well. So, by now you understand these online tools are not at all perfect to measure the page speed. They merely give us an overview and nothing else.

Combining all JS and CSS files in one file is not a good idea at all, especially when it comes to JS files, because browsers can download 6 smaller files in parallel, faster than 1-2 large files. It will be very good if you leave the JS files as is, otherwise your site will get an obvious error and broken. So, test thoroughly. I don’t combine my JS files, as my site breaks with that.

Still, if want to combine files with WP Rocket, go to the “Static files” tab in the plugin settings and enable the options under Combine files. As always, verify your site in an incognito/private browser tab to check for any issues.

A Varnish configured server may have some issue mentioned above, so enable/disable JS combine files options accordingly.

Remove query strings from static resources

Removing query strings from static resources, will add lil bit speed, so it should be done.

Query strings in a static resource (usually JS or CSS file) is a URL attribute, which marks the version of the said file. It looks like this: ?ver=5.5.9 and it’s appended at the end of the URL: https://domain.com/css/somestylesheet.css?ver=5.5.9

So, with WP Rocket we can remove these query strings. Just go to the “Static files” tab of the plugin settings and enable the Remove query strings option.

Render-blocking CSS/JS

Now, as we have already discussed it before, the only Google PageSpeed Insights tool suggestion left is “Eliminate render-blocking JavaScript and CSS in above-the-fold content”. This means that there are some JS or CSS files blocking the loading of the page in the above-the-fold content. Google PageSpeed Insights tool wants us to do, is to defer or asynchronously load these blocking resources.

Once again, simply go to the “Static files” tab and look for the Render-blocking CSS/JS options. There you can enable the JS options that can solve this issue. And enabling Optimize CSS Delivery option which eliminates the render-blocking CSS on your website for faster perceived load times. Once you enable the JS option, a Safe mode (recommended) option will appear. This safe mode will load the jQuery library (WP default enqueued library) in the head of the page, leaving it as a blocking file, but it will not break any pages that have an inline jQuery code on the page. Since jQuery is still loaded in the head, the PageSpeed tool is still complaining that we have a render-blocking JS file.

So, now Google PageSpeed tool gives us a perfect score, 100 on mobile and 100 on the desktop. Great, right? Not really! Our website will show a skeleton of the page at the beginning, with a God knows impression on the visitors mind!

The Critical Path CSS or Optimize CSS delivery option to fix the Flash of unstyled content (FOUC) can be fixed by using WP Rocket settings (just above the render-blocking JS option). The logic behind is, that you could add the CSS code needed for the above-the-fold part of the page, so that this flash effect of unstyled text would not appear on page load. This is pathetically harder than it sounds and definitely not for any normal user. There are tools that are supposed to generate this critical CSS for you, but trust me, I did not have much success with them.

To generate the Critical Path CSS or Optimize CSS delivery code, just enable the Optimize CSS delivery option just above the defer JS files settings and WP Rocket will generate the CSS automatically.

So, if you like to show a skeleton to your visitors or if you want to please Google, then please go on, and ignore my words. I prefer my site bit slow and going against Google monopoly.

All in all, now we are almost at the end of our optimization steps. The only thing, or the major is left, is how to use a CDN for our website assets.

Content Delivery Network (CDN)

We have been talking over, about CDN’s quite a few times in this article, that page loading time differs, depending on the location of the server and the location of the visitor. For example, my free hosting server that I am using for my website, is located in Houston, Texas (USA). Now any visitor from the USA or Canada will definitely get a faster loading time than a user accessing my site Sri Lanka. It’s a simple logic as the request made from the USA or Canada is definitely closer to my server, whereas Sri Lanka is just on the opposite side of the world map. This is the reason we need a CDN will to help us reduce those loading times. And that’s for absolutely free!

A CDN is a basically globally distributed network of server proxies and respective continent or country wide data centers. The primary goal of any CDN is to deliver your site’s content to your visitors from a server closest to the visitor. That means, your websites, static contents such as images, JS, CSS, etc. will be provided by the CDN servers, which are spread around the globe, making your site faster to load for everybody.

How CDN Works

Utilizing a CDN for WordPress has a multitude of benefits including:

  • Decreasing latency, which is the time and or delay the distance has to travel.
  • Reduces time to first byte (TTFB), which is a measurement of how long the browser has to wait before receiving its first byte of data from the server.
  • Serves content the from cache for faster page load times and less strain on your hosting (origin) server.
  • Utilizes HTTP/2 over secure connections to take advantage of multiplexing, parallelism, server push, and HPACK compression.
  • Compresses data with GZIP or Brotli to ensure smaller HTML, stylesheets, and JavaScript files.

Apart from the content delivery system, CDN’s offer a bunch of multiple useful features, especially in the security section. They usually provide DDoS protection, bot detection, prevention and so on.

So, we will now focus on the most popular amongst the CDNs, it’s Cloudflare. They not only offer a free package, which includes the use of their global CDN and that’s what we need, but they also provide unmetered bandwidth with Unmetered Mitigation of DDoS attacks with many other features. Below is the process for how Cloudflare works and protect our websites as well.

How Cloudflare Works

Cloudflare Integration

Simply go to cloudflare.com and sign up for a new free account! Yes completely free! After you have create your free account, you will have to set-up your website on Cloudflare, in order for it to serve your static content (assets).

After you have logged in to your new Cloudflare account, you will be asked to add your website (domain) in order to automatically retrieve the DNS records. Don’t worry you or your visitors won’t experience any downtime.

Cloudflare step 1

Simply type in your domain and click on “Begin Scan”. You just need to input only the root domain: yourdomain.com (means, without http or https). Scanning the DNS takes about a minute to complete. Once the scanning is done, you can click on the “Continue” button.

Now, in this step, you will see all your DNS records that Cloudflare could find from your domain are listed down. Here you might need to add any records that might be missing, so go through the list and check thoroughly, if something is missing. As you can see in the screenshot below, I’ve enabled Cloudflare for my main domain only (the orange cloud). That means, only my root domain, the traffic will be handled and protected by Cloudflare. If you have any subdomain then the same thing should be done, and the rest of the DNS should be a gray cloud, which means those needs to be bypass the Cloudflare proxy caching.

Cloudflare step 2

Once you are done with the DNS records, you may continue to the next step, where you need to select the “Free Website” plan and continue on.

Cloudflare step 3

The final step to enable the Cloudflare for your website, is to login to your domain registrar’s dashboard (from where you bought your domain) and change the nameservers for your domain. It’s said, that it can take up to 48 hours for the new nameservers to take effect, but in my case, it was updated almost instantly, with 2/3 mins.

Once the nameservers are updated for your site, you will see the status of your Cloudflare website change to “active” mode.

Cloudflare active mode

I’ve modified some of the Cloudflare settings in the dashboard as per my requirement, amongst them, I changed was the security level. Go to the Firewall tab and adjust the “Security Level” to Medium. That’s because I want my visitors to land on a secure page. One more important tip I will share regarding Cloudflare Static Content caching with you, but let’s complete the Cloudflare settings in WP Rocket as well.

So, we have set up the Cloudflare side, we should also enable the Cloudflare settings on our WP Rocket plugin.

Login to your WordPress admin dashboard and go to the WP Rocket plugin settings. Navigate to the “Add-Ons” tab, and simply enable Cloudflare add-on and save the settings. This will enable a new “Cloudflare” tab in the WP Rocket settings and you should open it. You need to input the Cloudflare account email, the Zone ID and your Cloudflare global API key from Cloudflare dashboard. To retrieve the global API key, go to Cloudflare dashboard (overview tab) and click on the “Get your API key” link. You will see a section “API key” on this new page and you should click on the “View API key” button for the “Global API Key” row. Once you paste in the global API key into the WP Rocket settings. Here I won’t suggest enabling the “Optimal settings” option in WP Rocket because we will be making some advanced settings later in the Page Rule section, so leave that as is. Save the settings and then click on the “Clear Cloudflare Cache” button, just to verify that everything is working OK.

WP Rocket Cloudflare Settings

Set Up Cloudflare Page Rules

As I mentioned before that we will create some advanced settings within Cloudflare Page Rules section. But first, let us understand why we should use page rules and what are page rules. Well, in order to understand that, we need to know that Cloudflare caches all general files, like CSS, JS, JPG, PNG, etc., but, you should know this clearly, that Cloudflare never caches static HTML files by default. This is where we need to work one and focus. Many of us often say, my site is on Cloudflare but still why the page speed is not improving?

My friend the answer is here, as whenever a request is sent to any page to load, all resources are provided by the Cloudflare Edge Servers, except the static HTML files. So, the request is going direct to the Mother Server every time to fetch the static HTML generated by WP Rocket or any other caching plugin. So, logically it’s clear that even using a CDN your site is not fast enough. This is where we need to implement the rules page. Remember that we have only 3 FREE Page Rules to use. Read this link about the Static Content caching done by Cloudflare by default. Also, you need to read this article how should we then make the static HTML file caching on the Cloudflare’s Edge Servers. Page rules in Cloudflare are something like we write directives on our .htaccess file, but here in a different way. Only one page rule will get fired at one time, so we need to arrange our settings to that pattern.

So how do we make it all work? Carefully see in the image below, how I am using the page rule settings for my website. Now, be very careful. DO NOT copy or implement things blindly, otherwise, your website might break anytime.

Cloudflare Page Rules

As you can see above I have set up the my page rules in the following pattern to get fired serially.

  1. First I have excluded caching for my special login url. As I don’t want that to be cached.
  2. Secondly, I have made the whole “wp-admin” get excluded, which all of us need to do, as we cannot work if the admin area get’s cached.
  3. Lastly, I have made everything cached on the edge server, which automatically includes the static HTML files.

Now, it’s very important for you to understand that the above settings are only for my website (also most blogs will work fine with these settings), as there is no dynamic contents to be served. In case you have something like e-commerce website or similar kind of functionalities then those settings are not for you. You will need more page rule to refine your settings. Remember that you need to clear the cache every-time you make any changes for an image, any text, even any plugin updates, as we have separated the our website in two different parts. You can simply do that within the admin area by just clearing Cloudflare cache from the top admin menu of WP Rocket, or you can also do it from the Cloudflare dashboard, go to cache tab and click “Purge Everything” option. If you want to purge a single file, then you can do that also, but you need to be very specific about the url which you want to purge.

The Edge Server will only work when you choose “cache everything” in the caching level through page rules.

Okay, now we have improved our website performance in every way possible. The website loads faster, it takes less requests to display your site to the user, it takes less bandwidth and it loads fast for visitors across the world as well. At the same time, we kept all functionality and styling of our website as it was at the beginning. Awesome! Test your site again now, and see the difference!

Please Note: Results may vary and will vary from site to site, as each and every website is different in its own nature. Also, please keep backups before making any changes on your website. Strictly, DO NOT implement each and every setting blindly that you read in this article, have patience and test thoroughly each function. Website optimization is not a 15 min magic wand job, so read the article, and understand your requirement and employment settings accordingly.

Conclusion

So, in our All In One WordPress Optimization Guide With Cloudflare Integration article, we have focused over the most important and common steps you can undertake to drastically improve your website performance. Following the advice and recommendations in this article will definitely make your site lean and fast, which will surely improve your page load time and therefore resulting in a much better user experience. The improvements we discussed here might also bring in more money and help you save it some of the server costs, so it’s a win-win for everyone! I have tried to cover everything with the free plugins and Web Apps, except WP Rocket, so that it will be easier for everyone to work with.

Now, on a more personal note to conclude this article by saying, that speed is not everything, it’s another aspect of a website perplex. We should focus more while building websites for humans, potential clients, and not to please any search engine or a bot, so always have that in mind. A fine balance between content, multimedia, design, user experience and page speed. Never get obsessed about page speed and page speed tool scores. As long as you are improving your visitors experience, your goal will be achieved.

If by chance I have missed any of the site optimization steps, that you think can bring a vital improvement to the page load time? Tell me in the comments below frankly!

In the event that you discover my article helpful and you took over its means, if you don’t mind tell me in the comments below, what sort of improvements you have accomplished.

Previous Post
The Ultimate WordPress Security Guide 2019 (Stay Secure Online)
Next Post
14 Best WordPress Page Builder Plugin That Cut Out Coding 2019

Related Posts

6 Comments. Leave new

  • WP-Smush and WP Rocket are the top plugins that I suggest everyone to use. WP Rocket makes things easier for non techies and WP Smush has been excellent since ages.

    Reply
    • Rahul Mukherjee
      June 23, 2018 2:56 PM

      Hi Joy,

      Thanks for your input. Well, it’s true enough what you have mentioned about WPMU SmushIt, I have mentioned about it in the article already, hope you have read it. As I have mentioned about ShortPixel Image Optimizer Plugin, I found a little bit more precise for compression quality while testing with SmushIt alongside. But, as I say, it’s absolutely about on your choice. As a matter of fact, I don’t even use any image optimizer plugin as mentioned in my article. That gives me more precise control on my images and no extra scripts on my site. But this process may not be suitable for everyone, so one can use whatever they want to use. I said about my experience and recommendations. Thank you once again!

      Reply
  • I’m using Cloudflare but email not working after using Cloudflare.

    Reply
    • Hi there, you must check your Cloudflare DNS settings, the CNAME and other entries regarding your mail server should be “By-Passed”, that means they will not be processed through Cloudflare proxy. Check that those settings are in GRAY Cloud Icon and NOT orange Cloud. If those DNS are not on Cloudflare then you need to manually add them, just copy them from your cPanel Zone Editor and bypass Cloudflare, i.e. gray cloud. Hope this will solve your problem. Let me know, if it’s not working, so that we can solve it. Thanks.

      Reply
  • Hello sir! It’s really a great article! Both knowledge full and helpful! Due to this article I am able to make my fast load faster. Before it used to be laggy but now it’s super fast. Thank you so much for sharing such an awesome article!

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Fill out this field
Fill out this field
Please enter a valid email address.
You need to agree with the terms to proceed

Menu

Pin It on Pinterest