How To Make My Site Load Faster

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 2^nd 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 #
• Page
• % Savings
• Optimized
• 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.

4. Click on the image, and the “Pencil Icon” will appear. Click on the “Pencil Icon.”

5.  On “Image Details” page, enter “Caption”,“Alt Text”  and Display setting.

Click on “Edit Original”

This takes us to “Edit Image” where we can see the image is 1024 x 768

6.  Cut this dimension by ½ (512 x 384) and click on “Scale”.

This is a great tool and “rule of thumb” as it will change both Width and Height dimensions proportionally by changing only one of the values.

The image is now SAVED in its new Width x Height dimension (pixels), but after updating the image will appear nearly the same visual size as the original even though it has been drastically reduced in file size (kb).

7. Click the BACK button to go to "Image Details".

8. Click “Update” in Image Details

9. Now click “Update” on the main Edit Page

​

10.  Click “View Page” on top of the WordPress dashboard to view the page as all your viewers will view it.

​

The Main Image STILL looks GREAT, and its less than ½ its original file size. This image is now OPTIMIZED.

11. Go to Media Library to visually locate ALL duplicate images.

Click on the image to open it in “Attachment Details” screen.

12.  Click “Delete Permanently” in Attachment Details screen for ALL duplicate images in unused different sizes from your Media Library.

13.  Repeat this “Delete Permanently” for all duplicate images in their unneeded sizes.

Only keep the size(s) of the images you are using. Make sure all extra images are deleted in this manner from your Media Library, and note the revised deletions and the revised detailed information on your spreadsheet.

Congratulations! You have hung in to nearly the end – we are almost done!

Now we will next re-check ALL of our work, and refresh our Google Page Speed Insights page-by-page to see if we have succeeded in our efforts.

Finally, we will record ALL of our FINAL results in our spreadsheet.

If we have succeeded for the majority of our pages/posts (there will be anomalies occasionally) by reaching an average Page Speed for Desktop and Mobile of 85, we are now complete.

We should still repeat this “Turbo Charged” Site Speed test every month or so to improve and maintain this result, as various factors can always cause changes.

If we have not succeeded, we will REPEAT Steps 4-8 (even more than once if necessary) and “drill down” until we achieve the result we desire.

Very exciting! 

So if you are ready, go to “Next Section” and let’s move on to Step 8.

Step 8:  Re-check All Your Work – Record the Result                                      

I believe we all best learn by example.

So for this reason, for this final step 8 I will demonstrate to you how I re-check my work – and you will be able to do exactly the same.

First here is a 4-Step Breakdown Review describing the complete process Steps 4-7. Then I will lay out to everyone my 2-Step Final Re-check to confirm the process WORKED.

4-Step Breakdown Review:

1. Using this same process from Step 7, here I used a different image from my website and then compared the before-and-after manual image optimization results on Page Speed Insights.

My new image “Spa Display Slideshow” located on the “Custom Furniture Design” page, had the original uploaded pixel size dimensions of 2048 x 1536 and a file size of 4 Megabytes.

2. By going to Media Library, perusing the page carefully and clicking on the thumbnail image “Spa Display Slideshow”, I was able to confirm all of the information on a page called Attachment Details.

Indeed as you can see, Attachment Details shows my original image had pixel size dimensions of 2048 x 1536 and a file size of 4 Megabytes.

3. After repeating the entire process Steps 4-7, Page Speed Insights identified and correctly confirmed this new image “Spa Display Slideshow” was severely slowing my Page Speed both in Desktop and Mobile.

4. Later re-checking Google Page Speed Insights by clicking on the “Big G” and scrolling down to Optimize Images and clicking on “Show How to Fix”, on this new page Google is demonstrating to me by manually optimizing this image I could reduce this file size by 92% (a gain a 92% savings). 

This is how I checked all of my before-and-after image op statistics. Note that although I have used only 1 new image as an example here, I repeated this same process for ALL of my images on my website.

After first documenting all of my images line-by-line in my spreadsheet, and then re-scaling the new image as covered in Steps 4-7, I finally went back to Google Page Speed Insights AGAIN and rechecked my Page Speed scores using this 2-Step Final Re-check.

As with the new image "Spa Display Slideshow" used here by example only, I repeated these same manual optimization procedures and processes for ALL 700+ of my images inside my Media Library, to achieve AMAZING speed results!

2-Step Final Re-Check:

1. On WordPress dashboard in the top left column, go to your Media Library by clicking on Media and then Library (Media > Library)

Remember that in Step 6, Google Page Speed Insights located this image as a source of our slow page load times.

According to my original “Image List” data, this image is on my “Custom Furniture Design” page, and its original pixel size dimensions are 2048 x 1536. The size of the file was 4 megabytes.

Also remember that we found this original image in our Media Library, and confirmed THESE results were correct from our ORIGINAL Attachment Details.

Simply by later re-scaling this new image to 512 x 384 as demonstrated in Steps 4-7 helped reduce our image size from 4 Megabytes to 362K.

Now in doing so, we have greatly enhanced our Site

All of this was achieved without any reduction in the clarity or perceived visual size of the image. Here are the confirmed results from my FINAL Attachment Details.

2. Revisiting Google Page Speed Insights after reducing the image(s), we “refreshed” “Custom Furniture Design” Page and here were the results:

SUCCESS!!

Site Speed is now 99 out of 100 both in Desktop and Mobile! 

Amazing!! Woo Hooo !!!!

I must admit, we have covered an enormous load of material in this tutorial, with many complex steps and a plethora of data.

For further related reading that can enhance your speeds even further, please refer to my other articles Speed Up Page Loading for Your Website. 

You might also want to read how you can Delete Plugins or Deactivate Plugins to Increase Site Speed to even give you an additional boost in your page load speeds.  

Please take your time with this highly-detailed lesson and review IT as MANY times over as needed.

The devil is in the details. Once you start taking action by doing, soon enough YOU TOO will be crushing your Page Speed Insights speed scores by having ALL your Pages loading SUPER FAST from 39 to 99!

Thank you for your participation in this course, and please feel free to leave your comments here.

And please make a "Comment" below click "Like" if you found this tutorial useful.