Disclaimer/Notice as Provided by the Content Creator

A portion of the article has been borrowed from Online Media Masters, necessary Credits have been given. https://onlinemediamasters.com/slow-wordpress-plugins/Description about Instant.Page borrowed from there site.I have not been paid to speak good or Bad about any plugin

WordPress, is the platform that powers a vast majority of the modern Internet, and WordPress page speed matters. Here are the 17 Secrets to How I Optimize my WordPress Site To Load In 927 ms(100% GtMetrix) (100% GTmetrix) and Pingdom Score. And WebP was a new thing for me.

WordPress Is not slow, rather WordPress is really better if you are not a really good web developer.

But why do people think it’s slow?

There are 2 sides,

Frontend And Backend.

On Frontend, things like using CDN(Content Delivery Network), minification, and GZip Compression, Brotli Compression, and various other things can help, but on Backend we forget optimizing. I will explain how.

Unlike Many Reviews who do optimizing with simply plugins for optimizations, I will include some different things too. Do You Know What is PWA or how can you build a WordPress PWA?

A Progressive Web App or PWA can bring a major WordPress increase page speed to your site. And these powerful yet uncommon 17 Secrets to How I Optimize my WordPress Website to load in Under 927 ms(100% GtMetrix). Similarly CDN, or Content Delivery Network, is another great thing.

Usually your server is located in one country but has to serve the whole world, but with it, your content will be served from Servers around the globe. Similarly, WebP is a brother of PNG, JPEG, which offers sizes less than JPEG and Quality better than PNG. Do you know Instant.page? It’s a script that starts loading your page, even before u click it, thus saving more than a second easily.

And many more great tricks would be discussed, we will begin with basic, hosting, and plugins, we will then move onto these, and then we will move on to some Advanced Used Cases too. I happened to be given a Web Designing project, where a fairly simple WordPress website was loading in more than 9 seconds, and was using 39 plugins. It was more of a stupidity, because they were having duplicate functionality, and were old and slow plugins. So beginning with it.

1. Why Do We Need a Fast Website

There is a saying that says, “always ask if before how”, so, before I answer your question “How Can I Make My WordPress Site Faster”, I shall tell, “Do I need to Make my WordPress site faster” A Fast Website is really important. Most people on WordPress, either build websites for selling, basically ecommerce, or to spread knowledge and information. For all this the loading time is important. A customer may get bored if he needs to struggle to buy your product. A fast website can ensure higher conversion rates.

A fast website also is an important factor for Ranking on Google. And you should know that a good chunk of your customers/ visitors will come from Google. A Fast site also builds trust and feels much more like a Native app. Therefore a Fast website is really important. I started my WordPress Website from Dropshipping, and my performance initially was not good. Conversion rate was low, and visitors were less.

So WordPress increase page speed, will be done with many tips and tricks and massively improve your performance, they all are a Part of 17 Secrets to How I optimized My WordPress Website to load in 927ms. Also please note, that in case any one needs advice or support in optimization, 

I am just a comment away, you can contact me there, by registering for free. And soon my rankings improved to a really good level. A 1sec delay in page load time, can cause decline of 7% in conversions and decline of 11% in Page Views. And if we can decrease the load time by a few seconds, we can surely bring a massive shift.

If you want to learn more about massive scale of WordPress and their reach, read this great article WordPress Statistics: All Essential WordPress Stats You Need to Know

2. What Do We need to do to Improve Our WordPress Site Performance, and load it in under 1 Sec

So WordPress is not simple. Simply reducing images, or reducing features, or compromising on design of site is not the right thing to do for a faster site. Rather, for us WordPress Optimization means making a really fast site without compromising on features, by making right decisions, and using newer technologies. I promise to help you build a fast WordPress website, by almost no coding necessary.

When I started my research on optimization, I wanted to ensure that I make it so that it’s fast and economical, any one can buy a really expensive and powerful server or hire a WordPress expert to implement a faster website. But I shall help you build a fast website that loads in less than 1sec, with no coding, simple steps  and simple ways to implement it in a cost effective way. 

For my implementation I used a GoDaddy Hosting, all Free services, and all the WordPress Themes and Plugins I used were free. Though I mentioned some really great premium plugins(most of the plugins in my guide about How I Optimize my WordPress website to load in 927 ms(100% GtMetrix) are FREE), but the performance I achieved was really cost effective. The only thing I spent money on was hosting and domain, no money spent on plugins, themes, services, CDN, whatsoever. So one question I have asked really commonly is Which Hosting Should I Buy.

Hosting Is Important, but We can do it with Bad Hosting too.

Hosting is basically the server space allocated to you. I think Hosting is important, in all aspects, but there are many new technologies, many of which are free nowadays, that can help you manage with Bad Hosting. What’s the good Hosting Anyway? Bluehost in my opinion is the best web hosting.

You can get Bluehost Hosting, with exclusive discounts with this link.

 

But for this, I used GoDaddy Hosting, to ensure I can optimize a bad hosting TOOOOOOOoooooooooooooooooOOOOOOOO

What to look for in a web hosting if you are a beginner? Well here are a few things to note:

• PHP version: well the newer the version the better it is. I recommend at least 7.3.x for you.  With my experiment I used 7.2
• WordPress Version: Again better WordPress Version is always good.
• Down Time: Down time is the time an average time when the server faces outage, keep it minimum.

17 Secrets to How I Optimize My WordPress Website to Load In 927 ms(100% GtMetrix), I wanted to make sure, that I do not spend outrageous amounts for optimization, because many of you would be first time Website Starters, and not confident about things. Therefore, I will use Free Themes, Free Plugins, cheapest Hosting (GoDaddy) and no paid service to optimize my site to load in 927 ms(100% GtMetrix).

