{"id":1307,"date":"2014-07-31T12:29:12","date_gmt":"2014-07-31T11:29:12","guid":{"rendered":"https:\/\/www.bronco.co.uk\/our-ideas\/?p=1307"},"modified":"2014-07-31T12:57:45","modified_gmt":"2014-07-31T11:57:45","slug":"can-a-website-ever-be-fast-enough","status":"publish","type":"post","link":"https:\/\/www.bronco.co.uk\/our-ideas\/can-a-website-ever-be-fast-enough\/","title":{"rendered":"Can a website ever be fast enough?"},"content":{"rendered":"<p>This week we decided to challenge ourselves to achieving a perfect 100 out of 100 score on Google PageSpeed Insights for <a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/insights\/?url=http%3A%2F%2Fwww.davidnaylor.co.uk%2F&amp;tab=mobile\">davidnaylor.co.uk<\/a>.<\/p>\n<p>So far we\u2019ve failed, but are happy to have moved much closer than the <strong>70\/100 <\/strong>for mobile and<strong> 81\/100<\/strong> for desktop that we started with a few days ago. The website now scores <strong>93\/100<\/strong> on mobile and<strong> 95\/100<\/strong> for desktop. The only remaining issue PageSpeed Insights is asking us to consider fixing is in reducing the server response times which is something we\u2019re determined to find a solution to.<\/p>\n<p>If you run the test yourself you&#8217;ve be given a list of suggested improvements to make to you website but here\u2019s a rundown of some of the things we\u2019ve done to achieve the score we have so far:<\/p>\n<h2>The easy stuff<\/h2>\n<p>In improving our score there were a few things that caused us problems, others that we tried but removed and then there\u2019s the stuff that\u2019s just sort of easy and really should already have in place. Here\u2019s a few of those easy fixes:<\/p>\n<ul>\n<li><strong>Caching<\/strong> \u2013 We already cached a lot of files but had to fix a couple of setting as well as cache SVG file types<\/li>\n<li><strong>Image Compression<\/strong> \u2013 Pretty obvious really, some images were compressed while other newly added images were not. Pushing these through a lossless compression engine such as <a href=\"https:\/\/kraken.io\/\">Kracken.io<\/a> was quick and easy.<\/li>\n<li><strong>Google Analytics<\/strong> \u2013 As well as the standard Google Analytics asynchronous script we had another script that was being cached. We discovered we didn\u2019t really need it so saved a big headache and just removed this part.<\/li>\n<\/ul>\n<h2>The stuff we tried and removed<\/h2>\n<p>The David Naylor website runs on WordPress and along with its plugins causes a number of additional headaches as we can\u2019t manually minify the JavaScript and CSS files they include. Initially we looked at other plugins to help us here but they never seemed perfect for the job and included way more settings then I was comfortable playing with.<\/p>\n<p>I looked to manually minify our theme files but that always causes issues and extra work when editing a website in the future. It\u2019s not something I\u2019d ever recommend people do on websites they edit frequently and with WordPress the ability to edit files in the editor really prohibits minifying these files anyway.<br \/>\nIf the website were not using WordPress I\u2019d suggest Grunt as the perfect solution here. When setup to do so it will watch files being updated and automatically create minified versions of files for a developer then to upload.<\/p>\n<h2>Mod PageSpeed to fix the problems<\/h2>\n<p>So we had a number of problems to fix. Things like minifying files like HTML, eliminating render blocking JavaScript and CSS as well as prioritising above the fold content.<\/p>\n<p>In this instance we wanted to see how <a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/module\">mod_pagespeed<\/a>, an apache module provided by Google, would help speed along these fixes. Straight out of the box it minifies a number of filetypes and compresses images amongst other things.<\/p>\n<p>You can enable additional filters and for this website we enabled the following:<\/p>\n<ul>\n<li><strong> inline_google_font_css<\/strong> \u2013 a fix for the critical rendering path and deferring external JS<\/li>\n<li><strong>prioritize_critical_css<\/strong> \u2013 a fix to prioritise visible content by inlining some CSS code within the HTML file<\/li>\n<li><strong>collapse_whitespace<\/strong> \u2013 minifying HTML<\/li>\n<li><strong>defer_javascript<\/strong> \u2013 deferring JavaScript so it does not affect the critical rendering path<\/li>\n<\/ul>\n<p>After we enabled these we reached our current 90+ scores.<\/p>\n<h2>But this isn\u2019t the whole story<\/h2>\n<p>While I think we could improve our server response time we\u2019ve run a few follow up tests on <a href=\"http:\/\/www.webpagetest.org\" rel=\"nofollow\">WebPageTest<\/a> and noticed we\u2019ve still got some issues relating to first byte and start render times which possibly blow everything else we\u2019ve done out of the water.<\/p>\n<p>Even if we can achieve a 100 out of 100 score on PageSpeed Insights then our challenge clearly doesn\u2019t end there with start render times an area we could focus.<\/p>\n<p>But even if we achieved this there could be other speed testing services that highlight other opportunities for improvement and while we could chase perfect scores everywhere there must be a limit to how far you can optimize without adversely impacting what you\u2019ve built.<\/p>\n<h2>Conclusion<\/h2>\n<p>To be honest the challenge here was to chase the 100\/100 score with little respect for other concerns. We\u2019d never recommend doing this especially on client or other critical websites. Also if you care much about the source code other see in your website you really might want to avoid certain optimisation techniques.<\/p>\n<p>Personally I have particular issues with the prioritising of above the fold content. Using only mod_pagespeed increases the average page weight of the website and reduces the effectiveness of browser caching. There are workarounds being offered to this technique but they require a manual process and as yet are fairly new so we may find more options over the coming months that improve the process.<\/p>\n<p>While services like PageSpeed Insights help push us towards making our websites faster they are not hard rules to follow blindly in all cases. In many instances you need to use your expertise and choose which improvements are beneficial for your website and don\u2019t badly affect your workflow. Next we&#8217;ll be looking to take a more manual approach to some of these things and dig deeper into the effect on site speed rather than just PageSpeed Insights score.<\/p>\n<p>We all want to have a super-fast website but the speed of our websites is only one of many concerns and we need to keep this in mind if we start chasing ever decreasing load times at the expense of everything else.<\/p>\n<h2>Further Reading<\/h2>\n<p>If you want to know more about improving the speed of your website then these articles are well worth a look:<\/p>\n<ul>\n<li><a href=\"http:\/\/filamentgroup.com\/lab\/performance-rwd.html\" rel=\"nofollow\">Filament Group &#8211; Performance RWD<\/a><\/li>\n<li><a href=\"http:\/\/css-tricks.com\/authoring-critical-fold-css\/\" rel=\"nofollow\">CSS Tricks &#8211; Authoring Critical Fold CSS<\/a><\/li>\n<li><a href=\"https:\/\/gist.github.com\/scottjehl\/87176715419617ae6994\" rel=\"nofollow\">Scott Jehl &#8211; LoadCSS<\/a><\/li>\n<li><a href=\"http:\/\/timkadlec.com\/2014\/01\/fast-enough\/\" rel=\"nofollow\">Tim Kadlec &#8211; Fast Enough<\/a><\/li>\n<li><a href=\"http:\/\/timkadlec.com\/2014\/05\/performance-budgeting-with-grunt\/\" rel=\"nofollow\">Tim Kadlec &#8211; Performance Budgeting with Grunt<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>This week we decided to challenge ourselves to achieving a perfect 100 out of 100 score on Google PageSpeed Insights for davidnaylor.co.uk. So far we\u2019ve failed, but are happy to have moved much closer than the 70\/100 for mobile and 81\/100 for desktop that we started with a few days ago. The website now scores [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":1310,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[2],"class_list":["post-1307","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-and-ux"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.bronco.co.uk\/our-ideas\/wp-json\/wp\/v2\/posts\/1307","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bronco.co.uk\/our-ideas\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bronco.co.uk\/our-ideas\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bronco.co.uk\/our-ideas\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bronco.co.uk\/our-ideas\/wp-json\/wp\/v2\/comments?post=1307"}],"version-history":[{"count":0,"href":"https:\/\/www.bronco.co.uk\/our-ideas\/wp-json\/wp\/v2\/posts\/1307\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bronco.co.uk\/our-ideas\/wp-json\/wp\/v2\/media\/1310"}],"wp:attachment":[{"href":"https:\/\/www.bronco.co.uk\/our-ideas\/wp-json\/wp\/v2\/media?parent=1307"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bronco.co.uk\/our-ideas\/wp-json\/wp\/v2\/categories?post=1307"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}