Loading times for web pages is one of the key metrics we like to tune. Users will put up with a lot if they feel like they application is responsive. So when Caivs was handed 20MB of PHP and told, “one of the key pages takes like 30-45 seconds to load. Figure out why,” it was at least a clear goal.
Combing through that gigantic pile of code to try and understand what was happening was an uphill battle. Eventually, Caivs just decided to check the traffic logs while running the application. That highlighted a huge spike in traffic every time the page loaded, and that helped Caivs narrow down exactly where the problem was.
<span class="hljs-variable">$first_image</span> = <span class="hljs-string">''</span>;
<span class="hljs-keyword">foreach</span>(<span class="hljs-variable">$images</span> <span class="hljs-keyword">as</span> <span class="hljs-variable">$the_image</span>)
{
<span class="hljs-variable">$image</span> = <span class="hljs-variable">$the_image</span>[<span class="hljs-string">'url'</span>];
<span class="hljs-keyword">if</span>(<span class="hljs-title function_ invoke__">file_exists</span>(<span class="hljs-variable">$config</span>->base_url.<span class="hljs-string">'/uploads/'</span>.<span class="hljs-variable">$image</span>))
{
<span class="hljs-keyword">if</span>(<span class="hljs-variable">$first_image</span>==<span class="hljs-string">''</span>)
{
<span class="hljs-variable">$first_image</span> = <span class="hljs-variable">$image</span>;
}
<span class="hljs-variable">$image_dimensions</span> = <span class="hljs-string">'&w=648&h=432'</span>;
<span class="hljs-variable">$get_dimensions</span> = <span class="hljs-title function_ invoke__">getimagesize</span>(<span class="hljs-string">'http://old.datacenter.ip.address/'</span>.<span class="hljs-variable">$config</span>->base_url.<span class="hljs-string">'/uploads/'</span>.<span class="hljs-variable">$image</span>);
<span class="hljs-keyword">if</span>(<span class="hljs-variable">$get_dimensions</span>[<span class="hljs-number">0</span>] < <span class="hljs-variable">$get_dimensions</span>[<span class="hljs-number">1</span>])
<span class="hljs-variable">$image_dimensions</span> = <span class="hljs-string">'&h=432'</span>;
<span class="hljs-keyword">echo</span> <span class="hljs-string">'<li>'</span>.<span class="hljs-variable">$config</span>->base_url.<span class="hljs-string">'/timthumb.php?src='</span>.<span class="hljs-variable">$config</span>->base_url.<span class="hljs-string">'/uploads/'</span>.<span class="hljs-variable">$image</span>.<span class="hljs-string">'&w=125&h=80&zc=1'</span>), <span class="hljs-string">'javascript:;'</span>, <span class="hljs-keyword">array</span>(<span class="hljs-string">'onclick'</span>=><span class="hljs-string">'$('.image_gallery .feature .image').html(''</span>.<span class="hljs-variable">$config</span>->base_url.<span class="hljs-string">'/timthumb.php?src='</span>.<span class="hljs-variable">$config</span>->base_url.<span class="hljs-string">'/uploads/'</span>.<span class="hljs-variable">$image</span>.<span class="hljs-variable">$image_dimensions</span>.<span class="hljs-string">'&zc=1'</span>).<span class="hljs-string">'');$('.image_gallery .feature .title').show();$('.image_gallery .feature .title').html("'</span>.<span class="hljs-title function_ invoke__">str_replace</span>(<span class="hljs-string">'"'</span>, <span class="hljs-string">''</span>, <span class="hljs-variable">$the_image</span>[<span class="hljs-string">'Image Description'</span>]).<span class="hljs-string">'");$('.image_gallery .bar ul li a').removeClass('active');$('.image_gallery .bar ul li').removeClass('active');$(this).addClass('active');$(this).parents('li').addClass('active');sidebarHeight();curImg=$(this).attr('id');translate()'</span>,<span class="hljs-string">'id'</span>=><span class="hljs-variable">$img_num</span>)).<span class="hljs-string">'</li>'</span>;
<span class="hljs-variable">$img_num</span>++;
}
}
For every image they want to display in a gallery, they echo out a list item for it, which that part makes sense- more or less. The mix of PHP, JavaScript, JQuery, and HTML tags is ugly and awful and I hate it. But that’s just a prosaic kind of awful, background radiation of looking at PHP code. Yes, it should be launched into the Kupier belt (it doesn’t deserve the higher delta-V required to launch it into the sun), but that’s not why we’re here.
The cause of the long load times was in the lines above- where for each image, we getimagesize– a function which downloads the image and checks its stats, all so we can set $image_dimensions. Which, presumably, the server hosting the images uses the query string to resize the returned image.
All this is to check- if the height is greater than the width we force the height to be 432 pixels, otherwise we force the whole image to be 648×432 pixels.
Now, the server supplying those images had absolutely no caching, so that meant for every image request it needed to resize the image before sending. And for reasons which were unclear, if the requested aspect ratio were wildly different than the actual aspect ratio, it would also sometimes just refused to resize and return a gigantic original image file. But someone also had thought about the perils of badly behaved clients downloading too many images, so if a single host were requesting too many images, it would start throttling the responses.
When you add all this up, it meant that this PHP web application was getting throttled by its own file server, because it was requesting too many images, too quickly. Any reasonable user load hitting it would be viewed as an attempted denial of service attack on the file hosting backend.
Caivs was able to simply remove the check on filesize, and add a few CSS rules which ensured that files in the gallery wouldn’t misbehave terribly. The performance problems went away- at least for that page of the application. Buried in that 20MB of PHP/HTML code, there were plenty more places where things could go wrong.
[Advertisement]Utilize BuildMaster to release your software with confidence, at the pace your business demands. Download today!
Source: Read MoreÂ