These things ensure maximum compatibility, effective usage of resources, and quick site. Also, I have ensured that I make this article Budget Friendly, I achieved the whole WordPress increase in page speed without spending a single buck on plugins or themes. My only cost was a GoDaddy Domain and a GoDaddy Hosting. Though always a Good Hosting is better. It’s always better to go with Better Hosting.

I love Siteground, they are the best when it comes to managed Hosting. I have some sites on Siteground, and their customer support is fabulous. At one point I had some issues with CDN, they instead of instructing me, directly solved the issue by adjusting my server. They are generous in support and quick response. They have their own WordPress Optimization plugin also, It’s called Super Cacher, and is really amazing, it supports caching, image optimization, minify, Lazy Load deferring JavaScript, and many other features. In case you want to buy Siteground use this link to get 70% off on your purchase.

3. Some Concepts which I Used to Optimize my Site to Load in 927 ms.

Optimizing your site, you should know some basic terms and concepts. Before revealing the 17 Secrets to How I Optimize my WordPress Site to load in 927 ms(100% GtMetrix), I shall teach you some basic concepts and terms you need to know. Simply Optimizing a site is a too broad thing, we need to know what we want to do, and how the magic of faster loading happens. In these concepts you will learn what you need to do, and once you know, we will tell you how to implement it.

Caching

Caching is something that every device uses, your phone, your Laptop everything uses it, so should your website use it. Caching is a basic step, with not much difficulty in WordPress, simply using Caching was a major part of Secrets I learned about How I Optimize My WordPress Website to load in 927 ms(100% GtMetrix). As a dynamic Platform, WordPress never stores actual URLs, all files and all content is generated, once a browser requests a URL. This process of generating a Web page can be really time consuming. As a result we use caching. Caching is basically storing the static version of a webpage or a part of webpage, this means the static content is served directly from the server without processing.

This static content is usually of files that are common to all pages of a server. Site Cache: It is the cache or the generated files of the content that you want to serve you your website, this includes HTML, CSS and JS. Browser Cache: We send browser information, about what all content from a page to be stored in the browsers own cache, and along with that we determine it’s max age, the browser retains the data in its cache, for this much time after your last visit to given page. Server Cache: Server Cache is used to improve the time it takes to generate content of your page. The Server Cache, stores the frequently executed PHP code to its RAM meaning faster processing.

Minify

Minifying is a really important and fundamental thing. It reduces loading time, and reduces page size also. Every site can benefit significantly from Minify. This is one of the most important thing I’ll explain it like this, Take a Notebook, and write 1 word in each line. Doesn’t matter if you can put more words in one line. Write a hint in large size wherever you think an important thing is there, so that you can come back to it. Your notebook will complete really quick, you will go through pages really quick. Now take another notebook, write as much as you can in one line, and stack words as closely as possible. You will be able to write the same text in Notebook 2 in really less pages. Now coming back to Optimization, our code has a lot of lines. And these lines can be combined into one line. Combining notebook text in less line saved pages, similarly having code in less lines means saving loading time and reducing page size. This can include your HTML, CSS and JavaScript. It’s really important, and it is one of the things that does not have any drawback. And is one of the fundamental things of How I optimize my WordPress Website to load in 927 ms (100% GT Metrix)

Defer and Async

Javascript and other files seem simple. But there are 2 ways in which a browser loads and renders these files.

• defer
• Async

Traditionally, when a web page is loaded, it happens such that, when browsers sew JavaScript files, they download it, and execute it immediately. Browser doesn’t load the next file until it is executed. The execution time is a whole wastage, the execution time delays the loading of the next file, meaning slower loading. Traditionally, programmers put JavaScript at the end of a Web page, so that a majority of pages are loaded before execution. Modern browsers support Async and Defer attributes for JavaScript, which allow much better file loading. With async, the file gets downloaded asynchronously and then executed as soon as it’s downloaded. With defer, the file gets downloaded asynchronously, but executed only when the document parsing is completed. With defer, scripts will execute in the same order as they are called.

 Service Worker

Service Worker, is an additional JavaScript file allowing to add Offline Compatibility, meaning it can load a cached page if there is no internet, it can be used to load pages directly from cache too. Meaning that rather than caching on the server, we can store the static page on the browser, and when the user requests the same url again, then the browser serves it from cache, meaning near no-delay page loading. We build Service Worker using this only.

Lazy Loading

When a user loads a page, the page by default is scrolled to top. And the content below it is not visible until scrolled down. This means images below the first few thousand pixels aren’t visible until scrolled. We use this to create Lazy Loading. The images on our web page are not loaded until they are visible, when the user loads a page, only the images that would be visible in the initial content of the page are loaded. Then as user scrolls more images are loaded. This means we significantly reduce loading time by delaying images until they become visible.

WebP

WebP is a new image format with extension .webp, it is a really important thing for all web developers. WebP supports transparency, it has image sizes as good as JPG, while picture quality is as good as PNG. It’s still not very popular, and not all devices support it. Plus, most of the current images are PNG or JPG. Whatever we talked  about above was a major portion of all our optimization. These are usually for all websites, but now I will discuss it relative to WordPress. I will Share 17 Secrets to How I Optimize my WordPress Website to Load in 927 ms(100% GtMetrix).

4. How Do I Make My WordPress Site Faster with The Right Choices

WordPress is loved by people for it’s customizability and lots of choices it provides. In my 17 Secrets to How I Optimize My WordPress Website To load in 927 ms(100% GtMetrix), I realised some small yet necessary decisions could significantly reduce my loading time. Know it, sites usually load in 2-3 sec, I achieved 927 ms(100% GtMetrix) by lot of hardwork And as it happens for most of us, many of the times that can cause confusion too. WordPress is really powerful.

Though there are many things that WordPress never baked into its ecosystem. There are some things which are essential for every website, like caching, and SSL. But WordPress Doesn’t provide it. WordPress is really good and Customisable, but the core features are unlimited. Most of the time we rely on plugins to add features and capabilities.

