Posts

Advanced AMP Optimization Tips

amp

Today, the use of mobile phones are growing drastically. Mobile devices have reformed our way of accessing information. Nowadays we consume a vast amount of data through our mobile phones. So mobile web becomes an indivisible part of our daily life. Publishers utilized these mobile web to reach the targeted mobile users. But the experience of mobile browsing is often not appeasing and need to wait a long time for the pages to be loaded. So the  requirement of better AMP optimization techniques is highly recommended.

Due to the bad website experience, publishers lost their customers and business to a great extend. In order to avoid this situation, Google introduced a new open source initiative called Accelerated Mobile Pages(AMP), which aims to improve the performance of mobile web. We can perform AMP optimization techniques to improve the performance of websites on mobile.

 

How to make fast web pages?website slow

  • Simplify web pages by using less Javascript files.
  • Optimize bandwidth
    ○ Use best content for device (image resolution etc.)
    ○ Parallelize the loading (asynchronous load)
  • Store local copies of web pages on Content Delivery Servers.

Content Delivery Networks (CDN)

Content delivery networks is a collection of web servers that are distributed geographically across the earth. It’s goal is to serve the content to end-users with high availability and performance. CDNs virtually reduce the physical distance between the source server and end-user. When we distribute our content through CDNs,  it routes the user requests to the closest CDN server according to the position of the end-user on internet. Usually, each CDNs will stores a cached version of its content in multiple geographical locations.

cdn

Commonly CDNs are used to host static contents like images, videos, CSS, JavaScript etc. But the use of single domain will cause limitation for simultaneous connections to the server. For CDN files, they are hosted on different servers. So, there is no limit for connections to a CND server. Through CDNs, we can  achieve better mobile performance optimization such as smaller bandwidth, load distribution and shorter load time.

Accelerated Mobile Pages(AMP)

AMP Project is an initiative fromamp page Google to provide a solution for faster mobile websites. It is an open source coding standard for publishers. The main goal of the technology is to help the publishers to create mobile-friendly content and load it faster as possible. AMP optimization of web pages will provides content to the user much faster and brings better user experience. It does not tries to unify the appearance of web pages on mobile. But helps to create a common core and structure to speed up load times.

AMP pages are none other than HTML pages with a limited set of HTML tags. The use of limited HTML tags will reduce the load time of web pages. AMP HTML can be rendered on any modern browser. To optimize delivery times for pages, Google maintains a Google AMP Cache. AMP can improves server performance too. It can be an SEO activity focusing mobile users.

Google AMP Cache

AMP cache will  cache all AMP optimized pages and it serves to everyone at no cost. It means that the content provider does not have any additional work for caching AMP pages. The combination of caching distribution system and limited HTML structure will increase the speed of delivering content to the user.

AMP framework Components

This framework consists of three components:framework components

  • AMP HTML :

It is a standard HTML markup with web components.

  • AMP JavaScript :

It will manage the resource loading.

  • AMP Caches :

It helps to serve and validate AMP pages.

 

AMP Optimization of Web pages

This optimization technique makes the AMP pages really fast. The main idea is to restrict everything on the page, what could be extremely slow and provide another solution for the particular issue. It includes:

  • Allows asynchronous scripts only
  • Static sizes of all resources
  • Don’t let extension mechanisms block rendering
  • CSS style sheet limitation

1. Allows asynchronous scripts only

AMP Pages does not allow  any JavaScript that is synchronous. JavaScript files are usually synchronous. So it can modify basically all aspects of the page and cause delays during the page rendering. In AMP, JavaScript must be declared as async. It informs the browser that, the execution of JavaScript is not crucial to build the web page.

Example : <script src=”https://example.com/javascript.js” async></script>

2. Static sizes of all resources

The size of all external resources on the page like videos, images, advertisements, etc must be known in advance before downloading them. So that AMP can pre-determine each element’s size and position before the resources are downloaded. Hence AMP loads the layout of the page without waiting for any resources to download.

3. Don’t let extension mechanisms block rendering

