Menu
Build Better Website: The Reverse Engineer Method Revealed Reverse Engineer Framework 2.0 Say NO to Slow Websites

Boost WordPress Speed

Every 1-second delay in website loading time can have a significant impact on your conversion rate. In fact, it’s been found that a 1-second delay can lead to a 7% reduction in conversions. This might not sound like much, but when put into the context of an e-commerce business, it can mean substantial monetary loss. 

 

When you use a lot of images, your website tends to slow down, especially in the case of self-hosted websites, like WordPress sites. Nevertheless, if you are using ClickFunnels, Kajabi, Leadpages, or other SaaS web platforms, optimization is commonly already in place, so there’s less to worry about. Therefore, we will discuss how we can optimize websites with numerous images in order to improve website speed.

1. HTML/CSS/JS minification & compression

Your WordPress site is made up of a bunch of codes. Imagine your house with lots of furniture inside. Sometimes, the furniture takes up too much space in the house, and you can’t really move to the kitchen fast enough.

That’s kind of like how HTML, CSS, and JS work. They are all different kinds of instructions that tell your computer how to make a website look and work properly. But sometimes, these instructions can take up too much space, and that makes your website slow to load.So, to fix this problem, we use something called “minification and compression.” It’s like taking all the furniture in your home and rearranging them, so they take up less space.

2. Convert images to WEBP

WebP is a modern image format that is designed to provide superior image quality with smaller file sizes, which makes it ideal for use on websites.By converting your images to the WebP format, you can significantly reduce the file size of your images without sacrificing image quality. This means that your website will load faster, which can improve the user experience and even improve your search engine ranking.

How to use it?

To set up the WebP Express plugin in WordPress, follow these steps:

Step 1: Install the Plugin

  1. Go to the WordPress dashboard.
  2. Navigate to Plugins > Add New.
  3. Search for “WebP Express”.
  4. Click Install Now on the “WebP Express” plugin card.
  5. Click Activate once the installation is complete.
 

Step 2: Configure the Plugin

  1. After the plugin is activated, go to Settings > WebP Express.
  2. On the settings page, you have options to configure the plugin according to your needs.
    • Operation mode: Select “Varied image responses” unless you want to use it in another mode.
    • Destination folder: This is where the converted WebP images will be stored. “Mingled” usually works fine.
    • File extension: Usually “Append .webp” is a safe option.
 

Step 3: Save Changes

  1. After adjusting all settings to your preferences, scroll down and select Save Changes.

3. Compress image sizes

Compressing image sizes is an important step to speed up a WordPress website. Images are often the largest files on a website, and reducing their size can significantly reduce page loading times. I have seen numerous times a lot of e-commerce owners uploaded their recently captured 2.5 mb photoshoot images into a the product catalogue without compressing it. Compressing images involves reducing their file size without sacrificing quality. This can be done using an online image compression tool such as TinyPNG and compresspng.com.

One question! After you’ve converted your images to WebP format to speed up your WordPress site. Does that mean you can skip the step of compressing your images altogether?

The short answer is no, you still need to compress your images even after converting them to WebP format. While WebP is great at compressing images, it’s not a magic bullet that can fully optimize your images without additional effort. By compressing your images, you can further reduce their file size and make them load even faster. Plus, smaller file sizes mean less strain on your server and a better user experience for your visitors.You can also perform image compression automatically every time a media image file is uploaded to your site using a plugin (Will be revealed shortly!).

4. Utilize Cloud Delivery Network (CDN)

A content delivery network helps websites deliver their content, like pictures, videos or text, to people who want to see it. Instead of sending the content directly from the website’s server to the person’s computer, the content is sent to the closest CDN server or node located closer to your web visitors. Think of it like a Amazon FBA services which store your products in multiple warehouses around the globe and deliver them to your customers in a short period of time.

Let’s say you’re visiting a website that is hosted in the United States, but you’re accessing it from India. Without a CDN, your request for content would have to travel all the way from India to the United States to retrieve the content from the website’s origin server. This can result in high latency and slow loading times, especially if the content is large, such as a video or high-resolution image.

However, if the website uses a CDN, the content will be cached on servers located in India or nearby countries. When you request the content, the CDN will route your request to the closest server, which could be in India or another nearby country. This reduces the distance the content travels, resulting in faster loading times and a better user experience. Unlike all the methods to boost website speed mentioned above, CDN is a paid service. The most affordable & fast CDN service providers out there are Bunny.net & 10Web.