But sometimes the addition of features causes slowing down of the site. Take this for example, for my site I wanted a system which automatically Tweeted my post with Title, Link and Thumbnail as soon as it gets published. WordPress in it’s core doesn’t support it. I read and found that the plugin JetPack can be used to add this functionality.

I liked the idea.

JetPack is a really big and popular plugin. In fact it is built by the organization that built WordPress. But, Jetpack is a big fat plugin, and simply using it for one thing that is auto post to social media seemed not the right thing.

If WordPress had it baked into core, I would have used it, because it would be a part of WordPress ecosystem, so no unnecessary things, and lesser chances of glitches. But because WordPress doesn’t have it, I realised the importance of right choices when Optimising My WordPress Website to Load in 927ms.

I used a service called IFTTT (If This Then That), it’s a service responsible for integrations, you could use it to integrate 2 apps/services. So I used it to trigger when a new post was published and share it to Twitter, worked flawlessly. It has 0 maintenance, it does no harm to load time, and is totally separate from WordPress, meaning that it won’t interfere with anything else.

With Jetpack, it would have a negative impact on my speed, it would require maintenance, and it would add up to the list of things I would have to go through whenever I would have to debug an error. This was one of the clever choice I made to optimize My WordPress Website for 100% GtMetrix. Similarly always research for alternate and smart ways.

Sometimes there is a thing for which you use a big fat plugin which can be done by just a line or 2 of code. You won’t learn how to make right choices easily, but surely with time, with experience, and knowledge you learn it.

All I shall say is that never assume that for any feature you need a plugin. Sometimes there are non plugin ways too. Or sometimes a smaller plugin (lesser code), can do the trick for which you use a big heavy plugin. In other cases, you may install a new plugin for a specific feature which could be done by already existing plugins that you have.  

5.  A Good Theme

What is the reason why Apple’s iPhone, or Samsung’s Galaxy Series are popular? Because they are good phones? No. They are popular because they are not only good phones, but they come from a brand, that is good. Because they come from Good Brand, a customer gets much advanced software, much better customer support, and consistency/track record for these phones.

Similarly in WordPress, we don’t directly have brands, but we have do have some popular WordPress themes developing companies. These are themes developed by groups having proven track records, you can trust them for high quality, and using modern standards.

A good theme, can contribute largely to WordPress Site Speed. I did a deep research and hand picked a few themes for you which are best when it comes to Optimising WordPress Website for Speed and Performance. Some of the best ones Themeisle,  Theme Forest, And Elegant Themes. (I love Hestia Theme from Themeisle )

Neve WordPress Theme

Neve is an awesome WordPress theme, the reason is because it has modern design, lots of customizability, and WooCommerce support. But also, it is one of the few themes that completely support WordPress PWA and essentially Service Workers It’s code is written in Pure JS rather than jQuery meaning much better code, and faster Execution of code on frontend leading to a faster site.

Hestia WordPress Theme

One of the best themes include Hestia  WordPress Theme from Themeisle. It uses Material Design Language which is the best design style and is developed by Google. It may not be compatible with all plugins but it has various features to make it a compelling theme to use. It is free and can give additional functionality if paid for. You can set custom size for headings add button for scroll to top add frontpage sections etc. Believe it or not the whole homepage was of made up of simply some toggles in Hestia WordPress Theme, with zero coding, zero plugins or zero page builder stuff used in developing the home page, and is pretty dope on any other theme it took us lines and lines of code to do the same but Hestia WordPress Theme is seriously awesome. I Recommend Hestia WordPress theme, if you want good looking site, with great performance but are ready to compromise by not having WordPress PWA.

Parallax WordPress Theme

  It is a great theme and is focused on images, it has as the name suggests Parallax WordPress Theme scrolling effects, bunch of customization and lot’s of stuff, it is really responsive and has lots of animations and transitions, one of our favorite feature being fly-in objects, that make your content standout from audience.

Tesseract WordPress Theme

  Tesseract is a awesome freemium theme which is good if you want to open a store or some e-commerce related stuff, also it has the widest range of customization options among the themes we have tested for this very purpose.

7.CDN

A CDN or Content Delivery Network is something that every website should use. CDN is a network of servers spread across the globe that help you deliver your content from their servers and contributes to Wordpress increase page speed. Here is CDN’s Total Explanation We use Cloudflare and would recommend using it for the fact that it is free and can be upgraded in future. Though if you have budget try MaxCDN SSL or Secure Socket Layer is an important aspect if you want your website to rank higher on Google. Google prefers secure websites rather than insecure.

Cloudflare allows you to get SSL for free. You can go to security and turn it on for your website. Though it would brick your website temporarily for all website code would be existing in HTTP rather than HTTPS. The simple solution is page rules: add a rule in page rule, write your website url and select rule as always use HTTPS, and your website will be running. If it some time your some content is still missing use the plugin Really Simple SSL, and it should fix all issues regarding. CDNs provide services like Minification and Brotli compression can improve performance even further.

8. WordPress Plugins I Used to Optimize My WordPress Website

WordPress is a dynamic platform, which means the actual urls and actual pages are never stored over your server, because that could consume a lot of space. For any page, all WordPress core files, plugins and Themes run and generate the page based on request. Not only does this consume more server resources but also, does it, slow down the site. Caching stores these generated files, as static files(Static files don’t need to be generated frequently, and less server resources are used to serve them) So How does Caching Make My WordPress Site Faster? These Static Files are then served directly to the end user. In some cases, the hosting provider itself provides you with their own plugin for caching, if it’s a reputed hosting then sure use that plugin, but if it’s not then here are the best plugins you should use For WordPress increase page speed and Performance.

Autoptimize

Autoptimize is a really amazing Plugin, it’s Free, and comes with great features built in, great minifying, and Deferring. It is totally free, and comes bundled with Shortpixel Image Optimization support. Though they have a small quota for image optimization, yet it is really effective, and great. Autoptimize, is an all round performer, and is one of the plugins i use, and a significant player in How I Optimize my WordPress website to load in 927 ms(100% GtMetrix).