Usually AMP doesn’t let extension mechanisms to block page rendering. If we want to use some social media embeds like tweets, instagram etc in our page. All these embeds always requires some additional HTTP requests to load. So we need to inform the AMP system that we will use some custom script which requires a custom tag. During this situation custom tag is mentioned in head of the page.  AMP will create a box for our custom tag before it knows what will be its content.

Example : <script async custom-element=”amp-iframe”  src=”https://cdn.ampproject.org/v0/amp-    iframe-0.1.js”></script>

4. CSS style sheet limitation

Cascade style sheet(CSS) files are usually large and contains styles for the whole site. It can also delays the loading time of a web page to an extend. The size limit for custom AMP CSS is 50 kilobytes. So we must reduce the size of our external CSS to 50 KB. In order to avoid other http requests during page rendering, all the CSS must be written as inline.amp working

AMP Optimization Steps :

  • Include AMP symbol within the HTML tag.
  • Add canonical tag.
  • Include AMP library file.
  • Specify a viewport.
  • AMP CSS validation.
  • AMP boiler plate.
  • Replace <img> with <amp-img>
  • Link AMP content
  • AMP page validation

HTML page before AMP optimization

article.html file :

<!doctype html>
<html lang="en">
  <head>
    <title>News Article</title>
    <link href="base.css" rel="stylesheet" />
    <script type="text/javascript" src="base.js"></script>
  </head>
  <body>
    <header>
      News Site
    </header>
    <article>
      <h1>Article Name</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas tortor sapien, non tristique ligula accumsan eu.</p>
    </article>
    <img src="mountains.jpg">
  </body>
</html>

1. Include AMP symbol  ⚡ within the HTML tag

  • Copy  entire code from the HTML file( eg:  article.html ) and paste it into a new file.
  • Save the new file as  article.amp.html.
  • Add the attribute ⚡ to the <html> tag in the head section.
           Example: <html ⚡ lang="en">

2. Add canonical tag

  • Every AMP document must posses a link referencing to its ‘canonical version’ of that document.
  • We must provide the absolute URL of original HTML page.
  • Then the tag must be included in head section.
   Example: <link rel="canonical" href="/article.html">

3. Include AMP library file

  • To begin AMP optimization we should add AMP library file.
  • It can help us to figure out,what all we need to fix.
  • Tag must be included in the head section.
   Example: <script async src="https://cdn.ampproject.org/v0.js"></script>

4. Specify a viewport

  • AMP requires  definitons for width and minimum-scale for the viewport.
  • Its values must be device-width and 1, respectively.
  • Viewport is a common tag used in head section.
   Example: <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

5. AMP CSS validation

  • In AMP page we cannot include external stylesheet.
  • Reduce the size of  base.css file to 50 KB.
  • Embed the style sheet within  <style amp-custom></style> tag as inline styles.
   Example: <style amp-custom>

                 /* The content from base.css */

            </style>

6. AMP boiler plate

  • Add the AMP boilerplate code to the bottom of the <head> tag.
  • Boilerplate helps to hide the content of body section until the AMP JavaScript library is loaded.
  • It will helps to prevent unstyled content from rendering, also known as Flash Of Unstyled Content (FOUC).
  • FOUC : It means a situation where a web page appears briefly with the browsers default styles prior to loading an external CSS.
boilerplate

AMP boiler plate code

 

7. Replace <img> with <amp-img>

  • AMP designed special web component to replace the <img> tag with <amp-img> tag.
  • In AMP, we need to define the width, height and layout for amp-img elements.
  • So AMP can per-determine the aspect ratio of the element.
  • layout attribute is used to specify, how we want the element to be positioned and scaled.
  • Attribute layout =”responsive” is provided to inform that our image can be scaled and resize.
  • But amp-img tag is added to the body section of the HTML page.
   Example:<amp-img src="mountains.jpg" layout="responsive" width="266" height="150"></amp-img>

