AMP? Never heard of it..
With the ever evolving technology that causes our lifestyles to change, ensuring your business, brand or message stands out is the key to successful online marketing. Over half a million websites have already implemented a new feature to their online presence. Accelerated Mobile Pages, AMP for short, is an open source collaborative project that has been improving by the week. Although AMP is currently limited on it’s compatibility as far as design and incorporating interactive elements, the reasons behind the AMP project is impressive.
Everyday we see others glued to their phones and constantly being connected to the internet. With that, data is easily collected by experts allowing for statistics to be created that are somewhat shocking. The attention span of the average user is becoming smaller and smaller which has driven website developers to create methods of ensuring their content is presented as fast as possible. The statistic presented in a Google Webinar stated that on average, “If the page doesn’t load within three seconds, 40% of the users will go back and leave your site without ever fully loading your site.” (Google Webinar)To a owner of that slow website, that’s a scary thought, in theory if your site isn’t loading within those three seconds, 40% of your potential visitors and/or customers will never see your website all because they were impatient and deemed your website to be lower in rating han a website whose load time was faster. AMP is the attempt to mediate that issue between the visitor and the website without the visitors noticing a big difference in presentation.
While every mobile phone company promises to be able to deliver 4G LTE super fast internet to their users, web developers aren’t taking the chance to be reliant on their visitors to have the fastest speeds constantly while accessing the internet. As quoted by Ilya Girgorik, “A 4G user isn’t a 4G most of the time” meaning that most cell phone users on average migrate from their “4G” to “3G” all the way down to possibly roaming back to “4G” during their everyday travels. The signal strength of a device isn’t reliable and while a user could have a “4G” super fast connection, designing the site based on the slowest speed will help improve the experience to those accessing the page.
The term RAIL has become a popular term for ensure the best performance of a site. R standing for the response time of the website reacting to input from the user. A standing for Animate, in terms of any interactive elements to the site, with this performance model, the website should be reactive within 8ms. The period of time after the initial load is considered the Idle time which stands for the “I”. In that Idle time, the amount of data being transferred should be kept to 50ms chunks of data which in turn can help save battery power of the device the user is browsing on. Transferring of large amounts of data could drain the battery of the device creating a thought that the website isn’t user friendly. Who would want to return to a website if you have always plug in the power cord to see it because of the amount of processing power required. Finally “L” standing for the time it takes to initially display the first blocks of the website from the moment the user attempted to access the site. The website won’t be fully loaded but blocks where the elements should belong will be displayed until the actually content is loaded.
I have a responsive site, What’s so different about AMP?
AMP has strict rules when it comes to the web page structure to ensure that the page performs with the proper load time. For example, instead of the browser bogging down on loading an image first before other elements, the browser will draw a block where that image is suppose to live with precoded width and heights and continues to load the page. Once the page is initially loaded, the browser will return to that block where the image should be and load it. CSS is limited to 50kb in size and can only be inline and not linked to an external style sheet. Interactive elements such as videos are loaded in iframes, and aren’t fully loaded until the user clicks on the element. Instead of using data to load the youtube video, the site will load an image of that video in place. If the video is clicked, the browser stops loading other elements and downloads the embed video and begins to play. AMP uses some artificial thinking when it comes to how the user will interact with the site and will load objects in order based the likelihood of being clicked on. AMP comes with built in support for using analytics on your site and continuing to track users that access the AMP version of your site. Without the worry of ensuring the AMP version is also being tracked, AMP does the hard lifting and collects the data and reports the information back to your account.
AMP is an ever growing project that continues to improve and become a big player in how web developers enhance their mobile site. Using the AMP version of a site will use 10 times less data than visiting the regular version and is actually ranked higher than sites that don’t have an AMP version of their website. Google has already begun displaying the AMP lightning bolt in it’s searches under the link to let potential visitors know that the site is optimized to load correctly and timely on mobile devices. Although AMP is still in it’s beginning stages and may be scary to some developers, the concept behind the open source project is impressive. Ultimately to ensure that a website that looks great and functions properly on a desktop also looks great and functions properly according to the device and it’s screen size.
Referenced: