WordPress Speed Optimization Guide – Part 3
WordPress speed optimization guide – Part 3 comes in continuation to the speed optimization steps already explained in WP site speed tutorial – Part 2. If you have directly landed to this post, then you must roll back to WordPress Speed Optimization Guide – Part 2 and WordPress Speed Optimization Guide – Part 1 in a sequence before moving any further on this post. This is a series of WordPress speed optimization tutorial presented in four parts. You can easily understand the entire WP site speed optimization procedure by going through the entire tutorial series in a sequence so as to maintain the topic integrity.
Since many speed optimization steps are dependent on the previous steps, missing some parts in between may not let you experience site speed performance as desired. All the readers are highly recommended to go through the entire WP Site Optimization series in a methodological manner to experience high page load speed and low page load time for their WP sites.
9How to Fix YSlow Grade to Reduce Page Load Time ?
9.1How to Optimize Images on WordPress Site ?
Almost 99% of site’s page load time is because of site images. In order to optimize all the site images, fix the following image optimization factors one by one.
9.1.1 Serve Scaled Images for WordPress Speed Optimization
9.1.2 Specify Image Dimensions for WP Speed Optimization
Whenever you add an image to your page, post or even to any other section of your site, ensure to define width and height attribute. In WordPress, image width and height attributes are mostly pre-defined in WordPress theme. If you find some “Specify Image Dimensions” related issue in any of the speed analytic test reports then you need to check your WordPress theme. May be, your WP theme developer has missed including image width and height attributes in the theme. Raise a support ticket for help or try to take help of some WP theme developer to fix the issue.
9.1.3 Combine Images using CSS Sprites
Personally, I never recommend spending time on fixing this issue. Time required to combine images using CSS Sprites is not worth the efforts required to fix it. Although, if you really want to fix this site speed issue then you can use some online CSS Sprite fixing tools such as CSS Sprites or Sprite Me.
9.1.4 Ensure Images are Loaded from Your Site Server
You should check that none of the Image URLs are pointing to other servers. All images must reside on your own site server so that it can be loaded directly from it. In case, if some of your site images are coming from any other site through hotlinking then you can use a simple WP Cache Images plugin. The plugin has not been updated from a long time, but it works well to cache third party images on your own site.
9.1.5 Activate CDN on WordPress to Reduce Image Load Time
Content Delivery Network is a good resource to reduce overall load on your site. Less is the load, better is the site speed, although CDN should be configured quite efficiently. You can get a CDN on your website in three simple and easy steps. My own WordPress site is powered by CDN and I can easily explain how to get your WP site powered by Max CDN to enjoy the power of content delivery network on your own WordPress site. You may like to understand the impact of CDN on page load time and SEO, which I have explained in my linked post.
- Get a Max CDN plan for your WP site. (A special discount is offered to our site visitors)
- Install CDN Linker on your WordPress Install.
- Add the URL provided by MaxCDN to CDN Linker.
- Test all the links and ensure that everything is working promptly.
You can even setup a CNAME. I have dedicated an entire post on How to setup MaxCDN on WP Engine. If you are hosting your WordPress site on WP Engine then you should take a look at the linked post to access the entire procedure in detail.
9.1.6 Reduce Heavy Image Size for WP Site Speed Optimization
The definition of heavy images may vary from person to person, but I consider an image of more than 60 KB as a heavy image. You can find as well as reduce the size of heavy images by following the below mentioned steps:
- Search your site for images which have an image size of more than 60 KB.
- Upload the images to Prizmcloud.
- Download the optimized images to your PC.
- Upload the optimized images received in step 3 to SmushIT.
- Download the images from SmushIT back to your PC and rename.
- Upload the image file back to your website.
The above mentioned steps work well with any website development platform. Although, for WordPress sites, you can also use any of the following image optimization plugins.
You can easily install any of these image optimization plugins through Add New Plugins option in WordPress Dashboard. After installing the require plugin, activate it. First of all, I tried WP Smush.it on my WP Engine install, but faced certain problems with it. Next, I tried Prizm Image and it worked well with WP Engine. Let us have a look at some of the Prizm Image configuration settings for optimizing images on WordPress.
- Go to Settings -> Media.
- Type in your Prizm Image License Key. (Get it quickly from here.)
- On Settings Page, go to Settings -> Media.
- Select quality of reduced image use as “Higher Quality – Larger File Size”
- Remove JPEG metadata. (Tick the box)
- Select JPEG mode as “Do not change the JPEG mode”
- Set Use Prizm Image on upload ? As “Automatically process on upload”
- Use a value of 120 in “How many seconds should we wait for a response from Prizm Image?”
- Enable Debug Processing. (Do not tick it)
- Click on Save button.
- Click on Media -> Library.
- Click on Screen options (on top right hand side)
- Set it to show 100 Media items and click Apply.
- Select all the images on page. (Tick the box below Bulk Actions)
- Give some time to run the script before heading to next page.
- Look at the right hand side for “Reduced by”. If you can see some values, it means the images are optimized and you can move ahead.
- After optimizing all the images, click on Media -> Bulk Prizm Image. (Do it with caution as this step is server hog)
- Click “Run All My Images”. (Do it when you expect least load on your server as it will slow down the site during the process)
- Once the process completes, you will see a message at the bottom – “Prizm Image finished processing”. Cumulative Total Savings : xxx MB
You can also use a WordPress Plugin Imsanity to automatically scale large image uploads by using WP built in image scaling functions but personally, I do not recommend the use of this plugin. You only need to reduce the size of your site images.
As an alternative image optimization procedure, you can also go through the following steps:
- Optimize your big size images through Compressnow.
- Download the compressed image after step 1 and run in through SmushIT.
- Upload the image to site.
- Try not to use PNG image files, although if it is required then use Tinypng to optimize images before uploading it to your site.
10Have you Optimized CSS for WordPress Speed Optimization ?
Optimizing CSS is another site speed factor that has the power to reduce site load time to a considerable level. Whille optimizing CSS, we need to fix the following 4 factors:
- Convert small CSS files into one large file or bring in-line.
- Minify CSS.
- Move inline style blocks and <link> elements into the head vs body.
- Avoid CSS @import
GTmetrix defines Optimized CSS as –
A very simple and easy to use solution for optimizing CSS is the use of a WordPress plugin WP Minify Fix. Install the plugin from Dashboard -> Add New Plugin and activate it. WP Minify Fix minifies all the items. It means the removal of white spaces from all the files. Although, after installing and activating the plugin, do not forget to test your site to confirm that everything is working as it was before the plugin installation. In order to check whether WP Minify Fix is working on your site or not, look at view-source.
An alternative solution is to use CloudFlare. You can easily use their system out of box.
12Optimize WP Site’s Content to Experience Fast Loading WP Sites
The following site speed related factors based on your site’s content should be fixed to optimize site content.
12.1Avoid a character set in the meta tag
Most of the WordPress themes are developed in a way to take care of this issue. You can check whether it is fixed in your WordPress install or not by peeking inside your header.php file.
Look for the following lines. If you can see the following code inside the file, it means your WP site theme is taking care of this issue.
<head> <meta charset="<?php bloginfo( 'charset' ); ?>" />
12.2 Specify Character Set Early
The above mentioned point 12.1 takes care of this issue as well. Nothing extra is required to be done at your end. Good WordPress themes already take care of this issue at their own end. In case, if the above code is missing from your site’s header.php file then you can manually edit the file to include the code.
12.3Serve Resources from a Consistent URL
Fixing this speed related issue is quite easy. The issue pops up when your site uses different URLs to load the same image. In most of the cases, it happens because of the difference in a URL with www and without www. As an example, if your site is using two URLs such as www.mycoolsitecom/myimage.jpg and mycoolsite.com/myimage.jpg, then should fix it. Fixing simply means using the same URL all over the site by maintaining its consistency.
12.4 Minify HTML for Speeding up WordPress Sites
A look at the already mentioned point 8.2 resolves the issue of minifying HTML.
12.5Minimize Redirects to Speed up WP Sites
This WP speed optimization issue pops up when you have the same URL to the same page being loaded on your site’s page. It is a very popular issue on pages loaded with Google Adsense. Unfortunately, there is no real fix for this, although if you have some suggestions on this point, I would really love to know.
12.6Avoid Bad Requests for Increasing Site Speed
Bad requests are caused due to the presence of 404 links on the home page. A simple fix to avoid bad requests would be to fix the trigger of 404 error pages from your home page. Although, a better option would be to fix all the 404 error triggers on your entire site as it will improve the overall health of your WordPress site.
An easy to use WordPress plugin – Eggplant 301 Redirects can be deployed to handle 404 errors on your WP site. Use your Google Webmaster Tools, check for crawl errors to detect all the 404 requests generated and then use the plugin to redirect the lost URLs to the right URLs on your site.
12.7Minimize Request Size
Monitoring as well as controlling the size of a page is very important from the site speed optimization perspective. Generally, images are the basic culprit behind increasing page size. If you have fixed your images as mentioned in the above points, your site’s page size will automatically get reduced. Lesser is the page size, better is the page load time. My rule of thumb for a 1 MB page size is never more than 1 second.
12.8Remove Query Strings from Static Resources
I have already covered the topic in point 8.1. A look at it will suggest you how to remove query strings from static resources from your WordPress site. A simple and easy to use WordPress plugin – Remove Query Strings from Static Resources does the job quite efficiently.
12.9Avoid Image Scaling through WordPress
Scale all your site images manually by using any of the image optimization methods as mentioned in point 9.1.6 (scroll back to to the top). Avoid pushing WordPress to scale site images.
You can now proceed to WordPress Speed Optimization Guide – Part 4 to go through the rest of the steps.
In the meantime, you can also have a look at some of the other related posts such as impact of WP Plugins on site load speed, importance of web host servers on site speed and how bad is CPU Throttling for website load speed.
Post Editor : Ashutosh Kasera