Shiba

Adventures in WordPress

  • Home
  • Dog
  • Art
  • Contact
  • WordPress Articles
    • WP Plugins
    • WP Programming
    • WP Admin Panels
    • WP Theme Design
    • WP How-To
    • WP Theme Images
You are here: Home / WordPress Programming / Parallel Downloads – Optimize Your Image Links

Parallel Downloads – Optimize Your Image Links

by ShibaShake 9 Comments

Google recently announced that they will be using site speed as part of their search rankings.

I have been meaning to look into my blog page speed for some time, and this event spurred me to finally get my ass in gear. I installed Google’s Page Speed application, and started testing my blog pages.

One of the key optimization suggestions that kept coming up was –

Parallelize downloads across hostnames.

Parallelize downloads across hostnames

Art is another passion of mine, and I use many images on my blog. As a result, many of my blog pages have 50 or more image links.

Different browsers have different limits on the number of resources (e.g. images) they can download simultaneously from a given domain. However, all browsers have a limit.

Since all of my image links are from the same domain, much of the download is serialized.

To optimize performance, I can spread my blog image links across multiple domains, which will increase the number of images that a browser can download in parallel. The good news is that sub-domain names can also be used to enable parallel downloads. Therefore, you need not buy more domain names just to enable this functionality.

Note however, that using too many domain names will cause performance to degrade.

Our rule of thumb is to increase the number of parallel downloads by using at least two, but no more than four hostnames. Once again, this underscores the number one rule for improving response times: reduce the number of components in the page.
~~[Maximizing Parallel Downloads in the Carpool Lane from the Yahoo! User Interface group]

Plugin for parallelizing image downloads

Since parallel downloads seem like a useful feature, I have added it into my Shiba Media Library plugin. To access this new functionality –

  1. Go into Media >> Media Tools.
  2. Shiba Media Library interface for parallel image downloads.
    Shiba Media Library interface for parallel image downloads.
  3. The input text area should start out with your blog base uploads directory. Enter in your other parallel domains – one in each line.
  4. Note – it is important that each entry points to exactly the same location because the plugin will simply find all image links that match the first domain name, and replace it with the subsequent domain names.

    I have found that it is most efficient to point to the WordPress wp-content directory because most image resources are stored there. For example, my parallel download domains are as follows –

    http://www.shibashake.com/wordpress-theme/wp-content
    http://wordpress.shibashake.com/wp-content
    http://wordpress-images.shibashake.com
    

  5. You may choose to parallelize single or multiple posts (e.g. your blog front-page, category page, or tag page). If your theme uses excerpts when there are multiple posts, then limiting the parallel download process to just single pages will save on processing time and increase page speed.
  6. In general, it is best to only run the_content plugin filters ONLY when necessary.

Download Media Library Plugin

Adding parallel downloads to your theme

The parallel downloads function described above only operates on your post content. If you want to extend image parallelization to your post thumbnail images, and comment images, you will need to inject the parallel downloads function into your theme files (most likely index.php and comments.php).

Add parallel downloads to your theme –

  • Look for the get_the_post_thumbnail function call in your theme index.php file.
  • Replace the get_the_post_thumbnail statement with a variation of the code below. Some tweaks may be necessary depending on how your theme uses post thumbnails.
  • <?php
    	global $shiba_mlib;
    	$thumbnail = get_the_post_thumbnail(); 
    	if (is_object($shiba_mlib) && method_exists($shiba_mlib, 'parallelize_link')) 		
    		echo $shiba_mlib->parallelize_link($thumbnail); 
     	else
    		echo $thumbnail;
    ?>
    

  • Look for the get_avatar function call in your theme comments.php file.
  • Replace the get_avatar statement with a variation of the code below. Some tweaks may be necessary depending on how your theme uses gravatar images.
  • <?php 		
    	global $shiba_mlib;
    	$avatar = get_avatar( $comment, 42 ); 
    	if (is_object($shiba_mlib) && method_exists($shiba_mlib, 'parallelize_link')) {		
    		echo $shiba_mlib->parallelize_link($avatar); 
    	} else
    		echo $avatar;	
    ?> 
    

You are done!

Let me know if you run into any problems with this new plugin update.

Download Media Library Plugin

Leave a Reply Cancel reply

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

