{"id":6201,"date":"2017-01-03T12:44:11","date_gmt":"2017-01-03T12:44:11","guid":{"rendered":"http:\/\/dev.adambowie.com\/?p=6201"},"modified":"2017-01-04T13:37:22","modified_gmt":"2017-01-04T13:37:22","slug":"failing-to-optimise-this-site","status":"publish","type":"post","link":"https:\/\/dev.adambowie.com\/blog\/2017\/01\/failing-to-optimise-this-site\/","title":{"rendered":"Failing to Optimise This Site"},"content":{"rendered":"<p>Over the past few days, Google has been pushing users to try running its <a href=\"https:\/\/testmysite.thinkwithgoogle.com\/\">Test My Site With Google<\/a> service. In particular, it&#8217;s trying to help sites see how mobile friendly they are.<\/p>\n<p>I dutifully entered the details of this site, and waited for the report. <\/p>\n<p>I host this site quite cheaply, so wasn&#8217;t expecting any great shakes. But it&#8217;s running an up to date implementation of WordPress, and the theme I&#8217;m running is pretty responsive. <\/p>\n<p>The report gives you three scores, marked out of one hundred &#8211; for mobile friendliness, mobile speed and desktop speed.<\/p>\n<p>Mobile Friendliness came in at 98\/100. <\/p>\n<p>I&#8217;ll take that. The theme I&#8217;m using seems to work well on mobiles, with the only small issue being &#8220;tap targets&#8221; &#8211; the ease with which people can use their fingers to navigate the site. If the buttons are too small, then people may struggle to navigate with their fingers.<\/p>\n<p>Then came the bad news. <\/p>\n<p>Mobile Speed was just 14\/100. And Desktop Speed came in at 0\/100!<\/p>\n<p>This is worrying because Google does base your ranking in part on your site&#8217;s speed. You would think that 0\/100 for desktop means the site&#8217;s not loading at all, yet that&#8217;s simply not the case. <\/p>\n<p>What is true is that some third-party hosted elements are slow loading &#8211; namely Flickr and Vimeo. But I &#8220;outsource&#8221; those for a reason. It keeps my costs down by hosting those elsewhere, and I can ensure that viewability is maintained by those companies&#8217; development. Self-hosted videos or pictures can be a bit of a nightmare, and of course my hosting fees would ramp up. <\/p>\n<p>However, Google was giving me big red marks against &#8220;Optimise Images&#8221; and &#8220;Eliminate render-blocking JavaScript and CSS in above-the-fold content.&#8221;<\/p>\n<p>For the latter, I killed some JavaScript that WordPress loads for emoji. That&#8217;s redundant on this site as far as I&#8217;m concerned. But while that seems to remove the red mark against JavaScript, &#8220;Optimise Images&#8221; is still there. And I still score zero for desktop speed.<\/p>\n<p>At this point I&#8217;m a little stuck. <\/p>\n<p>Let me explain how I use images on this site.  Here&#8217;s an example of a photo from Flickr embedded into this site:<\/p>\n<p><a data-flickr-embed=\"true\"  href=\"https:\/\/www.flickr.com\/photos\/adambowie\/31790881912\/in\/dateposted\/\" title=\"Through the Woods - December 28, 2016\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/c1.staticflickr.com\/1\/765\/31790881912_8237871509_h.jpg\" width=\"1600\" height=\"1067\" alt=\"Through the Woods - December 28, 2016\"><\/a><script async src=\"\/\/embedr.flickr.com\/assets\/client-code.js\" charset=\"utf-8\"><\/script><\/p>\n<p>I use Flickr&#8217;s own embed code, choosing the &#8220;Large&#8221; 1600 width image. The reason for that is that on desktop, I want the photo to look nice and big. While it&#8217;s not full-width, it&#8217;s pretty wide. And if you have a retina-style display, the photo should appear nice and big.<\/p>\n<p>The embed code uses some Flickr JavaScript to ensure that the image is resized appropriately in a &#8220;responsive&#8221; manner. In other words, rather than being a fixed width, it will display smaller for smaller or mobile screens.<\/p>\n<p>The problem remains, however, that in the background a 1600 px width image is loading. That&#8217;s slow and is impacting on Google&#8217;s assessment of my site. <\/p>\n<p>I could embed a smaller width image. The one below is 800 px wide.<\/p>\n<p><a data-flickr-embed=\"true\"  href=\"https:\/\/www.flickr.com\/photos\/adambowie\/31790881912\/in\/dateposted\/\" title=\"Through the Woods - December 28, 2016\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/c1.staticflickr.com\/1\/765\/31790881912_06235bf8b4_c.jpg\" width=\"800\" height=\"534\" alt=\"Through the Woods - December 28, 2016\"><\/a><script async src=\"\/\/embedr.flickr.com\/assets\/client-code.js\" charset=\"utf-8\"><\/script><\/p>\n<p>But this is going to look a bit rubbish on a smaller screen.<\/p>\n<p>I can also adjust the embed code so that JavaScript isn&#8217;t loaded.<\/p>\n<p><a href=\"https:\/\/www.flickr.com\/photos\/adambowie\/31790881912\/in\/dateposted\/\" title=\"Through the Woods - December 28, 2016\"><img decoding=\"async\" src=\"https:\/\/c1.staticflickr.com\/1\/765\/31790881912_8237871509_h.jpg\" alt=\"Through the Woods - December 28, 2016\"><\/a><\/p>\n<p>But while that helps with lessening the amount of JavaScript and is perhaps something I&#8217;ll do in the future, it still doesn&#8217;t help with reducing the size of the base image (1.2MB).<\/p>\n<p>And if you&#8217;re viewing this on mobile, then all three images will probably look identical. But that&#8217;s the problem. You only need to see, perhaps a 600 px image.<\/p>\n<p>I&#8217;d love to be able to load only large images when the display is big, but a smaller version if the display is more modest. And while there are plugins for WordPress that allow this (e.g. <a href=\"https:\/\/en-gb.wordpress.org\/plugins\/wp-retina-2x\/\">WP Retina 2X<\/a>), they&#8217;re based on loading from your WordPress install, and not a third-party location like Flickr.<\/p>\n<p>So I&#8217;m a bit stuck. My site, but it&#8217;s nature, will have large photos embedded, but I can&#8217;t find a way to make them look nice on large displays, but in particular, shrink the page-loads for those viewing on smaller screens.<\/p>\n[Update] Thanks to Em in the comments below, I&#8217;m trying to use <code>srcset<\/code> to see if that helps. <a href=\"http:\/\/dev.adambowie.com\/2017\/01\/image-posting-test\/\">See my next post here.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Over the past few days, Google has been pushing users to try running its Test My Site With Google service. In particular, it&#8217;s trying to help sites see how mobile friendly they are. I dutifully entered the details of this site, and waited for the report. I host this site quite cheaply, so wasn&#8217;t expecting [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[743,257,744,145],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/dev.adambowie.com\/blog\/wp-json\/wp\/v2\/posts\/6201"}],"collection":[{"href":"https:\/\/dev.adambowie.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dev.adambowie.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dev.adambowie.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dev.adambowie.com\/blog\/wp-json\/wp\/v2\/comments?post=6201"}],"version-history":[{"count":7,"href":"https:\/\/dev.adambowie.com\/blog\/wp-json\/wp\/v2\/posts\/6201\/revisions"}],"predecessor-version":[{"id":6215,"href":"https:\/\/dev.adambowie.com\/blog\/wp-json\/wp\/v2\/posts\/6201\/revisions\/6215"}],"wp:attachment":[{"href":"https:\/\/dev.adambowie.com\/blog\/wp-json\/wp\/v2\/media?parent=6201"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dev.adambowie.com\/blog\/wp-json\/wp\/v2\/categories?post=6201"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dev.adambowie.com\/blog\/wp-json\/wp\/v2\/tags?post=6201"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}