How to use it?

Absolutely, here are the steps to set up Bunny.net CDN on a WordPress site:

Step 1: Register an Account on Bunny.net

  1. Go to Bunny.net.
  2. Click on Get Started.
  3. Fill in your full name, email, and create a password.
  4. Agree to Terms of Service and Privacy Policy after reading them.
  5. Click on Create Account.
  6. You will receive a confirmation email. Find this email in your inbox and click on the link provided to confirm your account.
 

Step 2: Create a Pull Zone on Bunny.net

  1. Log into your new Bunny.net account.
  2. Navigate to “Pull Zones”.
  3. Click on +New Pull Zone.
  4. Enter a name for the Pull Zone, enter your WordPress website URL in Origin URL, and choose a Pricing Tier.
  5. Click Add Pull Zone.
 

Step 3: Install and Activate BunnyCDN Plugin in WordPress

  1. Go to your WordPress dashboard.
  2. Navigate to Plugins > Add New.
  3. Search for “BunnyCDN”.
  4. Click Install Now and activate the plugin on your site.
 

Step 4: Configure BunnyCDN Plugin in WordPress

  1. Go to Settings > BunnyCDN.
  2. Enter the hostname provided in your Pull Zone (it should look like yourzone.b-cdn.net).
  3. Click Save Changes.
 

Now, Bunny.net CDN should be running on your WordPress site. Browse your site and check if your site’s static contents (images, CSS files, and JavaScript files) URLs are being rewritten to your Bunny.net Pull Zone URL (you can inspect elements on a page to verify).

5. Enable Caching

Website caching is a way to make your WordPress website faster. It works by creating a copy of your website and storing it on your computer or server. When someone visits your website, they get the copy instead of having to wait for the website to load from the server. This makes the website load faster and helps reduce the strain on the server.

There are several kinds of caching available to boost your website speed.

1. Browser caching: This is like a cookie for your website. When you visit a website, your browser saves some of the data so that the next time you visit that site, it loads faster. 

Think of it like your browser saying, “Oh, I remember this site! I’ll just grab the stuff I need and we’ll be good to go!”

2. Server caching: When a bunch of people try to visit your site all at once, the server gets overwhelmed and slows down. But with server caching, your server keeps a copy of your website ready to go, so it can quickly serve up that copy to all the visitors. It’s like having a VIP section for your website visitors.

3. Content Delivery Network (CDN) caching: As explained previously, it is like having multiple warehouses for your website. When you use a CDN, your website’s files are stored on servers all around the world. So when someone visits your site, the CDN figures out which server is closest to them and serves up the files from there. It’s like having a warehouse full of your website’s stuff all over the world, so it’s always close by when someone needs it!

6. Remove unused & bloated plugins

Plugins can add all sorts of amazing functionality to your site with just a few clicks. But, they can also slow your site down to a crawl if you’re not careful. 

So, how many plugins are too many?Well, let me tell you a story. Back in the day, when I was just a fresh-faced WordPress user, I thought more plugins meant more fun. I loaded up my site with a whopping 40 plugins. As a result, my site was as slow as a snail on a hot day. This is where the stigma of slow WordPress sites comes from – the infamous plugin overload.

Before you go on a plugin-deleting rampage, let’s get one thing straight: not all plugins are created equal. Some plugin developers have clean and efficient code that won’t slow your site down. Others? Not so much. So, how do you know which plugins to keep and which to toss?

The general rule of thumb is to limit yourself to 20+ plugins maximum. But even that number can be too high if you’re not careful. Before installing a new plugin, ask yourself: do I really need this? Will it add real value to my site? And can I outsource this to a SAAS provider and integrate them into my WordPress instead? For example, rather than installing email marketing and CRM plugins, just integrate the site to Mailchimp or Sendinblue which provides better solution and ultimately reducing the number of plugins installed.

In short, plugins can be a powerful tool in your WordPress arsenal, but like all powerful tools, they must be used wisely. So, take a deep breath, assess your plugin situation, and remember: with great power (and great plugins) comes great responsibility. 

7. Use a lightweight theme