Comments

  1. Chris Hayes says

    December 31, 2015 at 12:19 am

    Will a CDN do this for me auto-magically?

    I’m using bootstrap so I can’t install wp plugins.

    Reply
  2. Chellie says

    April 17, 2014 at 12:17 am

    Hello – the 2 items I have been looking for help with are increase download parallelization by distributing these requests across multiple hostnames and to use cookie free domains. So I found your blog 😉 but i see from the comments that the image parallelization option was removed. Do you have suggestions on how I get started with this. I have a self-hosted wordpress blog. Thanks.

    Reply
  3. Abdelrahman Zohairy says

    September 15, 2013 at 1:29 pm

    Can’t find step 1 ‘Go into Media >> Media Tools.’ please help?
    Using WP 3.6

    Reply
    • ShibaShake says

      September 15, 2013 at 3:29 pm

      The image parallelization option was removed a long time ago as new browsers now allow more than two concurrent connections per hostname.
      http://www.browserscope.org/?category=network&v=top

      Reply
      • Victor says

        November 27, 2014 at 12:32 am

        Hey ShibaShake,

        First of all, cool Husky? Referring to your profile icon. I have a reddish-white Siberian. And I almost wonder about your name… Shiba… because my Husky’s name is Kiba. Coincidence?

        Anyways, more to the point and on topic, I’m seeing this issue popup in Pingdom’s tool when I analyze immortal.org and so I looked into and found your WordPress wizardry, which has helped steer me in the right direction, but I do have some questions…

        For starters, is this no longer necessary as new browsers don’t benefit? But in the case of older browsers, still beneficial? Please clarify your thoughts on this matter.

        So let’s see here, I setup a CDN which integrated directly into the W3-Total-Cache plugin and now I’m seeing the option to replace the site’s hostname with up to 4 options. The options are: reserved for CSS, reserved for JS in head, reserved for JS after body start tag, reserved for JS before body end tag. Now I’m assuming these 4 potential options exist to input the sub-domains I’ve created to achieve parallel downloads. Is this correct?

      • ShibaShake says

        November 27, 2014 at 12:38 pm

        Yeah, this is not something that I worry about anymore.

        As for the CDN options, it may be there to allow people to use different CDNs or perhaps to separate their asset files into different subs. I am currently using two different CDNs for my sites, to test out cost options.

  4. Bernardo says

    September 3, 2013 at 9:23 am

    Hello,

    Congratulation on this plugin… truly an asset, for worpdress websites
    Meanwhile, i can’t figure it out where’s the Shiba Media Tools, can you tip me?
    Cause i’ve installed already the 3.6 version… and can tell where it is.

    thanks

    Reply
  5. Johanna Ouwerling says

    August 20, 2013 at 12:19 am

    Hi Shiba,
    Does your plugin work with the Nextgen Gallery?

    Reply
    • ShibaShake says

      August 20, 2013 at 8:48 am

      No. As I understand it, NextGen has its own gallery handling process and functions, whereas the Shiba plugins focus on building from native WordPress objects and functions. Both do similar things but are based on different back-end structures.

      Reply

Recent Posts

  • Screenshot of an example article in code view of a modified Gutenberg editor.How to Harness the Power of WordPress Gutenberg Blocks and Combine It with Legacy Free-Form Text
  • Screenshot of the Success, WordPress has been installed page.Migrating Your WordPress Website to Amazon EC2 (AWS)
  • Screenshot of WinSCP for creating a SFTP configuration.How to Set-Up SFTP on Amazon EC2 (AWS)
  • WordPress Gutenberg code view screenshot of this article.How to Prevent Gutenberg Autop from Messing Up Your Code, Shortcodes, and Scripts
  • Screenshot of the Success, WordPress has been installed page.How to Create a WordPress Website on Amazon EC2 (AWS)

Recent Comments

  • Create Pop-up Windows in Your WordPress Blog with Thickbox (57)
    • Jim Camomile
      - I have used this tutorial several times and it is one of the few simple and effective ways to add popups with dynamic content, ...
  • How to Add Admin Columns in WordPress (7)
    • Andy Globe
      - Hi Friends, I am facing two problem in WordPress admin1. Load custom CSS for wp-admin on user-role base (editor) 2. ...
  • Example blog front-page using excerpts and the Shiba Theme.Optimize Your WordPress Plugins with Tags (5)
    • DF
      - thanks, i went the other way and added a filter if pages I wanted.
  • WordPress Search Widget – How to Style It (57)
    • Nelson
      - Tanks master - Fine
  • Update custom inputs with the proper data using Javascript.Expand the WordPress Quick Edit Menu (59)
    • Mike G
      - This is exactly what is happening to me. It is updating the value in the database and in the column, but I have to refresh ...

Copyright © 2022 · Genesis Skins by ShibaShake · Terms of Service · Privacy Policy ·