{"id":6095,"date":"2019-02-15T08:54:44","date_gmt":"2019-02-15T07:54:44","guid":{"rendered":"https:\/\/www.red-orbit.com\/blog\/?p=6095"},"modified":"2019-02-15T08:54:44","modified_gmt":"2019-02-15T07:54:44","slug":"web-performance-2019-aiming-global-super-speed","status":"publish","type":"post","link":"https:\/\/www.red-orbit.com\/blog\/web-performance-2019-aiming-global-super-speed","title":{"rendered":"Web Performance 2019: Aiming for Global Super-Speed"},"content":{"rendered":"

Fast-loading web pages<\/strong> have never been so important. According to a recent Nielsen study, the\u00a0results are unambiguous: 40% of all visitors<\/strong> leave a website if they can’t properly interact with it\u00a0within two seconds<\/strong>.\u00a0<\/p>\n

To kick things off, I\u2019ll present a recommendation outlining a set of key metrics<\/strong> which go much further\u00a0than the commonly known PageSpeed Insights Score (PIS) from Google – because measuring web\u00a0performance<\/strong> is so much more than just observing at a single number. Granted, Google \u201cupgrades\u201d\u00a0their tool frequently, but nevertheless, there\u2019s a broad variety out there and I\u2019ll give you my\u00a0suggestions on what\u2019s important to measure, and how to do it.\u00a0Contemporary websites should utilise the measurement of paint timings and pay special attention to\u00a0the \u201ctime to first meaningful paint\u201d event which marks the point when the most significant above the fold layout change has occurred, and when the most important element is visible:<\/p>\n

\"\"<\/p>\n

Think YouTube: when you\u2019re visiting the site, all you really care about is the video \u2013 this element\u00a0needs to be there super-fast; elements like navigation, logo, related videos or comments can follow,\u00a0but the video is your hero element and needs to be there fast!\u00a0Measuring paint timings ties in nicely with a concept known as critical rendering path optimisation \u2013\u00a0something Google is currently discussing a lot. Essentially, this is commonly referred to as the initial\u00a0view<\/strong> (which is essential for any user since it\u2019s the section of the website they see on their screen\u00a0immediately), followed by all the below the fold content<\/strong> (which isn\u2019t critical as you\u2019d have to scroll down to see it) as illustrated here:<\/p>\n

\"\"<\/p>\n

Generally speaking, a fast-loading initial view has a direct impact<\/strong> on the perceived performance of\u00a0your website. To implement this, you need to turn off as many render blocking elements as possible\u00a0(such as JavaScript or CSS), otherwise the browser will have to wait for each of these files to return\u00a0before continuing to render.<\/p>\n

So, from a CSS loading perspective, this could look something like this:<\/p>\n

\"\"<\/p>\n

To speed up your CSS delivery as much as possible, I\u2019d recommend undertaking the following steps:<\/p>\n