WP Fastest Cache

WP Fastest Cache, is a Freemium WordPress plugin that supports backends as well as Frontend optimization. It is a really feature rich and very well built plugin, that edits your .HTACCESS file and does everything for optimizations. Features supported by it included, Minify HTML, Minify CSS, Enable gZip Compression, Leverage browser caching, Combine CSS, Combine JS, Disable Emoji

Fast Velocity Minify

Another Really Good Plugin, Fast Velocity Minify, is great for minifying, and it has really good Font Optimization. It ensures that Fonts don’t make loading slow. It’s also free, and it has some really cool features, including ability to inline CSS files, meaning faster loading. It does not have really good caching, it barely went above 5-6mb for me. Your mileage may vary. I loved the font optimization, and Deferring of JS with it.

WP Super Cache

WP Super Cache is another wonderful WordPress Plugin, which allows high level of server configuration for optimization and better speed. The most important thing about this plugin, is that this plugin is build by the company that Built WordPress, which is Automattic. Meaning that they very well understand WordPress, and they know what is the latest in development for WordPress, and can surely roll out the Plugin update as early as possible. It’s a really great plugin, which adds things like gZip compression, and various other perks, to make it fast. The customisation options are really good. Though, if you don’t understand exactly what they are, then please don’t mess with them.

9. Backend Optimization

Wp Optimize

Wp Optimize is a plugin that not necessarily adds up to your loading speed and performance, but it is used to optimize the server side. It can clean Autosaves, Post Revisions, Spam Comments, Abundant Post meta and Pingbacks/Trackballs. Meaning it eliminates all useless things and leads to smoother WordPress User experience.

Perfmatters

Perfmatters is a WordPress plugin, which is really good. With a different approach. It can selectively disable certain WordPress Features that you could not use. This is a really great plugin to selectively disable and enable things based on your needs, and it really makes a difference. What’s the point of loading JavaScript for emojis when you don’t use them at all on your WordPress website. It was a really great and important secret about 17 Secrets to How I Optimize My WordPress website. So simply use the toggles to remove and you are good to go. Though I shall inform you,that some plugins require Emojis and many scripts to be loaded as dependencies, in order to run, if you don’t use them, they still can be required, so these backend plugins can many times break your site. Therefore thoroughly check your site after changing any setting for such plugins.

10. Load Site Faster with WordPress Progressive Web App   (WordPress PWA) using Service Worker for Optimized Site

Service Worker is a Special JavaScript file that can be used to create a Progressive Web app. A Progressive Web app is a modern way to deliver an actual App like experience to a user. It’s a relatively newer thing, and WordPress does Not have support for it built into its system. A Progressive Web App allows offline compatibility, meaning that like a Real app shows the content when the Internet was last available, a  PWA in general as well as our WordPress PWA will store a cached version of all pages that the user visits on your site, this can help you optimize your WordPress Website to Load in 927 ms with 100% GtMetrix. The cached version will be served if the Internet is not available. This can improve conversion rates for retail stores, as consumers would be able to see the products they have visited before, even if they don’t have the internet. SO if you got interested you shall be wondering how to convert WordPress to PWA. Well the journey from WordPress to PWA is really quick and simple. First lets know more about WordPress Progressive Web Apps then we shall move on to how to build one or basically convert WordPress to PWA. The PWA can be used to improve site performance also. The cached version from the WordPress PWA, can be served in union with the server content to speed up load time. Therefore PWA is a thing which can be a game changed when it comes to optimizing WordPress Website to Load Fast in 927 ms. It’s Worth taking note that Google does not account HTTP/2 and PWA as parameters for Page Speed. Meaning the score that you see on Google Page Speed Insights, or GTMETRIX will not improve with our WordPress PWA. But Google and many other Search Engines take into account the Use Experience Report which the browser makes. PWA, massively improves the Chrome User Experience Report meaning better ranking. And our WordPress PWA will surely help us do that too. Our WordPress PWA reduces the burden on your server too. For example, if there are multiple URLs requesting the same image, then due to this WordPress PWA, the browser would request the image only once, and other times would be served directly from the cache. They work with the help of Service Workers and Web Manifests. Web Manifests handle the visual portion, they create the splash screen for launch, the top menu bar color, icon for app etc. so that they look beautiful. We would discuss how to build them in a minute understanding the concept is also important. The only basic requirement is to have SSL, so that site connection is secure Service workers enabled Konga to send 63% less data for initial page loads, and 84% less data to complete the first transaction! Web push notifications helped eXtra Electronics increase engagement by 4X. And those users spend twice as much time on the site. The ability to deliver an amazing user experience helped AliExpress improve conversions for new users across all browsers by 104% and on iOS by 82%. You can do the same for yourself and Optimize Your WordPress Website to Load fast in 927ms. Service workers are Javascript files that handle the backend and the functioning. The can be used to make work even offline, or fast as native apps. They take care of the functioning side.   So now is the time to build our own WordPress Progressive Web App, beginning with, there are multiple ways to convert WordPress to PWA. The 2 ways are:

• Easy One: WordPress PWA special Plugins
• Medium One: Using PWA Builder
• Hard One: Custom Coding it.

 

Easy One

This method is based on WordPress plugins, there are many great WordPress plugins that can help you accomplish a good WordPress PWA. The plugins are fairly good, but they are not much advanced. Most of them have not high installs because PWAs  and specially WordPress PWAs are really an unknown yet important thing. That’s why they are of the biggest surprises in my 17 Secrets to How I Optimize My WordPress Website to Load in 927 ms with 100% GtMetrix. No plugin is advanced enough to support built in Push Notifications. And maybe I am demanding too much but the icon management is bad, it could be great if they themselves would generate the different sizes of icons as required. But still they are great. Nowadays the PWA plugins usually run on WorkBox which is Google Developers Library for building PWAs. There are 2 great plugins that I shall recommend.