Let’s talk about themes. Let’s face it, nobody likes a slow site. So, what makes a theme lightweight? Well, for starters, it’s not loaded down with a bunch of unnecessary features and bloatware. It’s sleek, it’s simple, and it gets the job done. And when it comes to lightweight themes that play nice with page builders, two names come to mind: Astra and Hello. Astra is like the Usain Bolt of WordPress themes – lightning-fast and built for speed. Plus, it’s compatible with all the major page builders, so you can customize your site to your heart’s content without sacrificing performance. Then there’s Hello theme developed specifically by Elementor for Elementor users. It’s so lightweight and minimalistic. But don’t let its simplicity fool you – Hello is still a powerful theme that can handle all your page-building needs. So, if you want a fast site that doesn’t skimp on customization options, go for Astra. And if you’re all about that minimalist life, give Hello a try. Either way, you can’t go wrong with a lightweight theme that’s compatible with your favourite page builder.

Visit Astra Theme >
Visit Hello Theme >

8. Choose your hosting plan carefully

I think we don’t need to go over this again as it has been covered in the first module. I’m putting it here just to emphasize how important this is 🙂

All in One Solutions to Optimize WP Speed

Previous Topic
Back to Lesson
Next Topic

Course Content

Course Home Expand All
Course Q&A
Ask Question

Discount:

30% OFF

Quick Menu

My Account

Change passwords, check learning progress, etc.

Support

Report a problem or an issue?

Sign Out

See you again!

  • Course Q&A
Do I have to purchase 10Web hosting to implement the Reverse Engineer Method 1.0 ?

Not necessarily. Although the Reverse Engineer method requires you to use the AI Builder by 10Web, You can take advantage of the free trial that 10Web offers for 7 days. In our experience, the AI recreation process should not take more than 3 days. Then, you can easily transfer your design to your website hosted on a different hosting provider by referring to the ‘Transfer your Design’ topic found under Module 3. If you wish to use AI Builder for more than 7 days, you can definitely subscribe to their monthly plan.

Right now, you won’t see a place to put a coupon when you move from the free trial to the pro plan. But, don’t worry! Just reach out to the support team and they’ll help you use your coupon.

Kindly head over to our ‘Contact Us’ page and share with us what’s bothering you. We’re here to help.

The purpose of the reconstruction step is to fix any inaccuracies the AI builder might leave when recreating sections. I’ve noticed that, for other sales pages, the AI builder tends to have a hard time recreating the page. Hence, we use the reconstruction step. We add a new section below the one AI worked on, and then move the widgets into this new section. This way, it offers us a point of reference to match the intended design that we wanted even if the AI builder misses something.

I get it, it can be tricky, especially for beginners. That’s why I recommend trying out the grid layout or CSSGrid. Most of the time, design needs are box-shaped or grid-like. It makes things much easier! So, save the flexbox container for those occasional layouts that you just can’t create with a boxy design. 

When the AI builder recreates a page, it often places containers inside other containers – a process we call “nesting.” This can make finding which container holds your background image quite a challenge. But don’t worry, that’s exactly why we do the reconstruction; to create a much simpler layout. You can use the navigator to check how many containers have been created. This will make finding your background image a whole lot easier.

Sure thing! A base template is designed to help people from non-designer’s background establish their overall style, especially when they’re not experienced designers. Think of it as a starter kit for your website design. A base template usually includes around 60% of your site’s overall look. You can then pick up design elements such as color schemes or typography styles from the base template to get your own design started.

This is just a suggestion. It’s totally fine to use any tool you like for pre-planning your website. However, this planning process really helps you visualize your site, especially when merging different websites together. Trust me, it can get quite messy without some planning!

The AI builder is still relatively new and has its limitations. But here are few things that we can do:

  • Try again. Recreate the page once again.
  • Make certain you are recreating a page design which follows all the key criteria.
  • Try recreating a shorter landing page next time.
  • If it still doesn’t work. Don’t sweat it and reach out to the support team. They can give clarification to you.
 

Additionally, there’s no need to stress about it, as we’re going to reconstruct the sections during the next step.

  • Ask Anything

9 Responses

    1. If you encounter any video playback problems on your mobile device, please consider viewing this course on laptop, or desktop. We are actively addressing issues to enhance the learning experience.

  4. Which is the difference between the 2 services that they provide, one is PAGE SPEED BOOSTER and the other one is PLATFORM, how to know which we should pick.

    1. Hi Raul, good question. Page Speed Booster is for those who host their WordPress website with another hosting provider, while the platform itself includes hosting and Page Speed Booster as part of a single package in their offerings.If you wanted to use the AI builder, you should opt for the platform package 🙂

Leave a Reply