8. Link AMP content

  • The next step is to link the canonical version to the AMP page.
  • This is achieved by including a <link rel="amphtml"> tag to the <head> section of the original non-AMP HTML page.
  • While generating AMP versions of traditional non-AMP HTML pages.
  • Both versions have generally the same content, but have different presentations.
  • So we should treat the traditional HTML pages as the “canonical” pages.
  • Pair the AMP pages with canonical pages.
   Example: <link rel="amphtml" href="/article.amp.html">

 

link

8. AMP Page Validation

  • This is the last step in AMP optimization.
  • Here we validate our AMP page created in AMP validator to check whether it is optimized or not.

amp validation

AMP Page After Optimization

article.amp.html :

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <link rel="canonical" href="/article.html">
    <link rel="shortcut icon" href="amp_favicon.png">
    <title>News Article</title>
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    <style amp-custom>
      body {
        width: auto;
        margin: 0;
        padding: 0;
      }
      header {
        background: Tomato;
        color: white;
        font-size: 2em;
        text-align: center;
      }
      h1 {
        margin: 0;
        padding: 0.5em;
        background: white;
        box-shadow: 0px 3px 5px grey;
      }
      p {
        padding: 0.5em;
        margin: 0.5em;
      }
    </style>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
  </head>
  <body>
    <header>
      News Site
    </header>
    <article>
      <h1>Article Name</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas tortor sapien, non tristique ligula accumsan eu.</p>
      <amp-img src="mountains.jpg" layout="responsive" width="266" height="150"></amp-img>
    </article>
  </body>
</html>

 

/by

Major Advantages Achieved Using CSS Sprites 

Some useful thoughts on advantages of using CSS sprites are 
shared with this blog post.

Major Advantages Achieved Using CSS Sprites

The most preferred methods for mitigating the number of image request are CSS (Cascading Style Sheets) sprites.

You can amalgamate background image in a solitary one and can utilize CSS background position and background image properties to show the required image segment.

A useful way of reducing HTTP request and dropping the dimension of your page is by combining inline images in the cached style.

An important point to remember is that inline images are still not easily supported across major browsers 40–60 percent of routine visitors surfing your site usually come with an empty cache thereby making your webpage load at a faster speed for the visitors coming for the first time. This ensures a ‘better user experience’.Major advantages achieved using CSS Sprites

CSS can be employed to create banners and buttons. It is simple to use a crystal clear PNG image file. With the aid of CSS, it is easier to create dynamic images that are great in looks and have less code lines.

Most of the top web sites spend around 5 percent to 38 percent of the time in downloading the HTML document. The remaining 62 percent to 95 percent of the time in downloading is exhausted in making HTTP requests for fetching all the constituents in the HTML document (i.e. scripts, images, and style sheets).

The presence of having various components in the webpage is enhanced by the fact that browsers usually download just two or four constituents in ‘parallel per hostname’ depending on HTTP version of user’s browser and the response.

Our vast experience suggest that decreasing the number of HTTP requests had the largest impact on mitigating time and is frequently the most simplest performance development to make.

The above mentioned are the major advantages achieved using CSS Sprites. These advantages are also the main reason for its popularity among developers.

website-design-companyBenefits of CSS Sprites in SEO

A request for the required webpage is made at the server whenever a web browser visits a website. The webpage comprises of images reference in its HTML code. These can be as photos in graphics or blog posts to create a theme the site.

All the images are individual files and it’s the responsibility of the browser to request them separately and individually. For every image incorporated in the webpage, the browser must initiate an individual request asking for that image from the related server. This request is finally processed by the concerned server and the file is sent back to the browser. The entire process of transferring back and forth for every file requires a trivial amount of processing and bandwidth.

CSS sprites are revealing enhanced usage credibility in web designing based on Search engine optimized. The technical aspects of CSS sprites are effectively utilized by ‘high traffic social media social sites such as Facebook, Twitter, Digg and Search Engines such as Yahoo. Rapid loading time of nowadays’ heavy traffic database sites rendering them the favorite sites for web surfers. Large scale businesses and small scale businesses are now realizing and pondering that they are using sprites to their present ‘website’s front end design’.

Image Courtesy:

1) hurricanesoftwares.com

 

 

 

 

/0 Comments/by