1.) WordPress PWA Plugin

This plugin is built with workbox, and is a collective effort of Automatic which is the company that owns WordPress, and Google itself. And it is well managed. Most of the basic configuration will happen via settings, but for going deep, if you know php, then they provide some snippets to customize and improve their functionality. The benefit is that it allows not only you but Theme developers also to adjust their site for WordPress PWA support. I mentioned above Neve Theme by Themeisle, which has it’s own theme templates to support the PWA for this plugin meaning a better experience overall. We hope that in future WordPress will bake the support Directly into their systems, but for now we shall be happy with it. The only drawback with this plugin is it is difficult to modify manifest file, which is basically how your app looks. It controls the icons, the splash screen, the support for screen rotation, and various other ways Once you set it up, you can verify if it is working by Google Chrome on Desktop first. Open a page of the website and press F12 on the keyboard, this opens the Inspect element, in the menu of inspect element you shall see options such as elements, console etc. Select Application, there in the window that opens, check and verify manifest/service worker to see if it is recognised. If it is recognized, then people would be able to download the Our WordPress site’s PWA from mobile. Any person when visiting your site through compatible devices, it will see a banner at the bottom of the screen asking to add your site to the homepage. Clicking which installs it. Unlike APKs, it will install automatically, and unlike the earlier versions, this new WordPress PWA supports push notifications also, this means you can send notifications also. Now the plugin we talked about does most of it, but it cannot take control of updates and push notifications, and though the updates can be handled by the PWA Builder site that generates PWA files for you automatically, it also doesn’t support Push Notifications.

2. Super Progressive Web Apps

Super Progressive Web App is an amazing plugin, it is really simple to set up, it has support for AMP pages, if your site uses AMP then it’s going to be great. The ability to set up icons is much better here, and overall we get much more options for Manifest. It’s really good in terms of performance, it doesn’t use Google Workbox but still it’s amazing. It also supports Push Notifications, while the Push Notifications aren’t direct, they are in collaboration with OneSignal which is a plugin for push notifications specifically. These 2 plugins got a significant enough jump in performance, that they very well deserved to be a part of 17 Secrets to How I Optimized My WordPress Website to Load in 927ms.

Medium One

This is a method for a much more customized experience. And it needs access to your File Manager for the Site. Some Hostings provide really good File Managers for uploading or downloading files, while others don’t, if you have the idea of how to access the File Manager or FTP, then use this method. We would do this with PWA Builder. PWA Builder is a site, where you can configure your Manifest and Service Worker. It was built by Microsoft, It has many configurations, like you can choose between:

• Offline First
• Cache First
• Background sync
• Advanced Caching

It is really powerful. You just need to follow the steps as they tell and you would be good. We do not recommend this method if you don’t know how to upload files to your server via either file manager or FTP. Here’s a warning, while I mention it for 17 Secrets to How I optimize my WordPress Website to Load in 927 ms, it should be noted that this service is intended for general Websites, not just WordPress. It can cause compatibility issues with WordPress, so prefer the easy way, if debugging is not your thing/

HARD One

Hard One, as the name suggests is obviously hard, and is basically based on custom configuration of Workbox Library. While A custom coded Service Worker can be really powerful, and can work without any library also, it is always great to have the Workbox, because Google does it really well. Plus configuration and expandability is amazing. Please do not try it without JavaScript knowledge. It can break your site.

11. Best Practices For WordPress to Keep Your Site Fast

WordPress is constantly improving with its constantly growing bigger WordPress Community. And as a result we should always try to jump onto the next version of plugin as and when it is released. As a Website owner, even worse than a slow site, is a hacked site, WordPress and WordPress plugin developers constantly try to find out loopholes in the plugins and fix them to prevent any back. As a WordPress Site owner, I shall tell you some small effortless things which when used will very well answer, how can I Make My WordPress Site Faster. But for you to be safe, you need to update your site to the version with loopholes fixed, in other cases plugins and themes may bring up new features, new Integrations and Performance improvements, and therefore sitting in the old plugin is the wrong thing to do. Always keep your site up to date as much as possible, most of the hosting services provide with their own setup for Auto-update  plugins, and you should use it.  This is an effortless way to drive maximum out of your site. It is possible that WordPress 5.5 comes with an auto update functionality built in by default, which would be really great to see, and would be a welcome move. Always Use PHP 7.x.x

PHP is the programming language used to build WordPress. And while keeping your WordPress upto date is important, keeping your programming language upto date is equally important. WordPress currently recommends PHP 7.4, for my GoDaddy hosting Website, by default I got PHP 5.4, and I had to update it to 7.4 on GoDaddy. It is troublesome and a little time consuming for a first timer. That is why I always recommend a Good Hosting provider like Siteground, because it’s intuitive interface makes changing PHP a piece of cake. Most plugins are updated with the latest language in mind. I do not recommend using PHP 5.4 at all, you should at least be using PHP 7.2, PHP 7 was a significant update and as a result many people running on PHP 5.4 do not get access to all plugins/themes due to incompatibility. If you face any issues always remember I am just a Comment away, comment below and I shall help you out troubleshoot any minor error. Never Edit Your Theme/Plugin Files If you ever tried editing files of your Plugins and Themes, then I shall inform you, it is wrong. First of all I admit that usually editing the files won’t trouble if you know what you are doing. This post was about how I optimise My WordPress website to load in 927 ms(100% GtMetrix), but this is important, many people edit files, to ensure there needs are filled. But as soon as you update the plugin or the theme file all your changes die. Therefore it causes trouble. Rather you should do all the changes in a Child Theme or a Custom Plugin. Use Excerpts Instead of Full text In search results, or on Blog Page, or archives etc, rather everywhere you see a list of WordPress posts, you have the option to either have the whole post text or just a summary. The best practice is to have a summary instead of a full post in your search results etc. The reason? Lesser the text -> Lesser the Page Size -> Lesser the Download Time, this will help reduce page size significantly. But also, it will increase page views, because if people could read all your posts inside the search results, why would they click to view it? Having the summary tempts the user to read the rest of the post also. How can we do it? Well just go to wp-admin of your site. Then go to Settings >> Reading  and use the radio buttons to toggle. Do Not Upload Videos If you plan to put some videos in your content, then we talked about it in our image optimization, but there is another thing you can do. Videos are heavy, and not all servers can handle such heavy data, plus not all your viewers will have internet fast enough to view your video in 1080p or 4k. In my quest to optimize my WordPress website to load in 927 ms(100% GtMetrix), I realized that it’s better to upload the videos on YouTube. YouTube is big and their servers are powerful, simply upload the video to YouTube and embed it in your site. YouTube processes your video in many resolutions and serves according to the users internet, therefore your viewers with slow internet will also view it easily. Uploading my videos to YouTube was the best thing I did in terms of helping my server and improving user experience. Post Revisions WordPress built a really great system to ensure that incase you forget to save your post it autosaves, and if you want to go back to a previous version of the post you can do it with WordPress revisions, but keeping all the versions of your post in your database can slow you down, as a result in order to keep it fast, I shall say limit it to 10. This is an advanced use case, and you cannot do it without decent PHP knowledge, you should know how to edit wp-config.php file there, add this line

