Marketing Tools

How to Speed Up a WordPress Website? – Optimize Duplicate Images and Javascript

Why Do You need to Speed Up Your Website?

People nowadays don’t have too much patience, if the loading time of your website is too long, like 5 seconds, they will leave it. You don’t even have a chance to show them your contents. What’s even worse, Google and other search engines will rank slow websites lower, lower rank in search engines mean less traffic.

As you can see, slow site speed will KILL your website and your business. The good news is, you can boost your website speed dramatically with few easy steps.

You can easily check your website speed at Google PageSpeed Insights or Pingdom Website Speed Test, both will tell your speed and what causing the slow speed.

Before we start to speed up the website, back up your website first, in case something going wrong!!

Update and Deactivate Your Plugins

Go to your WordPress dashboard to check is there any update available, if so, don’t hesitate, update them all. Also deactivate all plugins you are currently not using, if you don’t need it anymore, just delete it.

Too much active plugins is one of the reasons of slow speed, and it’s the easiest problem to fix.

Delete and Optimize Duplicate Images

By default, WordPress saves up to 4 duplicate images in different sizes every time you upload an image to WordPress, some themes even save double the number of duplicate images. If you scaled or cropped images inside WordPress, it won’t delete the original file. You can imagine how many unused duplicate images inside your media library, and it’s the main reason causing slow speed.

Look how many duplicate images it automatically created! These are all same image in different sizes.

 

STOP CREATING DUPLICATE IMAGES

First, we need to stop duplicate images being created. Login to your website, go to Dashboard >> Settings >> Media, change Width and Height of all sizes to 0 and uncheck “Crop thumbnail to exact dimensions”. Click “Save Changes”. Now WordPress will only save the original file you upload.

 

But some themes save more than those WordPress default sizes, to completely stop your website from creating duplicate images, you need to install this plugin, EWWW Image Optimizer. This plugin also optimizes your images automatically.

 

After install and activate it, go to Dashboard >> Settings >> EWWW Image Optimizer, click “Resizes Setting”, uncheck all “Disable Creation” boxes, and click “Save Changes”. This will stop any duplicate images being created.

 

You may wonder if EWWW Image Optimizer can disable all creations, why you need to go to “Media” and change all the Width and Height, that’s because EWWW Image Optimizer can’t stop thumbnail from being created. Since EWWW Image Optimizer can disable other sizes, you can only change the Width and Height of thumbnail

DELETE DUPLICATE IMAGES

Using plugin

Now let’s see how to delete old duplicate images. The easy way is using the plugin, DNUI, DNUI stands for “delete not used image”, you can know what it does.

 

Install and activate it, go to Dashboard >> Settings >> DNUI, click “Options”, and check “Backup system”. Backup is optional, but I will recommend you to enable this.

 

After that, click “Images”, it will show all unused images. You can find “Delete All” option, never use that, because what “unused” means is those images are not used in any pages and posts, but it may be used in feature images, site icon or menu header, so the proper way to delete images is manually delete them.

I have a trick that can make this process much easier. By default, it will only show unused images, on the top left you will find “Images used are hidden, click here for show them”, click it and show used images. Now if you see images with the same name but different status, you can delete those “Not used”, but if you find images with the same name and the same “Not used” status, there’s a chance at least one of the images is being used somewhere in your website, so better keep those images.

This trick only works if you have already deleted all “unused” images not “unused in pages and posts” images, so you won’t be confused by the real status of these “Not used” images.

The images you deleted will be in “Backups”, go to “Backups” and you can delete or restore them.

 

There’s an issue about DNUI, when I deleted those images and went to Media Library, I found my duplicate images were still there, so I went to DNUI again, but it said it’s all cleared. I checked my site speed, it improved slightly. I felt like those images were still there.

This issue may only happen to me, anyway, if you have the same issue or you don’t want to use the plugin, this is how I fix it, the hard way, but will 100% work.

Delete manually

Although we are going to delete them manually, I still have tricks that can make your life so much easier. I like to keep everything in order, we are going to delete images pages by pages, posts by posts.

Go to Dashboard >> Posts, edit your first post. Go through each image, and save them one by one to your desktop. Remember to name them in order, for example, the first image will be named “1”, the second one is “2”, and so on.

 

Use this online image optimizer to compress those images you just downloaded from your site. This is the setting I like to use, you can experiment with different setting. The goal here is making the size of images as small as possible.

 

Now drag those optimized images to your “Edit Post” window. Since you have already stopped duplicate images being created, WordPress will only save the optimized image you upload.

It’s time to replace old images. Add images based on your order, you can now rename the image’s title.

 

In order to make the image size looks the same, you can add the new optimized image in front of the old one, then adjust the size of the new image to fit the old image. After that, you can delete the old image from your post.

 

Go through each image and replace them. Once you’ve done, click “Update”.

Repeat the process until all images in your pages and posts have been replaced. Don’t forget to replace your header media and feature images if you have, you can access them in your Media Library.

Back to Dashboard >> Media >> Library, and view your images in list mode.

 

If you have installed EWWW Image Optimizer, you can easily locate all old duplicate images. New images will only have “1 size compressed”.

 

Select all old images and apply “Delete Permanently”.

 

Congratulation! You just fixed the biggest problem that causing slow speed. Your site speed will be drastically improved. Most of the time, images optimization is enough, but if you want to boost your website speed even further, please continue reading this post.

Remove Render-Blocking JavaScript and CSS

Optimize your images can make your speed from 30 to 95, remove render-blocking JavaScript and CSS can make your speed from 95 to 100. Although it’s nice to have maximum website speed, render-blocking JavaScript and CSS are not something that can be easily removed in WordPress, in order to remove it completely, we have to custom code every page from scratch. Even without removing it, it’s still possible to make you Google PageSpeed Insights number to 99.

Unfortunately, I’m a non-tech guy, I know nothing about coding, I can’t teach how to eliminate render-blocking JavaScript and CSS completely, but I know a plugin that can do 90% of the job, the Autoptimize.

 

Once you install and activate it, go to Dashboard >> Settings >> Autoptimize, and click “Show advanced settings”.

 

You can copy my setting, this is the setting works best for my website, or you can play with different setting to find out which one works best for you. After you change your setting, scroll down and hit “Save Changes and Empty Cache”.

 

This plugin can remove most of the render-blocking JavaScript and CSS, and it’s quite enough.

Like what I’ve said, too much active plugins is one of the reasons that cause slow speed, so if you find you speed drop after installed these plugins, you better deactivated or delete it.

Other Ways to Boost Website

Some claims that website database, like revisions, auto drafts, unused comments, etc., can also slow down your website, yeah it could, but I found it’s not the determining factor. Anyways, this is how I deal with it, again, using another plugin, the WP-Sweep.

 

Install and activate like always, then go to Dashboard >> Settings >> Sweep, you can sweep them one by one, or scroll down you can see “Sweep All”. Remember to back up your website first, because this action is irreversible.

 

Conclusions

By now, you should have improved your website speed drastically, if you have any problems or questions, just leave a comment below, or you have better ways to improve website speed, please share it in the comment section, I would be happy to learn from you.

Also, if you find this tutorial is helpful, share it with your friends!!

 

 

Share this:

Leave a Reply

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