7. Have you optimized images? (99% of the load time is from images)

Posted in How to speed up WordPress: The Complete Guide

 a. Serve scaled images

 b. Specify image dimensions

 c. Combine images using CSS sprites

 d. Ensure URL’s are stored locally and not being pulled from remote servers

 e. Use a CDN

 f. Searching for unnecessarily large images & how to resize

 g. WP Smush.it or Prizm Image Imsanity

 

 

A. Serve scaled images

 

See Step 6. – B. GT Metrix

 

B. Specify image dimensions

 

Make sure to add your width and height attribute when adding images to your site. If you’re using WordPress – the width and height attribute will already be set.

 

C. Combine images using CSS sprites

 

This is not recommended as the time it takes is not worth all the work to get it done. If you really want to do this, use – http://csssprites.com/  http://spriteme.org/

 

D. Ensure URL’s are stored locally and are not being pulled from remote servers


Make sure to load your Images from your own server.
A super easy tool to do this –

Add the Plugin – Cache Images from Matt Mullenweg
https://wordpress.org/plugins/cache-images/ – it is old, but it works

In WordPress à Tools à Cache Images

There are 2 buttons – Use them both.

As the system runs, it will look for images that are not stored in your WordPress. Install and cache them to your own server.

Sometimes, you have to run through the system, but overall it works well.


E. Use a CDN

This will always speed things up if it is setup well.

1) Get a CDN from MAXCDN

2) Add https://github.com/wmark/CDN-Linker to your WordPress setup

3) Add the URL that was given to you by MAX CDN to CDN Linker – Test the links and make sure they work.

If you want, you can also setup a CNAME. Read through this post – http://www.markdescande.com/setup-maxcdn-on-wpengine/

 

F. Searching for unnecessarily large images & how to resize

 

The easiest way to do this is make sure your images are less than 60kb. If they are not:

 

1) Upload the images to http://accounts.prizmcloud.com/?type=image

 

2) Down load the optimized image to your PC.

 

3) Now, upload the optimized image from your PC to http://www.smushit.com/ysmush.it/

 

4) Download the image from www.smushit.com and make sure to rename it to the correct file name.

 

5) Now, upload it back to your website and you’re good to go.

 

G. WP Smush.it or Prizm Image

 

Note: These 2 Plugins work on WPE, but only install one of them.

è Click: Plugins

è Click: Add New (http://www.Yourwebsitename.com/wp-admin/plugin-install.php)

è Search Type: WP Smush.it or Prizm Image

è Sometimes, problems can occur with WP Smush.it on WPEngine.  We will use Prizm Image as it just works well on WPEngine.

è Click: Activate

Here are some settings you can adjust:

1) Click on Settings -> Media (http://www.yourwebsitename.com/wp-admin/options-media.php)

2) Enter your Prizm Image License Key. – It takes 5 sec to get a Key here – http://www.prizmimage.com/Home/Login

3) On the settings page: SettingsMedia (http://www.yourwebsitename.com/wp-admin/options-media.php)

Change the setting to the following:

3.1) Select quality of reduced images use – Set it on: Higher Quality – Larger File Size

3.2) Tick the box – Remove JPEG metadata

3.3) Select JPEG Mode – Set it on: Do not change the JPEG mode

3.4) Prompt: Use Prizm Image on upload? – Set it on: Automatically process on upload
(This means any new image will run through the script and be optimized.)

3.5) Prompt: How many seconds should we wait for a response from Prizm Image? – Use 120

3.6) Prompt: Enable debug processing – Do NOT tick it

3.7) Now make sure to hit Save
4.)  Click: Media Library (http://www.markdescande.com/wp-admin/upload.php)

4.1) Click: Screen Options (On the top right hand side)

4.2) Set it to show 100 Media items and then click: Apply (This will now give you far less pages to work through.)

4.3) Select all the images on the page – Just tick the box below the wording Bulk Actions and it will select all of them.

4.4) Give the script time to run on the next page – look for the wording To go back to the previous page, click here – Click it

4.5) On the right hand side, you will see the wording Reduced by.

If you see it, you’re good to go. Do the same for the next batch of pages.

NOTE: Do this step LAST as it is a server hog.

4.6) When you’re done with all your images:
Click: Media à Bulk Prizm Image
(http://www.yourwebsitename.com/wp-admin/upload.php?page=wp-image_service-bulk)

4.7) Click: Run All My Images – Just give it time to run and do not run it when you have a lot of customers on your website as this will slow down the process.

4.8) After the page has run, at the bottom of the page you will see:

Prizm image finished processing.
Cumulative Total Savings: XXX MB

 

G. Imsanity and alternative method
Not recommended – https://wordpress.org/plugins/imsanity/

Make your images tiny. You don’t need a 150kb image. You only need a 30 kb image.

Some great tools are:Complete the steps as follows:

1) Take your big image and run it through this – http://compressnow.com/compress-multiple-images.php

2) Take your compressed image and then run it through this – http://www.smushit.com/ysmush.it/

3) Now, upload it to the site.

Don’t use PNG if you can avoid it. Use this tool instead – https://tinypng.com/


Leave a Reply

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