define( 'WP_POST_REVISIONS', 10);

12. Optimize WordPress site With Instant.Page

In the Past one year, I slowly discovered each of these 17 Secrets to which helped me Optimize My WordPress Website to Load in 927 ms(100% GtMetrix), I discovered something which was unique and truly magical. No doubt there were many small and big surprises in almost all of the 17 Secrets to How I Optimize my WordPress Website to Load in 927 ms(100% GtMetrix). But this one was a thing which was totally unheard, totally unexpected, unpopular yet really powerful. I have not heard anyone else speak about a concept like it before. So, Aditya, What is Instant.Page? Well, I am here to answer it, usually when we visit a website and see a link, which we click, a new page starts loading. Human psychology tells us that before clicking a link a user usually hovers at it for almost a second. Wouldn’t it be good, if we start loading the next url as soon as the user hovers around it rather than when the user clicks. Well Instant.Page does the same. With Instant.Page if a user hovers a link, the next url starts loading in the backend, in case the user moves the mouse away from the url, the Instant.Page will stop loading it, because the user changed his mind. The new url would not replace the current one till the user clicks it. This JS file will save you the time, between the user hover and user click. While it may seem insignificant but it drastically improves user experience. Imagine you are an E-Commerce store, a usual user would first visit the product, then after clicking add to cart, he visits the cart page, after which he visits the checkout page. There are 3 page loads before he actually pays. Meaning that there are 3 chances where users can get bored or change their mind while the next url loads. But this file will reduce load time thus increasing conversions. The best part is that this whole JS file is just 1kb in size. Meaning it will give high performance and faster loading while being negligible is size. But how to use it?

On desktop

Before a user clicks on a link, they hover their mouse over that link. When a user has hovered for 65 ms there is one chance out of two that they will click on that link, so instant.page starts preloading at this moment, leaving on average over 300 ms for the page to preload. Another option is to preload when the user starts pressing their mouse, right before releasing it. This makes for virtually zero unused requests while still improving page loads by 80 ms on average.

On mobile

A user starts touching their display before releasing it, leaving on average 90 ms for the page to preload. -Source: Instant Page

Simply insert the code below in Foot of your page, and you are ready to go.

13. Security

Well this post was about How I Optimize My WordPress Website to Load in 927 ms(100% GtMetrix). But I don’t want you to ever get into trouble. Netizens are really bothered about their Privacy. And as a Site owner it’s your responsibility, to keep their data safe, along with keeping our site secure from hackers and spammers. Therefore I shall promote that “Speed Thrills but kills, if we are unsecure”  You don’t want your site to get hacked or your products getting deleted or your customers data getting stolen, as a result you need plugins for Site Security. These plugins will keep your site safe. It’s  worth noting that Security Plugins negatively impact your site performance. Yet I recommend using security plugins, to ensure a great healthy and trust worthy site. There are 2 Great plugins widely known for security. These are 1.) Wordfence, 2.) Sucuri

Wordfence

Wordfence is one of the greatest Security plugins, it can block spam IP addresses, prevent repeated failed login attempts. Prevent hackers from entering your site, and the best feature is file integrity checks. The best part is File Scanning. 4 years back, when I was new to WordPress my first website got hacked. It was not actually hacked. But my pages would randomly redirect to some other sites. Leading to loss of user trust and further on loss of loss of traffic. Back then for me WordPress increase page speed was everything. In order to solve the issues, I decided to use Wordfence Plugin. I scanned my WordPress Website from it and I was dumb struck to know 3 of my editors were using weak passwords, and 7 files across 5 plugins were corrupted. It compared each plugin with the latest version of that plugin as provided by the plugin owner. And in case of edited files at a click of a button it would restore the correct file in a snap. It’s really amazing.

Sucuri

GoDaddy acquired this company in 2017, and is another great well built plugin with a great user interface. Sucuri has many great features, including Black Listing checks, and Post hack features. Sucuri is a great plugin, now GoDaddy owns it, so I thought GoDaddy would surely have some under the hood features in Sucuri Specially for their Hosting. So I thought let’s Go with Sucuri for this hosting setup. Usually people need either 1 of the 2 plugins. There are almost no plugins as advanced as them. And for security we should not take risks. Jetpack has some real good claims for having well built security systems, but my one site has got hacked even with JetPack safety featured, therefore it’s better to keep a full Security oriented plugin In case your site got hacked and you are trying to recover, then either take a paid plan for Sucuri or if you don’t have a budget, then install Sucuri and Wordfence at the same time, so that the malicious code cannot escape.

