As a website developer, your primary aim is getting people to read your content as quickly and as effortlessly as possible. Today, mobile web pages offer up rich graphics and smooth scrolling. However, every day impediments such as resource-hungry ads and scripts keep you serving up your content suitably. Because of this, many users abandon the publisher’s content or choose instead to install ad blockers. For publishers, ad blockers can be a death sentence. They restrict the ad revenues many publishers depend upon to keep their sites alive. Developed by Google, Accelerated Mobile Pages (AMP) is an open source method of filling that void. It allows publishers to simultaneously serve up ads and content without impairing the user experience. AMP imposes new rules on HTML, JavaScript, CSS and many other elements so that pages are served up much more quickly and cleanly. So how does one get started learning to implement Accelerated Mobile Pages?
Getting started with AMP is essentially getting familiar with its three parts, AMP HTML, AMP JS and to a lesser extent, AMP CDN. AMP HTML is a markup language based on HTML fitted with custom tags, properties and many restrictions. It’s is not drastically different from basic HTML and adherents won’t encounter too much difficulty in embracing it. AMP JS is a JavaScript framework developed especially for mobile pages which determines loading order for web pages. Ordinary JS is not permitted within the AMP framework. Lastly, AMP CDN is an optional content delivery aspect of AMP which caches AMP pages while simultaneously imparting the necessary optimizations.
So how do different elements of the accelerated mobile page work to make the pages load more quickly? Here is a rundown of those elements.
HTML
Accelerated Mobile Pages uses a slimmed down version of HTML with baseline performance guarantees. While AMP HTML does not require the use of new rendering engines, it bans the use of certain tags. Tags such as iframe, embed and object are all excluded. In addition to this, all scripts with the exclusion of JSON and the script that loads AMP are likewise banned. HTML5 multimedia tags such as img, video and audio are replaced with the corresponding AMP tags, amp-img, amp-video, and amp-audio. AMP HTML documents require no special configuration and they can be served from a web server from just like any other HTML doc.
Accelerated Mobile Pages uses a slimmed down version of HTML with baseline performance guarantees. While AMP HTML does not require the use of new rendering engines, it bans the use of certain tags. Tags such as iframe, embed and object are all excluded. In addition to this, all scripts with the exclusion of JSON and the script that loads AMP are likewise banned. HTML5 multimedia tags such as img, video and audio are replaced with the corresponding AMP tags, amp-img, amp-video, and amp-audio. AMP HTML documents require no special configuration and they can be served from a web server from just like any other HTML doc.
JavaScript
Streamlining of JavaScript is essential to accelerating mobile pages. It is not that JavaScript itself is terrible, but JavaScript’s myriad of libraries, embeds and tools makes it one of biggest burdens on load times. As a result, performance guarantees begin with making strict rules on JavaScript use. For this reason, AMP does not allow author-written or third-party scripts. Additionally, lack of third-party JavaScript means that additions that publishers previously enjoyed such as comments and lead forms will not be available on mobile pages optimized with AMP.
Streamlining of JavaScript is essential to accelerating mobile pages. It is not that JavaScript itself is terrible, but JavaScript’s myriad of libraries, embeds and tools makes it one of biggest burdens on load times. As a result, performance guarantees begin with making strict rules on JavaScript use. For this reason, AMP does not allow author-written or third-party scripts. Additionally, lack of third-party JavaScript means that additions that publishers previously enjoyed such as comments and lead forms will not be available on mobile pages optimized with AMP.
CSS
The creators of accelerated mobile pages want developers to continue to work with CSS. While CSS can function in accelerated mobile pages, there are, of course, some restrictions. Style sheets must not exceed than 50 KB in size since Google believes that this is enough for a nicely-designed document. In addition to this, they must all be done with an inline sheet. AMP will not support externally linked sheets or element-level inline sheets. Finally, CSS is loaded only with a special extension.
The creators of accelerated mobile pages want developers to continue to work with CSS. While CSS can function in accelerated mobile pages, there are, of course, some restrictions. Style sheets must not exceed than 50 KB in size since Google believes that this is enough for a nicely-designed document. In addition to this, they must all be done with an inline sheet. AMP will not support externally linked sheets or element-level inline sheets. Finally, CSS is loaded only with a special extension.
Multimedia
Multimedia is handled differently in AMP than on regular web pages. Images, for example, must have explicit width and height information and must be accompanied by the amp-img tag. When the width and height of images are known beforehand, the page can designate a space for them to be displayed. This helps the page to keep its layout consistent and prevents it from jumping as it makes adjustments mid load. For animated gifs, on the other hand, you will utilize the amp-anim extended tag. Custom tags are also needed for videos, while a designated tag is set aside for YouTube videos.
Multimedia is handled differently in AMP than on regular web pages. Images, for example, must have explicit width and height information and must be accompanied by the amp-img tag. When the width and height of images are known beforehand, the page can designate a space for them to be displayed. This helps the page to keep its layout consistent and prevents it from jumping as it makes adjustments mid load. For animated gifs, on the other hand, you will utilize the amp-anim extended tag. Custom tags are also needed for videos, while a designated tag is set aside for YouTube videos.
Monetization
Accelerated mobile pages promise to speed up the traditionally slow load times of ads on mobile pages. With many users turning to ad blockers to shorten the load time, AMP promises to restore that lost loading time to users and publishers alike. Many of the most popular ad networks such as Amazon A9, Google AdSense andGoogle DoubleClick have already adapted the AMP ad components into their frameworks.
Accelerated mobile pages promise to speed up the traditionally slow load times of ads on mobile pages. With many users turning to ad blockers to shorten the load time, AMP promises to restore that lost loading time to users and publishers alike. Many of the most popular ad networks such as Amazon A9, Google AdSense andGoogle DoubleClick have already adapted the AMP ad components into their frameworks.
Analytics
Many may assume quite wrongly that the streamlined AMP framework has no place for analytics. However, the opposite is in fact true. In AMP analytics have been streamlined. Therefore instead of too many analytics slowing down site performance, it chooses one analytic tool that will report the data as many times as needed.
Many may assume quite wrongly that the streamlined AMP framework has no place for analytics. However, the opposite is in fact true. In AMP analytics have been streamlined. Therefore instead of too many analytics slowing down site performance, it chooses one analytic tool that will report the data as many times as needed.
So how can you prepare?
Clearly, the rules for AMP are incredibly strict. If your page violates any of the rules it will be deemed invalid. Publishers must become familiar with how this new HTML is structured, including its many no-nos. AMP HTML tags must be written in the correct places and the correct orders. The good news is that there are tools available that can validate your AMP pages for you. Both in Google Chrome’s developer tools and on the AMP project website you can have your pages verified. The tools will highlight all of your pages violations.
Clearly, the rules for AMP are incredibly strict. If your page violates any of the rules it will be deemed invalid. Publishers must become familiar with how this new HTML is structured, including its many no-nos. AMP HTML tags must be written in the correct places and the correct orders. The good news is that there are tools available that can validate your AMP pages for you. Both in Google Chrome’s developer tools and on the AMP project website you can have your pages verified. The tools will highlight all of your pages violations.
Accelerated Mobile Pages are a very new development. While some big publishers have begun adopting the guidelines, it is still too early to know how quickly it will catch on or how widespread its use will be. Yet, what AMP highlights is how important it is to be accessible on all platforms. It also highlights the importance of not alienating readers. AMP can go a long way towards shortening load times and helping publishers’ pages get the views they desire. Yet, is not a strategy that publishers should employ across the board. Pages meant for desktop access should be kept as such, however pages that are designated for mobile access should be Amped.
etiler
ReplyDeletegümüşhane
siirt
üsküdar
karabük
BTDMRD