{"id":4876,"date":"2010-04-22T23:06:39","date_gmt":"2010-04-23T06:06:39","guid":{"rendered":"http:\/\/www.shibashake.com\/wordpress-theme\/?p=4876"},"modified":"2013-10-28T17:50:19","modified_gmt":"2013-10-29T00:50:19","slug":"parallel-downloads","status":"publish","type":"post","link":"https:\/\/shibashake.com\/wp\/parallel-downloads","title":{"rendered":"Parallel Downloads &#8211; Optimize Your Image Links"},"content":{"rendered":"<p>Google recently <a href=\"http:\/\/googlewebmastercentral.blogspot.com\/2010\/04\/using-site-speed-in-web-search-ranking.html\">announced<\/a> that they will be using site speed as part of their search rankings. <\/p>\n<p>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&#8217;s <a href=\"http:\/\/code.google.com\/speed\/page-speed\/\">Page Speed<\/a> application, and started testing my blog pages. <\/p>\n<p>One of the key optimization suggestions that kept coming up was &#8211; <\/p>\n<div style=\"text-align:center;\">\n<strong><em>Parallelize downloads across hostnames.<\/em><\/strong>\n<\/div>\n<div class=\"alignspace\"><\/div>\n<h2>Parallelize downloads across hostnames<\/h2>\n<p><a href=\"http:\/\/shibashake.com\/blog-art\/\">Art is another passion of mine<\/a>, and I use many images on my blog. As a result, many of my blog pages have 50 or more image links. <\/p>\n<p>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.<\/p>\n<p><em>Since all of my image links are from the same domain, much of the download is serialized.<\/em><\/p>\n<p>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.<\/p>\n<p><strong>Note however, that using too many domain names will cause performance to degrade.<\/strong><\/p>\n<blockquote>\n<p>\n<em>Our rule of thumb<\/em> 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.<br \/>\n~~[<a href=\"http:\/\/yuiblog.com\/blog\/2007\/04\/11\/performance-research-part-4\/\">Maximizing Parallel Downloads in the Carpool Lane<\/a> from the Yahoo! User Interface group]\n<\/p>\n<\/blockquote>\n<div class=\"alignspace\"><\/div>\n<h2>Plugin for parallelizing image downloads<\/h2>\n<p>Since parallel downloads seem like a useful feature, I have added it into my <a href=\"http:\/\/shibashake.com\/wordpress-theme\/media-library-plus-plugin\">Shiba Media Library plugin<\/a>. To access this new functionality &#8211;<\/p>\n<ol>\n<li>Go into <strong>Media >> Media Tools<\/strong>.<\/li>\n<div id='4912' class='wp-caption frame6 aligncenter' style='width:546px' ><div class='shiba-outer shiba-gallery' ><div class='shiba-stage' style='width:520px'><img loading=\"lazy\" src=\"https:\/\/shibashake.com\/wordpress-theme\/wp-content\/uploads\/2010\/04\/wordpress-optimization1.jpg\" alt=\"Shiba Media Library interface for parallel image downloads.\" title=\"wordpress-optimization1\" width=\"520\" height=\"367\" class=\"size-full wp-image-4912\" srcset=\"https:\/\/www.shibashake.com\/wp\/wp-content\/uploads\/2010\/04\/wordpress-optimization1.jpg 520w, https:\/\/www.shibashake.com\/wp\/wp-content\/uploads\/2010\/04\/wordpress-optimization1-300x211.jpg 300w, https:\/\/www.shibashake.com\/wp\/wp-content\/uploads\/2010\/04\/wordpress-optimization1-460x324.jpg 460w, https:\/\/www.shibashake.com\/wp\/wp-content\/uploads\/2010\/04\/wordpress-optimization1-220x155.jpg 220w\" sizes=\"(max-width: 520px) 100vw, 520px\" \/><div class='wp-caption-text shiba-caption'>Shiba Media Library interface for parallel image downloads.<\/div><\/div> <!-- End shiba-stage --><\/div><\/div>\n<li>The input text area should start out with your blog base uploads directory. Enter in your other parallel domains &#8211; one in each line. <\/li>\n<p><strong>Note &#8211; it is important that each entry points to exactly the same location<\/strong> because the plugin will simply find all image links that match the first domain name, and replace it with the subsequent domain names.<\/p>\n<p>I have found that it is most efficient to point to the WordPress <strong>wp-content<\/strong> directory because most image resources are stored there. For example, my parallel download domains are as follows &#8211;<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\nhttp:\/\/www.shibashake.com\/wordpress-theme\/wp-content\r\nhttp:\/\/wordpress.shibashake.com\/wp-content\r\nhttp:\/\/wordpress-images.shibashake.com\r\n<\/pre>\n<\/p>\n<li>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.<\/li>\n<p><strong><a href=\"http:\/\/shibashake.com\/wordpress-theme\/the_content-filter-optimizing-your-wordpress-plugins\">In general, it is best to only run <em>the_content<\/em> plugin filters ONLY when necessary.<\/a><\/strong>\n<\/ol>\n<div class=\"download-text2\">\n<h1><a href=\"http:\/\/shibashake.com\/wordpress-theme\/shiba-media-library.zip\">Download Media Library Plugin<\/a><\/h1>\n<\/div>\n<div class=\"alignspace\"><\/div>\n<h2>Adding parallel downloads to your theme<\/h2>\n<p>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 <strong>index.php<\/strong> and <strong>comments.php<\/strong>).<\/p>\n<p><u>Add parallel downloads to your theme<\/u> &#8211;<\/p>\n<ul>\n<li>Look for the <em>get_the_post_thumbnail<\/em> function call in your theme <strong>index.php<\/strong> file. <\/li>\n<li>Replace the <em>get_the_post_thumbnail<\/em> statement with a variation of the code below. Some tweaks may be necessary depending on how your theme uses post thumbnails.<\/li>\n<p><pre class=\"brush: php; title: ; notranslate\" title=\"\">\r\n&lt;?php\r\n\tglobal $shiba_mlib;\r\n\t$thumbnail = get_the_post_thumbnail(); \r\n\tif (is_object($shiba_mlib) &amp;&amp; method_exists($shiba_mlib, &#039;parallelize_link&#039;)) \t\t\r\n\t\techo $shiba_mlib-&gt;parallelize_link($thumbnail); \r\n \telse\r\n\t\techo $thumbnail;\r\n?&gt;\r\n<\/pre>\n<\/p>\n<li>Look for the <em>get_avatar<\/em> function call in your theme <strong>comments.php<\/strong> file. <\/li>\n<li>Replace the <em>get_avatar<\/em> statement with a variation of the code below. Some tweaks may be necessary depending on how your theme uses gravatar images.<\/li>\n<p><pre class=\"brush: php; title: ; notranslate\" title=\"\">\r\n&lt;?php \t\t\r\n\tglobal $shiba_mlib;\r\n\t$avatar = get_avatar( $comment, 42 ); \r\n\tif (is_object($shiba_mlib) &amp;&amp; method_exists($shiba_mlib, &#039;parallelize_link&#039;)) {\t\t\r\n\t\techo $shiba_mlib-&gt;parallelize_link($avatar); \r\n\t} else\r\n\t\techo $avatar;\t\r\n?&gt; \r\n<\/pre>\n<\/ul>\n<div class=\"alignspace\"><\/div>\n<h2>You are done!<\/h2>\n<p>Let me know if you run into any problems with this new plugin update.<\/p>\n<div class=\"alignspace\"><\/div>\n<div class=\"download-text2\">\n<h1><a href=\"http:\/\/shibashake.com\/wordpress-theme\/shiba-media-library.zip\">Download Media Library Plugin<\/a><\/h1>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>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&#8217;s Page Speed application, and started testing my blog pages. One [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":4912,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":""},"categories":[139],"tags":[592,593,594,589,588,590,591,573],"_links":{"self":[{"href":"https:\/\/www.shibashake.com\/wp\/wp-json\/wp\/v2\/posts\/4876"}],"collection":[{"href":"https:\/\/www.shibashake.com\/wp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.shibashake.com\/wp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.shibashake.com\/wp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.shibashake.com\/wp\/wp-json\/wp\/v2\/comments?post=4876"}],"version-history":[{"count":29,"href":"https:\/\/www.shibashake.com\/wp\/wp-json\/wp\/v2\/posts\/4876\/revisions"}],"predecessor-version":[{"id":12669,"href":"https:\/\/www.shibashake.com\/wp\/wp-json\/wp\/v2\/posts\/4876\/revisions\/12669"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.shibashake.com\/wp\/wp-json\/wp\/v2\/media\/4912"}],"wp:attachment":[{"href":"https:\/\/www.shibashake.com\/wp\/wp-json\/wp\/v2\/media?parent=4876"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.shibashake.com\/wp\/wp-json\/wp\/v2\/categories?post=4876"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.shibashake.com\/wp\/wp-json\/wp\/v2\/tags?post=4876"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}