14. Jetpack

  Most websites show it on top and is a valued plugin, but we do not believe so. Jetpack has various features, and stats features, though we call it jack of all trades master of none. It has a CDN for images but it is not as good as Cloudflare or MaxCDN, it has Social Media sharing but it cannot match IFTTT. It has stats but it cannot match Google Analytics. The only feature why we keep it in list is it is simple and helps those people who do not have much knowledge about stuff, also it helps in integration with WordPress, so that you can publish posts from Phone. Jetpack is having their own CDN. For people who feel Cloudflare its difficult, it is the best. They have a full limit. Their own CDN is known as Photon. They do minify, their site accelerator is excellent. They also support image optimisation with support for Lazy Load. It has many other features, like spam protection, comment moderation, and a notification for your site down.

15. Image Formats

Image Formats. In present times, simply calling an image as image, feels wrong for a site owners.  Not all Images are made equal. Images do differ from one another. This is based on Image formats. Images are commonly known to be served in WebP, JPG, PNG, whereas Videos are known to be served in MP4, MOV, GIF. If you aren’t using the correct format for your WordPress website, you are missing on a lot of opportunities for optimisations. And there is no single good format to nail it all. You need to understand which format works better at what time. Sometimes you need a much clear detailed graphic, other times you need faster loading and other times, you want transparency. In a single url, you can have different needs for different images. And therefore wise choices are important.

Images

For images, jpg is most popular, it is small, and is compressed as compared to PNG. But it lacks Transparency support, we cannot create images with transparent backgrounds in it. In contrast, PNG is larger in size, but retains much more quality and detail, and supports Transparency. It is good if you need to show high quality images, and you are ready to compromise loading time for better quality. WebP is a newcomer, it is developed by Google. It supports Transparency it is more optimised than JPG. It has lesser size than JPG, and was developed specifically for faster web. It is not compatible with older phones, and Apple devices.

• High Image Quality: PNG
• Fastest loading: WebP
• Maximum Comparability: PNG or JPG
• Transparency: WebP or PNG

Videos

For videos, MP4 is popular, and has a wide range of acceptability. It is well optimised and loads fast. Though, it also doesn’t support transparency. GIF, is another powerful way, it is good for shorter videos, it supports transparency and looping of images. Making it really capable.

Vectors

SVG, SVG or scalable Vector Graphics is an XML based newcomer, rather than storing image data pixel by pixel, it stores it in the form of vectors. It supports drawing lines, curves, shapes, colors, and text. It can be used for making infographics, and other 2 dimensional images. It is scalable. Meaning an image of 100×100 px will be of the same size, as 1000X1000 px. It’s quality and detailing is amazing, unmatched to anything else, and it’s sizes are significantly less. Though it has limited use cases because it is just lines and drawings. Usually people who know vector graphics like Adobe Illustrator usually use it.

16. Image Optimization

Shortpixel

Images are the heaviest Part of any given web page, and simply optimising images can make a day and night difference. WebP is a new image format developed by Google and embracing it was one of the most important things I learnt about How I Optimize my Slow WordPress Website to load in 927 ms(100% GtMetrix). This plugin uses its CDN to deliver all your WordPress Attachments via it’s CDN, and serves  the Webp version of the image, if the Device supports it. It’s a paid service, but it’s worth it. It also supports Lazy loading functionality, which makes it a wonderful plugin to use for images.

WP Smush

WP Smush is a free alternative to ShortPixel, it may not be as refined or as Good as Shortpixel, but surely it has a lot of features, and overall image compression is pretty good. It supports Lossless Compression, Bulk Compression, Lazy Load, Image Resizing and many more. As said earlier, that only code optimizations won’t get you high speeds. In order to understand how to optimize WordPress Website to load in 927 ms(100% GtMetrix), you need to do images too.  

WordPress 5.4 is slated to have Lazy load functionality built into core, meaning no plugin required to implement lazy load, but still we recommend a specific plugin for image optimization for image compression and WebP conversion, because these 2 can significantly improve page size.

WP  Disable

In My guide to 17 Secrets to How I Optimize my WordPress Website to load in 927 ms(100% GtMetrix), I learnt that Frontend Optimization, and things like Lesser Page Size, Smaller Images, and faster serving are important. But the backend is equally crucial. We need to ensure that the backend is perfect, because if our PHP code execution counters some small errors or warnings then it can be impacting your page load. Or if your server executes some code which is unnecessary, it’s better to refine our backend. While I recommend you to have some basic knowledge about HTML, CSS, JS and PHP, you can ask me in the comment section below for some basic help, and I will gladly help you out. But there’s a Great plugin, about which I learnt and is one of the significant things of 17 Secrets to How I Optimize my WordPress Website to load in 927 ms(100% GtMetrix) It’s called WP Disable, it’s a great plugin, to disable everything useless. If you do not use much of WordPress Settings, then use this plugin, to remove things like Emojis and what not. These things can slow you down, therefore be smart and remove unnecessary things from execution.

17. Backend

WordPress Story is half baked if we don’t take care about the backend. When I learnt 17 Secrets to How I Optimise My WordPress Website to load in 927 ms(100% GtMetrix), I thought Frontend optimization was enough.

A Good Carpenter Would not put a lousy price of wood at the back of its cabinet even if it faces the wall.

That’s what I learnt. As a Good Website owner, I Can not put lousy code even if it exists in the backend. A slow backend sometimes may not impact the performance of a webpage. But remember a heavy backend means more code to process, as your site grows, which it surely would, the number of viewers would increase, which would mean the number of webpage requests in a given instance of time would increase. A lousy code makes the site heavy, and therefore it can be that your server does not have enough resources to serve all the web page requests. Say your website somehow received 150 webpage requests (technical term is HTTP requests) for a given instance of time. But because your server is incapable, it is possible that only 100 of the web pages are served, rest 50 people see error. This doesn’t happen on new sites in most cases, but when I started my challenge on Optimize My WordPress Website to Load in 927 ms(100% GtMetrix), I decided to do it in the most economical way, and I was using a GoDaddy server which is not fast. So Backend becomes even more important if your server is not very capable. And while I Agree, That no one would ever intentionally add extra code to their side, if it is useless. But, there are instances when a particular method of a particular task can be really slow as compared to another method. This happens specially in WordPress plugins. Sometimes we use plugins for a purpose which can be directly implemented with not much code knowledge. Other times we install a plugin which has dozens of features but we only need one feature others are useless to us, Yet the plugin adds it leading to generation of useless code which needs to execute. As a result we need to avoid some slow plugins, and try to find alternate plugins/ custom code to implement the same feature efficiently. Below is the list of 65 slowest plugins, which are known to slow down sites. I have taken it from Online Media Masters, a great resource to learn about WordPress. You can read the article 65 WordPress Plugins That Slow Down Your Website (And How To Use GTmetrix To Find Your Slowest Loading Plugins)

1. AddThis
2. AdSense Click Fraud Monitoring
3. All-In-One Event Calendar
4. Backup Buddy
5. Beaver Builder
6. Better WordPress Google XML Sitemaps
7. Broken Link checker (use Dr. Link Check)
8. Constant Contact for WordPress
9. Contact Form 7
10. Contextual Related Posts
11. Digi Auto Links
12. Disqus Comment System
13. Divi Builder
14. Essential Grid
15. Facebook Chat
16. Fancy Gallery
17. Fuzzy SEO Booster
18. Google Analytics
19. Google Language Translator
20. Google Translate
21. Google XML Sitemaps
22. Jetpack
23. Leaflet Maps Marker
24. MyReview
25. NextGEN Gallery
26. NewStatPress
27. Real Estate Website Builder
28. Really Simple Share
29. Reveal IDs
30. Revolution Slider
31. Sharebar
32. ShareThis
33. S2 member
34. SEO Auto Links & Related Posts
35. Share Buttons by AddToAny
36. Share Buttons by E-MAILiT
37. ShareThis
38. Social Discussions
39. Socialable
40. Similar Posts
41. Slimstat Analytics
42. SumoMe
43. Talk.To
44. Tribulent Slideshow Gallery
45. Ultimate Social Media & Share
46. VaultPress
47. WooCommerce Customer History
48. Wordfence (disable live traffic reports)
49. WordPress Facebook
50. WordPress Related Posts
51. WordPress Popular Posts
52. WordPress Social Ring
53. WP Bakey (formerly Visual Composer)
54. WP Facebook Like Plugin
55. WP Jump Menu
56. WP Social Bookmarking Lite
57. WP Social Share
58. WP Statistics
59. WP Power Stats
60. WP-PostViews
61. WPML (if you use too many extensions)
62. wpCloaker
63. WPML
64. Yet Another Related Post Plugin
65. Yuzo Related Posts

I shall recommend you to avoid these plugins, this is their list of most popular plugins. Some other plugins can also be there that slow down your site. To check for it, you need a great plugin P3 Plugin Profiler. This plugin scans through your site and finds out which plugins adds up to your loading time. Therefore it’s wise to frequently check through it. Now below I will explain how some simple tasks can take a long route when done through plugin, with an example. Imagine, that you are using a plugin to add Table Of Content, and you want the heading to appear in Red, the plugin provides relevant setting, so you use it. But what happens on Backend? It stores the color in hexadecimal form in  the database. Whenever you load a page, here’s what happens:

• Plugin checks if you want a specific color. ( It sees yes you want specific color)
• Then it calls a function that retrieves the color
• The function goes through database
• It checks whether there is a value specified for that color.
• Then it goes to the function that prints the CSS file.
• The css function takes the value from the function.
• It then adds css syntax and puts value of color as required
• And prints the css in file

All this hard work for just printing this. Though it takes a few milliseconds but sure these things slow down. A custom coded website, will help you achieve it directly. Don’t worry we will give you direct code snippets below, to minimize many such long processes. This all above process simply prints

.toc-text {
color:red
}

Seems stupid right. Your Server is taking an extremely long way to do such a simple thing. Modern servers compute the above steps in less than a millisecond, but many such unnecessary and useless things are culprits in slowing you down. Many such long executions for things that can be done in a really simple way are a nightmare. And I am here to help you get out of this nightmare This all happens because most plugins need to make a decision between performance and Customizability. Customizability can add unnecessary JavaScript, or unnecessary Code to execution, while performance can make minor changes inaccessible. So there are 2 general tips from my side

Good Plugins

Good Plugins are important, sometimes a Good Plugin may not be the most popular one. A good Plugin, is a plugin that provides full functionality of what you want, but doesn’t have any useless features. This is because the useless feature is surely useless, but the code that is contained in the plugin for that useless feature surely has a bad impact on load time. A plugin updated within the past one year is great. Plugins are more of a hit and try. But here’s one piece of advice from my side, that is really useful.

Avoid Duplicate Functionality in Plugin

Many times you would find a really if plugin being used for a really small feature in your site, for example, someone may be using 2 plugins, one for coaching and one for just Images. It’s a crime. Try to efficiently choose plugins that can do multiple tasks for you. For example, Jetpack. Check your current installation may be you are using a plugin for Sitemaps, another plugin for sharing your posts on Social Media, similarly one more plugin to add Sharing Buttons to your WordPress site. This all can make a lot of code. If you are using Jetpack already, then you can substitute those plugins with jetpack Jetpack itself is a really heavy plugin, and it itself can slow down your site. But if you are already using plugins for which Jetpack also has features, then it’s better to use the Jetpack plugin for this purpose. Or if you think installing Jetpack can help you uninstall 3 or 4 other plugins, then give it a try. #GoDaddy #WordPress #optimize #Caching #Siteground #Minify #WP #JetPack