Difference at Code Level
AMP Webpage code structure
<!doctype html>
<!-- This tells the browser that this
is an AMP file. `<html >` works too. -->
<html amp>
<head>
<!-- The charset definition must be the
first child of the `<head>` tag. -->
<meta charset="utf-8">
<script async
src="https://cdn.ampproject.org/v0.js">
</script>
<!-- AMP HTML files require a canonical link pointing
to the regular HTML. If no HTML version exists,
it should point to itself -->
<link rel="canonical" href=
"https://amp.dev/documentation/examples/introduction/hello_world/index.html">
<!-- AMP HTML files require a viewport declaration.
It's recommended to include initial-scale=1 -->
<meta name="viewport"
content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-custom>
h1, h2 {
color: forestgreen;
}
</style>
<style amp-boilerplate>
body {
-webkit-animation: -amp-start 8s
steps(1, end) 0s 1 normal both;
}
@keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
</style>
<noscript>
<style amp-boilerplate>
body {
animation: none
}
</style>
</noscript>
</head>
<body>
<h1> Hello World !! </h1>
<h2>
This is w3wiki. Follow us for more content.
</h2>
</body>
</html>
HTML Webpage code structure
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="description" content="">
<title>Normal HTML</title>
<meta name="viewport"
content="width=device-width, initial-scale=1">
</head>
<body>
<style>
h1, h2{
color: forestgreen;
}
</style>
<h1> Hello World !! </h1>
<h2>
This is w3wiki. Follow us for more content.
</h2>
<script src=""></script>
</body>
</html>
Accelerated Mobile Pages (AMP pages)
As we are seeing the demand for mobile phones is very large as compared to desktops or laptops. According to some sources, India has over 1.2 billion mobile phone users that’s why good organizations start focusing on mobile phones first.
So a question comes to mind how we can increase performance and user experience on mobiles? Let’s discuss about the Accelerated Mobile Pages (AMP) approach with some examples.
Table of Content
- What is Accelerated Mobile Pages?
- History of AMP pages
- How AMP is improving performance?
- How AMP Works?
- AMP HTML
- AMP JavaScript
- AMP Cache
- Difference
- Difference between the codes
Contact Us