Have you ever wondered, "How to Make My Site Load Faster?"
How To Make My Site Load Faster is something you may have wondered, but never knew how.
Herein lies the nuclear solution, it can be quite tedious but it WORKS.
Follow this recipe for success step-by-step and you will achieve twice your speed. This will vastly improve your website loading speeds on both desktop and mobile.
Put on your seat belt, strap in tight and get ready…
Get ready to increase your speeds from 39 to 99!
There are affiliate links within this post. What this means is that if you decide to purchase anything through one of my links, I'll be rewarded with a small commission at absolutely no extra cost to you. This small commission helps me run and maintain my website.
Step 1: Get All Your Tools in Order
Here is a Master Checklist of all the items you will need ready before getting started:
1. An activated website in WordPress
2. Yoast SEO or equivalent image optimizer plugin activated
3. Google Page Speed Insights or equivalent
4. An Excel spreadsheet or equivalent
5. A pencil and notepad
Note you can have your website hosted by a hosting provider such as GoDaddy, Host Gator, but for the simplicity of this tutorial I will limit this training to those hosts using managed WordPress.
You definitely want a head start with an image optimizer plugin activated, EWWW Image Optimizer is the default one I recommend.
After logging into your WordPress dashboard make sure it is first activated.
Google Page Speed Insights will be your guide and will tell you how to improve your speed. Uncle Google knows – listen to the Master!
The Excel spreadsheet (or Google Doc) will be to record detailed data on ALL of your images – believe me you are going to NEED this to keep track of all your images especially if you have a site with boatloads of images like mine. (My Site has over 700 images!)
You will need a pencil and paper near you to jot down temporary notes while you are working about your specific images i.e., file name or image #, image URL, new image URL, file size, image sizes, your thought about an image etc. before you enter these line by line in your spreadsheet - just in case you walk away from your computer, get distracted, or are mauled by a wild animal (lol!)
All kidding aside, there are lots of moving parts going on here and it’s WAY too easy to get distracted, and miss one critical step or lose valuable information, so you will thank me later.
Now that you have all the items from your Master Checklist in order on your computer or by your side on a piece of paper, it’s time to get started!
Step 2: Log Into Your WordPress
1. First, log into your WordPress website by following the instructions of your hosting provider.
2. Once successfully logged in this will take you your WordPress Dashboard.
3. Next, check the far left column for any WordPress recommended updates.
4. Deactivate any and all plugins you don’t need to use, and update all plugins you will be using by clicking on “update” inside the plugin box.
My Accelerated Mobile Pages (AMP) plugin is now updated!
Step 3: Optimize Your Media Settings
We are now going to take a MOST important step by optimizing our Media Settings in our WordPress dashboard.
Did you know that by default WordPress saves up to 4 duplicate images of DIFFERENT SIZES inside your Media Library every time you upload an image to your site (your Media Library is the central “storage place” that holds all the images you upload to your website) – and all of these extra images are clogging up the lanes and making your site load very slow?!!
And get this. 99% of all website admins unknowingly are NOT even using these extra images! So why keep them, get rid of them! We need to delete all the extra image sizes we don’t intend to use.
If you have not uploaded any images to your site as of yet, you are in luck! Congratulations! Take the following simple action step and you will be setup for the ultimate image optimization automatically!
However, if you have already uploaded several images or HUNDREDS of Images like I did (after all, through frustration this is how I discovered this technique), you will need to CORRECT this immediately, as optimizing your media settings will only eliminate duplicate images for all FUTURE uploads, not past ones already present in your Media Library.
Don’t worry, if the latter applies to you shortly I will show you how to fix it.
Yes it is tedious but rather simple. But definitely worth the effort. And your reward will be superfast load times. So let’s take this next step.
Here’s how to STOP WordPress from producing unnecessary duplicate images of 4 different sizes in your Media Library ANYTIME you upload NEW images to your Media Library in the future.
1. In the far left side Column of your WordPress dashboard, scroll over Settings and click “Media” (Settings > Media). This takes you to Media Settings.
2. In Media Settings, reset all the image sizes to ZERO. Uncheck the box “Crop thumbnail to exact dimensions”
3. Click Save Changes.
This simple “zeroing out” in Media Settings will eliminate WordPress from creating all unnecessary duplicate sizes of images for your future uploads in Thumbnail, Medium, Large, and Full Sizes.
SCENARIO # 1:
IF you are just uploading images for the FIRST TIME on your NEW website or a long existing website, you are now ALMOST DONE. Once you check your results through Google Page Speed Insights and it confirms they are loading fast, this lesson will be complete and you don’t need to go much further.
So here is what you should do.
After zeroing out your Media Settings, and loading ALL of your FIRST TIME images onto your Pages and Posts, do the following.
Skip ahead and continue to Step 6 “Identify Slow Pages and Determine Causes through Google Page Speed Insights” This will allow you to do a FINAL CHECK on Page Speed Insights for all the Pages and Posts site speeds where you uploaded those images.
The good news: you will likely only have none to a minimum number of images needing further optimizations
SCENARIO # 2:
Unfortunately the majority of us reading this training do not fall under the prior Scenario #1 category and will have a GREAT DEAL more work ahead of us:
We are Scenario # 2 and will have many images already uploaded in our Media Library of WordPress that require optimization, and we will need to eliminate and optimize OUR EXISITING IMAGES ONE IMAGE AT A TIME IN OUR MEDIA LIBRARY.
There is no way around this. That’s why we need this training. So if your site already contains many of the same images in different sizes (as was me), continue to Step 4 of this lesson.
Step 4: Create a New Spreadsheet (or Google Doc) and Label
The Next 4 Steps are the Most Important Part of the Lesson – and definitely the most tedious part.
Hang in there with me and please take your time with each step. There is quite a bit of necessary record-keeping here in the following 2 steps that can try one’s patience - but it will certainly all be worth it in the end.
After you complete this entire process, you will periodically want to repeat Steps 4-7, since subsequent images you post and future plugins you upload, activate and deactivate will cause your Page Speed Insights to change.
But let’s hold this off for now. I will go over this repeat process later in this tutorial.
For now, have your pencil and paper ready, you will jotting down notes.
1. Open a NEW Excel Spreadsheet (or Google Doc)
This is where you will be tracking and recording ALL the vital detailed information for the following:
- New image files you will be uploading to your Media Library
- Prior uploaded files you will be deleting permanently from your Media Library
- Prior uploaded files you will be revising in your Media Library
2. Create a tab called “Image List” in the new Excel Spreadsheet
3. Open “Image List” tab, and create column labels as per the screenshot.
Open your new Excel Spreadsheet (or Google Doc), and in your “Image List” tab create column labels for all of the following NEW information:
- Image CAM # (essentially the image number assigned by your camera)
- New Image URL
- Old Caption Name
- Revised Caption Name
- All Image column details: Format, Align, Size, Orientation
- Image Size (in Pixels)
- Image Size (KB)
- Original Image Full Size
- Link to URL
Although you may use all of my exact labels for your spreadsheet from this screenshot for convenience, you don’t need to copy everything or be as detailed as mine. You can create your own labels. The main thing that matters is you label all relevant information in such a way that you can later analyze, understand, and refer back to.
4. Create a 2nd tab called “Images to Optimize” in the new Excel Spreadsheet
5. Open “Images to Optimize” tab, and create column labels as per the screenshot.
Open your new Excel Spreadsheet (or Google Doc), and in your “Image to Optimize” tab create column labels for all of the following NEW information:
- Old Image #
- % Savings
- New Image #
- Date Revised
This is the future place you will keep track and revise data for Google Page Speed Insights recommendations. Don’t worry what they stand for yet, only label these columns for now and leave them. We will get back to them.
After creating both tabs in this document, save it and keep this spreadsheet (or Google Doc) open in a separate place and out of visibility for now. We will being going back to it soon.
Go to “Next Section” and let’s move onto Step 5.
Step 5: Document all details of EVERY IMAGE in your Spreadsheet by Pages and Posts
This Excel spreadsheet where you create your Master List will be one of your most essential tools.
Without having this Master List to keep a record of every change in real-time while you are working, you will easily lose track of all your data revisions, including new image file size changes, inadvertent duplicated images, not deleted unwanted images, and much other essential revised data.
Any future revision you make in real-time, whether it is a file size change, caption name change, or URL change, etc., will be updated on this spreadsheet.
1. In your Word Press dashboard, in Upper Top Left scroll over your Site Name and click “Visit Site.”
On your website, click on each custom link on your Home Page, and go through all of your images one-by-one, page-by-page, and post-by-post, and identify its Image CAM # (the file # assigned to the image by your camera or device).
Another simple way to do this is to locate the original image file you uploaded to your website on your computer or external drive, and on a piece of paper jot down the file name and Image CAM #, and any other “memory marker” associated with that file. Do this for EVERY image on your website.
2. IDENTIFY and LIST each image as a separate line item entry in your “Image List”.
Follow these guidelines (see screenshots):
- LIST all images to the right of their associated Pages / Posts they belong to, writing each unique Image CAM # in the far left column, caption name (your own identifier), size in pixels, and the original FULL image size.
- For now, leave all the other columns blank (i.e., New Caption Name, format, align, size, orientation, link type, Link to URL)
Now that you have created your Complete List, EVERYTIME you delete, re-size, or replace one of the images on your website, you will update an entry by revising the line item of that image for your Page/Post.
Once you have completed and saved ALL of your image line item entries, click “Next Page” to Step 6.
Step 6: Identify Slow Pages and Determine Causes through Page Speed Insights
We now need to go to Google Page Speed Insights to see how fast our pages are running, to check for slow loading pages and posts, and to find out what is making our pages and posts run slowly.
1. To get to Google Page Speed Insights, in a separate tab go back to where you logged in to your website, go to the bottom right and click “Details”
Note: This "Details" button is from my hosting provider. Your provider may have an equivalent to this "Details" button, search in your hosting providers Help section to identify it. Otherwise, you can bypass this step by opening up a separate tab, and just going to Google Page Insights.
2. Scroll down to Page Insights where all of your pages and posts are listed, and click “Refresh” on each individual page/post.
Do not miss any of them. An updated Page/Post speed score will appear next to the Page/Post.
*Important Note: The first time you ever go to Google Page Speed Insights for your site it will show "Check" next to the web page. After clicking on "Check", every time thereafter it will show "Refresh" next to that same web page (see Image after #2 below)
3. Find the Pages/Posts that you would like to improve, and click on the Big “G” next to each one on the far right.
This is where Google will tell you what is wrong.
4. Scroll Down and click on Optimize Images “Show How to Fix” to find out Google’s recommendations
When inside “Optimize Images”, Google Page Speed Insights will tell you the file(s) that is making your page run slow. This is very important information to record right.
5. Identify the file(s) requiring optimization that are causing your Page to Load Slowly
Google Page Speed Insights will tell you.
Jot down ALL of this following information on your Piece of paper,
- Name of the Image file(s) or the Old Image #
- The associated Page(s) or Post(s) where this image is located, i.e. “About”
- The % Savings or reduction in data once the image is optimized
- Any personal notes associated to it to help you identify it. You will see why this is important later. It can be anything like “the original 1024 x 768 version of the file.” For now just do it.
(screenshot of 8e - the Optimize Images)
Feel free to copy this if you like.
6. Now go back to your “Images to Optimize” tab in your Spreadsheet document, and transfer all of the image information you wrote onto this separate tab in your Spreadsheet (or Google Doc).
Go to “Next Section” and let’s move onto Step 7.
Step 7: Optimize Your Images One-by-One
Here comes the Most Important part of the lesson – this is the systematic way I’ve discovered to get all your pages loading FAST.
My gf told me I was crazy to share this information for free, but I made it and am one who will always keep my promise.
But nothing comes without a price - there is definitely a good deal of manual labor, at times annoying record-keeping, and quite a bit of cross-checking involved here. Then I would also highly recommend to recheck everything in Steps 7-8 AGAIN – and to repeat this exact process by doing a maintenance check on your site at least once per month.
So here are 2 Options I will demonstrate that will accomplish the same result, although I do have a preference (Option 2).
Have your pencil and paper ready, you will again be jotting down notes
Option # 1: Media Library
On your WordPress dashboard in the top left column, go to your Media Library by clicking on Media and then Library (Media > Library)
This will bring you to all your images in your Media Library.
Here you can certainly click on the actual image thumbnails and this will take you to a page that will identify all the information about the image file.
But I have found an easier, more intuitive way to accomplish the same end. And make all the necessary file revisions without having to leave your page screen.
I prefer to use Option # 2. Here’s how I do it.
Option # 2: EDIT Pages and Posts
1. Locate the Page(s) or Post(s) on your website of the image(s) you want to change.
Since you accomplished the earlier step correctly, this information can be found in your “Image List” of your spreadsheet.
2. In the far left column of your WordPress dashboard, click on Pages > All Pages
Alternatively, you can also start by clicking Posts > All Posts
This displays All Pages (or posts) of your site
(screenshot of 14a - Pages Al Pages)
3. Go to the Page you want to “Edit Page” by clicking “Edit” next to the Page Name
For example, this takes us to the “Beekman Kitchen” Page, showing the image we want to make changes to.