Accelerated Mobile Pages (Google AMP) Explained

Techquickie ·Techquickie ·2019-05-06 · 944 words · ~4 min read
Floatplane YouTube

Transcript

JSON SRT VTT 83
0:00 Thanks for watching Techquickie.
0:01 Click the subscribe button, then enable notifications with the bell icon so you won't miss any
0:05 future videos.
0:07 So mobile internet sure has come a long way since the days of downloading sick ringtones
0:11 to our flip phones.
0:13 But using a browser on the latest smartphone still presents some challenges.
0:17 Clunky advertisements that take up the whole screen right as you're about to scroll down,
0:21 poor responsiveness caused by too much page clutter, and spotty connections in some areas
0:26 that can all be incredibly frustrating.
0:28 And all of these issues were the inspiration for Google's AMP project, something you've
0:32 probably taken advantage of without even realizing it.
0:36 You see, whenever you run a Google search on a mobile device, you might notice a small
0:40 lightning bolt icon beside a given search result to let you know that if you click on
0:44 it, you'll be served an AMP version of that page.
0:48 Now this page won't come to you directly from the site you're trying to view.
0:51 Instead, after the administrator of the site creates an AMP version of the page, it'll
0:56 be automatically pushed to a CDN or console.
0:58 You'll see that the AMP version of the page will be pushed to a CDN or console, and the
1:01 CDN will be pushed to a CDN or console.
1:02 These AMP caches then push the page to your phone, with the goal of improving loading
1:06 times.
1:07 But this isn't the only difference between an AMP and a regular page.
1:11 If one of your favorite sites often takes a long time to load, the culprit may not be
1:15 a server with a slow connection.
1:17 Instead, there might be complicated HTML elements that take a long time for your browser to
1:22 render, poorly written CSS that makes the page look like a mess, or scripts that ask
1:27 for more resources than you need.
1:28 So instead of allowing website owners to design their pages however they want, AMP uses its
1:35 own customized and stripped-down versions of HTML and JavaScript.
1:40 These prevent the implementation of layouts that are slow, clunky, or disruptive to the
1:45 user, like the dreadful full-screen ads I mentioned before.
1:48 In fact, one of AMP's built-in restrictions is that ads can only take up a certain amount
1:52 of space on the screen.
1:54 You'll still see them, of course.
1:56 But an AMP page should mostly be the actual content.
1:58 It should be the content you want to see, rather than the scammers screaming at you
2:01 about a fat-busting juice cleanse.
2:05 And AMP is also smart enough to judge the relative importance of each element of the
2:09 web page.
2:10 So if you're trying to read an article about the latest big scandal, it'll try to load
2:14 things like the article text and an unflattering picture of your local politician before, say,
2:20 an ad that you won't see until you scroll to the end of the page.
2:24 Combine all of this with limiting other resource-hogging effects like animations, and it's going to
2:28 end up doing a pretty decent job of making the mobile browsing experience less rage-inspiring
2:34 overall.
2:35 Now, it does have its limitations.
2:37 The restrictions on page elements and style mean that it works best for news articles
2:41 consisting of mostly text and a few still images, rather than highly interactive websites
2:46 more suited to a desktop browser.
2:49 But if you are doing lots of your browsing on mobile, see if you notice a difference
2:53 the next time you load up an AMP page.
2:55 After all, this new world of constant connectivity has gotten us all into a situation where we're
2:56 not able to read and write.
2:57 We're not able to read and write.
2:57 We're not able to read and write.
2:57 We're not able to read and write.
2:57 We're not able to read and write.
2:58 We're not able to read and write.
2:58 We're not able to read and write.
2:58 We're not able to read and write.
2:58 We're not able to read and write.
3:00 We've gotten all amped up on instant gratification, so, if it can be slightly more instant, so
3:03 much the better, right?
3:05 Are you interested in computer science?
3:06 Then, check out Brilliant, a problem-solving website that teaches you to think like a computer
3:11 scientist.
3:12 Instead of passively listening to lectures, you get to master concepts by solving fun
3:16 and challenging problems, and Brilliant provides the tools and framework you need to tackle
3:21 these challenges.
3:22 Brilliant's thought-provoking content, based around breaking up complexities into bite-sized,
3:26 understandable chunks, will lead to you finding a tool that disappears your bottlenecks.
3:27 But you can do a full 84 hours of data analysis of a things that actually help make a difference
3:27 and a thing that doğnik I will leave shift to.
3:28 from curiosity to mastery, and you'll be in the company of over five and a half million
3:32 members who share your curiosity and love for math and science.
3:36 So what are you waiting for?
3:37 You can support Techquickie and learn more about Brilliant by clicking the link down
3:40 in the video description or going to brilliant.org slash Linus Tech Tips and signing up for free.
3:45 The first 200 people to go to the link will get 20% off an annual premium subscription,
3:50 so be sure to check it out.
3:51 Okay guys, thanks for watching Techquickie.
3:53 Like, dislike, check out other channels, leave a comment down below with your suggestions
3:56 for future videos, and don't forget to subscribe.