The Be Nice AMP Project
Building static HTML that is fast for the end user doesn't need to be hard. Just follow these simple instructions and I promise you that your site will be really fast.
The Be Nice AMP Project is entirely built on existing web technologies and best practices, there's no magic here. You can use HTML, Javascript, CSS and images. However: Never ever load Javascript synchronously. Just don't do it.
And make sure to inline the CSS inside of head if you use HTTP/1.1.
Want to see the Be Nice project in action? Read the blog post! Do you want to know what is faster: The Be Nice project or the AMP Project? Checkout the results testing using 2GFast emulated mobile. Without cache and cached. The last one is a little missleading though since the main page is cached for the Be Nice project. You can also checkout Andy Davies blog post about the speed of the AMP project.
How does the Be Nice AMP Project work on HTTP/1.1?
You need to build your HTML following this pattern.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="canonical" href="hello-world.html" >
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Never ever load javascript synchronous, make sure you follow this pattern:
<script src="https://www.example.org/important.js" async></script>-->
<style>body { background-color: yellow; }</style>
</head>
<body>Hello World!</body>
</html>
If you have lots and lots of CSS and you feel that inlining it will be kind of bad, have a look at loadCSS project by the Filament Group.
How does the Be Nice AMP Project work on HTTP/2?
Are you lucky and already have upgraded to HTTP/2 and your server has the possibility to do a server push? Then make sure you push your CSS file and you don't even have to inline it in your HTML!