Website performance and an introduction to AMP
•Download as PPTX, PDF•
0 likes•48 views
Why website performance matters, and what is the business cost of not improving your page speed. Part two is looking at the AMP project, including AMP stories and AMP email
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Website performance and an introduction to AMP
Similar to Website performance and an introduction to AMP (20)
Recently uploaded
Recently uploaded (20)
Website performance and an introduction to AMP
- 1. Website performance and an introduction to AMP Michael Gearon @michaelgearon
- 2. UX, UI and Performance Specialist Based in Cwmbran, South Wales. With years of experience in the digital industry https://michaelgearon.co.uk
- 3. A leading UK financial services, utilities and home services comparison website
- 5. The impacts of website performance According to surveys done by Akamai and Gomez.com, nearly half of web users expect a site to load in 2 seconds or less, tend to abandon a site that isn’t loaded within 3 seconds. 79% of web shoppers who have trouble with web site performance say they won’t return to the site to buy again and around 44% of them would tell a friend if they had a poor experience shopping online. https://blog.kissmetrics.com/speed-is-a-killer/
- 7. Websites need to go on a diet March 2011 - Average size 735kB March 2017 - Average size 2569kB
- 8. The web is set to grow The provision and consumption of video on mobile devices via web and apps is growing rapidly. Mobile video is already 60% of total mobile data traffic worldwide and is expected to be 78% by 2021 according to Cisco’s Visual Networking Index (VNI).
- 10. Customers tend to abandon a site that isn’t loaded within 3 seconds
- 12. Let’s try it…
- 15. The Potential? • Gizmodo: 100k AMP page vists daily, 3x faster page load time, 50% increase in impressions • Wired: 25% increase in CTR from search results, + 63% in CTR on ads in AMP stories, 100k stories AMP’ed from 20+ year archive • NoBroker: 25% increase in new user registration, 77% increase in connections, 18% reduction in bounce rate, 10% increase in pages per session
- 17. Accelerated Mobile Pages Improve user engagement with fast, compelling experiences. Web page speed improves the user experience and core business metrics. AMP pages load near instantly enabling you to offer a consistently fast experience across all devices and platforms that link to AMP Pages including Google, Bing, LinkedIn and more. These performance gains often translate in improvements in the numbers that matter, such as time spent on page, return visits and CTRs.
- 18. What is different? • Speed, this is the main objective! • No custom JavaScript • Size all resource statically • All CSS must be inline and size-bound (50kB) • Minimize style recalculations • Font triggering must be efficient
- 19. What does it look like?
- 20. AMP only news carousels
- 21. What does it look like?
- 24. Is AMP all good?
- 27. Google can do whatever they want. They are an independent company and if they wanna tell us that we have to use a special format to have benefits on their platform, then that's the way it is. https://css-tricks.com/amp-news/
- 28. The Potential? • Gizmodo: 100k AMP page vists daily, 3x faster page load time, 50% increase in impressions • Wired: 25% increase in CTR from search results, + 63% in CTR on ads in AMP stories, 100k stories AMP’ed from 20+ year archive • NoBroker: 25% increase in new user registration, 77% increase in connections, 18% reduction in bounce rate, 10% increase in pages per session
- 30. Does page speed affect my SEO ranking?
- 31. Yes!
- 32. Mobile – “Speed Update” • From July 2018 Google is going to consider page speed a ranking factor for mobile searches • It will mostly impact really slow website • A slow page may still rank highly if it has great, relevant content
- 33. What can you do
- 34. Performance culture • Get alignment between your designer, developers and your marketing teams • Run performance experiments and measure outcomes • Set yourself goals
- 35. 2G Tuesday’s • Facebook is adopting a new opt-in initiative called "2G Tuesdays.” • For that next hour, their experience on Facebook will be very much like the experience that millions of people around the world have on Facebook on a 2G connection • The initiative is designed to help employees empathize with users in booming markets like India, Thailand, and much of Latin America, but also to help them work out what they could improve about the app to make it more usable on slower connections
- 36. Top tip: Be at least 20% faster than your competitors https://www.smashingmagazine.com/2015/09/why-performance-matters-the-perception-of-time/#the-need-for-performance-optimization- the-20-rule
- 37. Tools you can use
- 43. Quick Wins
- 45. Minification of JS and CSS
- 47. Technical – Use a CDN network
- 49. The Future
- 50. AMP Stories
- 52. AMP for Email
- 53. AMP For Email To modernize one of the most popular and widely used communication channels: email. Many people rely on email for information about flights, events, news, purchases and more— over 270 billion emails are sent each each day! With AMP for Email, information in email messages can can be dynamic, kept up-to-date and made actionable. We’re really really excited about the possibilities — developers and businesses businesses will be able to send more expressive and interactive email messages than ever before.
- 56. Useful Links • https://validator.ampproject.org/ • https://chrome.google.com/webstore/detail/lighthouse/blipmdconlk pinefehnmjammfjpmpbjk • https://chrome.google.com/webstore/detail/amp- validator/nmoffdblmcmgeicmolmhobpoocbbmknc • https://www.theverge.com/2015/10/28/9625062/facebook-2g- tuesdays-slow-internet-developing-world • https://www.smashingmagazine.com/2018/01/front-end- performance-checklist-2018-pdf-pages/
- 58. Any Questions?
Editor's Notes
- Hi everyone, I am going to do a quick talk around website performance and an introduction to AMP
- I’m Mike I am a UX/UI and website performance specialist Based in Cwmbran, South Wales @michaelgearon – Twitter
- I am a product designer at GoCompare and I have been there for 2 years Focusing on spilt testing, prototyping, user experience and user interface designing
- We will go on a quest to understand what is website performance and why it matters We will then look into AMP and what can it do today for you and where it is heading in the near future Finally covering tools and concepts you can takeaway from this to improve performance at your company
- Kissmetrics is a leading software company in the user experience industry They done a report named “Why Decreasing Page Load Time Can Drastically Increase Conversions” The findings were that people expect a website to load in 2 seconds or less 79% of people drop off if it isn’t loaded within 3 seconds With 44% of them telling a friend they had a poor experience
- A tweet I noticed back in 2016 is perfect example of what happens when you don’t focus on performance This rich media article is making 304 separate requests to images, tags and other media In total weighing 131mb and can take at least 2 minutes or more to load on a mobile connection Which if it is was me I wouldn’t wait for that!
- Between March 2011 and March 2017 the average web page has grown over 1.8mb Each year it has always increased, never decreased. Most of the increase has come from images, video and scripts. But you can see just overall every area has increased to some extent.
- Cisco has calculated that the web is going to continue to grow One of the main things to grow is video of around 18% And with mobile set to overtake computers it is clear people expectations are rich media on demand and on the go
- At GoCompare we have analyzed how we compare to our competitors and have quickly realized we are behind We are now on a mission to improve website performance and to form a culture around performance A good starting place is for you to also look at where you site compares to your competitors
- When comparing yourself to others remember that customers tend to abandon a site that isn’t loaded within 3 seconds
- I am no mathematician but… If your website takes say 8 seconds to load and people tend to abandon a website after 3 seconds there is a clear area to improve
- Set up website before presentation with the 3G connection on Run through a website for a few minutes…
- Who else feels like this Panda after seeing that...?
- You want to feel like this instead!
- So what are the potential gains of improving website performance? Since rolling out Gizmodo reported 100k AMP page visits daily, with 3 time faster page load time Or if we look at wired a leading digital blog they have seen a 25% increase in click through rate from search results
- So far we have seen how bloated the web is And how painful it is for our customers and in-turn how they react when they have a slow web experience So how do we tackle this?
- AMP stands for Accelerated Mobile Pages AMP is a very lightweight version of a webpage It offers user a fast way to browse through news articles and landing pages For publishers this should mean improvements in average time on page, return visits and click through rates
- AMP is all about speed, no custom JavaScript, and your resources which are, images, videos and other media must be compressed. You also have to limit the amount of CSS which is the styling of your website to 50kB which is ample for a landing page and you can also use custom fonts. Overall AMP gives you the ability to still have a bespoke landing page and doesn’t limit you too much. It is more about being sensible with how you build your pages.
- On Google you will notice AMP by one element The lightning symbol, this is the only noticeable difference between a standard page and an AMP page
- There is also AMP only news carousels which take a prominent view in Google Google recently announced that it will change this to allow non-AMP pages also join the carousel but have not indicated when and how you can achieve this You can see with the top stories that it includes the publisher logo, the AMP symbol as well as a preview image of the article
- When you load an AMP article the most noticeable difference is that there is an additional header You can share the link of the article, which AMP recently changed. It is used to show an AMP cache URL but now it displays the publishers URL since January 2018 The other useful feature is the ability to swipe left and right on news articles with speed
- There are other companies which have jumped on this focus for website performance like, Facebook Instant Articles Publishers can use this platform to create interactive articles on Facebook, or there is
- Another similar initiative is from Apple where they introduced a app called News back in 2015 The app works by pulling in content from the web like a RSS feed
- AMP has spilt the web community with plenty of people annoyed by AMP Some of the titles include ‘kill google amp before it kills the web’ and ‘google amp is not a good thing’
- You could say
- And if you look really closely you will notice that people are using AMP when they are ‘disagreeing’ with it
- As CSS tricks reported, Google can do whatever they want They are an independent company and if they want to tell us that we have to use a special format to have benefits on their platform, then that’s the way it is
- What we got to remember that Gizmodo reported 100k AMP page vists daily, with 3 time faster page load time Or if we look at wired a leading digital blog they have seen a 25% increase in click through rate from search results All these figures lead to one thing which is…
- Money!
- So the big question is, does page speed affect my SEO ranking?
- Google has indicated site speed (and as a result, page speed) is one of the signals used by its algorithm to rank pages. And research has shown that Google might be specifically measuring time to first byte as when it considers page speed. In addition, a slow page speed means that search engines can crawl fewer pages using their allocated crawl budget, and this could negatively affect your indexation.
- From July 2018 Google is going to consider page speed a ranking factor for mobile searches It will mostly impact really slow website A slow page may still rank highly if it has great, relevant content
- So, what can you do
- Get alignment between your designer, developers and your marketing team as they upload content to the website Run performance experiments and measure outcomes – both on mobile and desktop Set yourself goals, it is not enough just to say ‘we will improve web performance’, you need to establish some measurable and trackable goals and observe them. Make it tangible and realistic
- Facebook came up with an initiative that every Tuesday for one hour they will have to use their own website on a slow connection We are used to using fast internet connections in the office Imagine using our website on a slow connection to see what it is like for our customers
- According to research if you want to appear faster than your competitors you need to aim to be at least 20% faster. Study your competitors, and write down your findings. By doing this research you will then set yourself your metrics to aim for, or in other words your performance budget
- Lighthouse is a tool not just for website performance but it can also give you accessibility, progressive web apps and more suggestions to improve your overall user experience It is an open sourced, free tool which gives you a comprehensive audit Easy to get going with, all you have to do is install the Chrome plugin, and then it will generate the audit for you
- PageSpeed Insights gives you detailed feedback on what your webpage is doing well and not so well It gives you a score out of 100 for both desktop and mobile devices – which can be a bit addictive when you start trying to improve performance
- Web Page Test - test URL’s for free Useful features, select location and browser. Top tip is if you click ‘Advanced Settings’ you can also test on mobile connections such as 4G and 3G connections You can then view your website performance as well as viewing a video showing your website loading in
- If your website runs off WordPress then AMP for WordPresss plugin is a great way to get going with AMP However, there are a few pages which aren’t supported and although the out of the box solution is fine you may need to do some configuration
- Finally there is also AMP playground where you can try the different AMP-components and understand how AMP works a little more
- Here is a few quick techniques to make a noticeable difference on website performance
- As we saw at the start images account for a large percentage of a page weight. A good place is to compress the images and use the best image format.
- A really simple technique is minifying your JavaScript and CSS All that minifying means is that you remove redundant styling as well as unneeded spacing, prefixes and other CSS rules that are no longer needed
- In general, the more HTTP requests your web page makes the slower it will load. A browser is limited to opening only a certain number of simultaneous connections to a single host. Reducing the amount of requests to files such as images, video’s and fonts will make a big impact on your web performance
- CDN is short for content delivery network. A CDN is a system of distributed servers that deliver pages and other Web content to a user, based on the geographic locations of the user, the origin of the webpage and the content delivery server. This service is effective in speeding the delivery of content of websites with high traffic and websites that have global reach. The closer the CDN server is to the user geographically, the faster the content will be delivered to the user. CDNs also provide protection from large surges in traffic.
- There are just a few tips to get you going!
- So where is AMP heading in this year
- First of all AMP recently announced AMP stories
- Secondarily there is AMP for email
- An untouched area is email, Google wants to change how emails work By adding the ability to make emails interactive and more relevant This release date of AMP for email is to be confirmed and it will only be on Gmail to start with
- Start at 20:17
- In terms of AMP I think it will always spilt opinions whether it is good or bad. However, if it improves click through rates and at the end of the day your revenue then who cares, isn’t it worth it? Also, website performance is important, we produce great content that we want people to view, watch and share. If we deliver a slow experience people are less likely to view it.
- Here are some useful links if you would like to find out more about website performance
- Thanks for listening. Any questions?