9 ms·
Show HN: Using Google AMP to build a Medium-style Jekyll site that loads in 65ms
- alariccole 11y agoVery cool. Might be nice for the example page to include real content--even a copy of the readme would suffice. But being able to click through various posts would give a better idea.
- Kaali 11y agoThis is a great example of a modern looking website, that actually performs in a way one would expect from today's computers and browser optimizations. Instead it seems to be more important for developers to use the coolest new technology, even though it actually hurts the end-users. React is all the hype right now. And it is a nice system for creating dynamic single page apps. But there is little reason to use it for static websites, which could be cached easily, instead of rerendering the website on the client with Javascript. And instead of having automatically cached static website, we use local storage and such to get something resembling a cache. I would love to see some mechanical sympathy in modern web development, instead of cargo culting all the new tech.
- vjeux 11y agoYou can use React to render static websites. You get the nice component model and the speed of static content. You can take a look at the react native[1][2] website for an example. [1] http://facebook.github.io/react-native/ http://facebook.github.io/react-native/ [2] https://github.com/facebook/react-native/blob/master/website/core/Site.js https://github.com/facebook/react-native/blob/master/website...
- ivan_ah 11y agoThat's pretty cool way to structure websites: https://github.com/facebook/react-native/blob/master/website/layout/DocsLayout.js https://github.com/facebook/react-native/blob/master/website... The chain of build steps is quite complex though... but hey, if it works...
- jhgg 11y agoWe've got our entire marketing site statically rendered. Looking forward to react 15, should get rid of lots of "data-reactid"s which should shave a bit off of the size of the rendered html.
- madeofpalk 11y agoYou can actually do that at the moment with ReactDOMServer.renderToStaticMarkup(), which doesn't create any react-ids (but can't be used later by React on the client)
- qznc 11y agoMechanical sympathy implies that you tailor for very specific use cases. For example my blog: Most visitors read a single article and leave. Optimization: Serve page as one big blob if possible. Inline the CSS. Avoid images and widgets. Social buttons are implemented as CSS-styled links without Javascript-iframe-img stuff.
- mbrock 11y agoThere's also such a thing as cargo cult criticism... when dismissing stuff as "hypes" and "trends" without really grasping the reasons behind the enthusiasm... for example, how one of the big advantages of React is that it can render on the server in a very convenient way.
- Kaali 11y agoTrue. I shouldn't have been that dismissive about React. My comment was really related to the explosion in popularity of client side rendered static websites. And React happens to be one of the more popular ways to implement them.
- tobltobs 11y ago> React is all the hype right now. React is old school, the cool kids use VueJS nowadays.
- bryanrasmussen 11y agoWell in this case the coolest new technology seems to be AMP, the use case for which is not so plain to anyone who knows how to make a modern looking website that actually performs in a way one would expect from today's computers and browser optimizations.
- vjeux 11y agoLet me know if you have ideas to make the react website faster :)
- spicyj 11y agoI don't think we need ideas, just someone to put in the hour or two to optimize the React site. I'm confident we could cut down the load time immensely without much work. :)
- vortico 11y agoWow, that actually does feel fast. Loads quickly and scrolls with no frame lag on my low end laptop. https://cdn.ampproject.org/c/s/ageitgey.github.io/amplify/2016/03/08/example-post.html https://cdn.ampproject.org/c/s/ageitgey.github.io/amplify/20... Of course this is in comparison with Medium blog posts which take 10's of seconds and scroll at 5 fps. Plain HTML with no CSS works for me, which is super fast if you get used to the plain style.
- reitoei 11y ago> Medium blog posts which take 10's of seconds Are you connecting to the internet using a potato?
- nkrisc 11y agoNot everyone that might be interested in reading a Medium post lives in a country blessed with lightning-fast internet infrastructure. A large percentage of the world's population accesses the internet only through a phone. Even in here in the U.S. where I live there are people who fall into both the aforementioned categories.
- acdha 11y agoThis is why web performance needs to be something you actively and seriously measure: if you have a solid low-latency connection, you may have a completely different experience from someone with a high latency or packet loss connection which really amplifies the delay for each resource. This is compounded by developers almost always having the sites they work on cached and upgrading their hardware much faster than average, so it's easy to forget how painful all of that code is for e.g. an Android user on an average network when you mostly use an iPhone 6S over LTE / fiber. Here's Medium with a 10s load-time over a simulated cellular connection: http://www.webpagetest.org/result/160315_FY_c1dc544bfe0add3272ad40596f5ef695/ http://www.webpagetest.org/result/160315_FY_c1dc544bfe0add32... 5s over a simulated mediocre (i.e. Comcast median) cable connection: http://www.webpagetest.org/result/160315_HH_a6ed41e9bd2011835cc6828907d97cf2/ http://www.webpagetest.org/result/160315_HH_a6ed41e9bd201183...
- frakkingcylons 11y agoNice project. I wonder how much work it would take to extend Lektor to build AMP pages.
- inian 11y agoA few points - 1. A direct comparison to Facebook's react Github page may not be fair. Their page is 10 times heavier than the blog page - of course its going to be faster. 2. Actually the Facebook's React page is not that well designed when it comes to performance. I see a lot of scripts included in the FB react page blocking rendering (codemirror.js, etc) even in pages where they are not used. If those are removed, the time to first render should drop down by a lot. 3. I feel a more apt comparison would have be comparing to a purely static page like a blog hosted on Github. Not a page which actually includes a live code editor! 4. No one says the page loads in the DOMContentLoaded time. It is mostly a useless metric when it comes to performance measurement.
- vjeux 11y agoFor reference, we haven't spent any time trying to optimize the react website for perf. Also that front page really needs to be rethought, we haven't updated it since launch...
- spicyj 11y agoI'll add: the React site uses the (larger and slower) development build of React because it can be useful to people visiting the site. Ordinarily you would use the prod build. Not to mention the lack of script bundling and inefficient (blocking) loading. Just hasn't been a priority for us.
- inian 11y agoOh thats why the dev build of React was there in the page. Makes sense!
- Touche 11y ago> For reference, we haven't spent any time trying to optimize the react website for perf. That's probably true of every slow site on the web. Part of the purpose of AMP is that it forces your site to be fast. Of course you can optimize a regular HTML page and make it faster, but you can't pass AMP validation with a slow site.
- uto 11y agoSo what's the best practice when it comes to valid html? This seems like a cool technology but trying to validate the https://www.ampproject.org/ https://www.ampproject.org/ site, the w3c validator fails so bad it's not even able to list all errors. The example post does a bit better but is still pretty far from valid html5. Is there a way to do it in a standardised way or should that even be desired? All browsers I've tried seem to render it fine and quickly (assuming js and the normal bells and whistles).
- ec109685 11y agoThat site isn't amp, ironically. I think they outsourced the project's marketing site.
- x1024 11y agoThat's really weird... It kind of tells me that they don't have confidence in the platform. Dogfooding is important, kids!
- randomguy7788 11y agoit should be in amp now, i think. not valid though
- magicalist 11y ago> That site isn't amp, ironically https://ageitgey.github.io/amplify/2016/03/08/example-post.html#development=1 https://ageitgey.github.io/amplify/2016/03/08/example-post.h... > AMP validation successful. not sure what you mean
- wanda 11y agoec109685 was referring to https://www.ampproject.org/ https://www.ampproject.org/
- magicalist 11y agohttps://www.ampproject.org/#development=1 https://www.ampproject.org/#development=1 > AMP validation successful. Maybe I'm missing something? I literally learned how to validate AMP pages from[1] 59 minutes ago :) [1] https://www.ampproject.org/docs/guides/validate.html https://www.ampproject.org/docs/guides/validate.html
- atdt 11y agoI am not able to reproduce the load times reported as benchmarks. My test runs on WebPageTest put start render and document complete at around the 700ms mark (Chrome 49 / no throttling): http://www.webpagetest.org/result/160315_60_9XT/ http://www.webpagetest.org/result/160315_60_9XT/
- inian 11y agoThe DOM Content loaded in this test is 157 ms. WPT uses a confusing terminology when it comes to this (Document complete time != Dom content loaded time) True it is not the same as the 65ms claimed in the article but its not that far off too. The location of the test matters too. The time to first byte in your test is 82 ms - so there is no way DOM complete can happen in 65 ms in your case :) Probably try different locations for your test..
- atdt 11y agoIs DOMContentLoaded the right mark to be benchmarking, given that first paint doesn't happen for another several hundred milliseconds?
- inian 11y agoDefinitely not. Page load (thats the time the browser spinner stops spinning), first render, etc. are slightly better metrics. But even page load time and first render times aren't without their own problems. Resources loaded asynchronously also count towards the page load time - however, they are not necessarily detrimental to the user experience. Similarly, some pages flash a white screen before contents actually starts to appear. In these cases, the first render also becomes meaningless since the user doesn't care about the "paint" of a white screen. Recently, other metrics such as the speed index and [RAIL](https://developers.google.com/web/tools/chrome-devtools/profile/evaluate-performance/rail?hl=en https://developers.google.com/web/tools/chrome-devtools/prof...) have come about. (Just the initial page load time does not matter for a good UX) Mostly there is no one universal metric for all websites. Think about what your user wants to do on your site and optimise for that metric. For example, Twitter optimises for the time for the first tweet to appear on the timeline :)
- fibo 11y agoReally nice idea and good boilerplate to start with. It would be perfect as a starting point for a customer that want an AMP blog and probably in the near future it will be required. Check also this amp hello world I did, if you want a bare AMP example https://github.com/fibo/hello-AMP https://github.com/fibo/hello-AMP
- wanda 11y ago{% include analytics.html %} https://github.com/fibo/hello-AMP/blob/master/gh-pages/_includes/analytics.html <script type="text/javascript">...</script> You're kidding, right? You need to implement analytics using the AMP Analytics Custom Element or it'll just fail validation.
- mblode 11y agoI also created a Medium inspired theme but for Grav CMS: https://github.com/mblode/grav-theme-medium https://github.com/mblode/grav-theme-medium Grav CMS is an open-source CMS. Therefore, it is a better option than Jekyll when you need to create a client website. It is also used as an alternative to Medium.com for creating a personal blog. I hope you guys enjoy it :)
- gitcommit 11y agohttp://medium.matthewblode.com.au/ http://medium.matthewblode.com.au/ is a deadlink, may want to fix.
- unicornporn 11y agoMaybe support for Webmention[1] would be a nice addition? Medium is sort of a community after all and I think an alternative should have technology for talking to other sites. There's https://webmention.io/ https://webmention.io/ and https://indiewebcamp.com/Jekmentions https://indiewebcamp.com/Jekmentions [1] https://indiewebcamp.com/Webmention https://indiewebcamp.com/Webmention
- wanda 11y agoThe article's discussion of AMP's limitations regarding images is somewhat inaccurate. Firstly, the claim that images must be supplied with a known height and width is wrong. All you need to provide to AMP is the aspect ratio of the image. You can give the width as "16" and the height as "9" and AMP will calculate exactly what size to display the image. It would use any exact measurements provided only to determine the aspect ratio. That's why this layout can be called 'responsive' at all. Example: <amp-img width="4" height="3" layout="responsive" src="/assets/images/your_picture.jpg"> </amp-img> will validate and the image will be rendered at the largest size possible in 4:3 aspect ratio, relative to its flow context/container. In action: https://wnda.github.io/amphtml-examples/layout/#development=1 https://wnda.github.io/amphtml-examples/layout/#development=... https://wnda.github.io/amphtml-examples/basic-page/#development=1 https://wnda.github.io/amphtml-examples/basic-page/#developm... --------------- Secondly, if you won't even know the aspect ratio of your images with any certainty, AMP doesn't give a damn about exact dimensions for background-images. Proof: http://wnda.github.io/amphtml-examples/experiments/background-image/#development=1 http://wnda.github.io/amphtml-examples/experiments/backgroun... With background-size: cover, background-images are actually extremely effective for responsive web design as long as you're not supplying massive images. You might think it's a problem because the background-images will not be lazyloaded , but technically they sort of will be, because AMP intercepts everything in your page and serves it via HTTP/2 from its CDN. You just can't link the lazyload up with JavaScript callback. What you can do is estimate the time it will take to download the image and configure a CSS animation to fire after a certain amount of time using the animation-delay CSS property. Just an idea.
- nailer 11y agoHow does `amp-img` work when viewing the page in a regular, non Google web browser?
- quarterto 11y agoThe custom elements are handled by the AMP runtime: https://github.com/ampproject/amphtml/blob/master/spec/amp-html-components.md https://github.com/ampproject/amphtml/blob/master/spec/amp-h...
- djvdorp 11y agoThis is really cool, can't wait for somebody to also do a similar thing for Pelican!
- jacquesm 11y agoNeat. Get rid of the two external fonts and the blank author image and it will load in half that time.
- detaro 11y agoA fairer comparison would be to a minimal, similarly styled Jekyll page also on GitHub pages. If it is faster than that it gets interesting.
- midgetjones 11y agoI still don't get what the difference is between this and being self-controlled with the amount of js you add to your html
- MichaelApproved 11y agoSlow sites are more than just HTML overload. Slow sites typically have additional HTTP requests (loading external CSS/JS files, AMP doesn't allow JS or external CSS files). They also load all images at once (AMP does lazy content loading). They don't cache as well as AMP does. For companies, it's a framework that restricts the "bad" requirements that conflict with page loading performance.
- fiatjaf 11y agoSo, what's the difference between this and being self-controlled AND loading images, CSS and JS asynchronously?
- MichaelApproved 11y agoAsync just tries to load everything at once. If you're on mobile, you could have a slow connection. Trying to load an image at the bottom of the page at the same time as an image at the top of the page would compete for bandwidth. The idea behind lazy loading is that you give top priority to what needs to be downloaded right now. You also don't bother loading what will never be seen, assuming the customer doesn't scroll down to the bottom of the site. This improves the customer's battery life because an HTTP request uses the radio which taxes the battery. Further, by abiding by a set of standards, Google and others can trust the content will load quickly. That trust allows them to feature the content higher up in search results.
- mtberatwork 11y ago> Further, by abiding by a set of standards, Google and others can trust the content will load quickly. It's only a "standard" from the viewpoint of Google.
- kup0 11y agoIs there a reason you can't just build the site properly in the first place to load fast? AMP is an unnecessary step in doing so. It's nothing special. All AMP is, is a decided-upon set of restrictions for what you can do on a page. If you follow those same restrictions with normal HTML/CSS you can achieve the same results. I've never understood the use of AMP, just build your normal site properly in the first place and then you won't need it. It's almost like training-wheels for learning efficiency/optimization.
- Touche 11y ago"If you just don't step on the mines, you can walk through a minefield and live".
- tmaly 11y agoI totally agree. I have been back and forth on using bootstrap with CDN verse just plain simple css. I did a test with bourbon.io this morning to make a simple page with the responsive navbar. The resulting css file was just 1 kb compressed. That is a huge improvement over these heavier frameworks. A major con against AMP in my opinion is that it is something else to learn on top of everything.
- frandroid 11y agoGood developers can make fast sites (though that's not a given!!), but product managers will absolutely bloat your site. "Add this third tracking/analytics tool"; "Add this custom ad format here"; "Oh this partner will give us tons of money if we put this widget on the page"; "Oh let's use Brightcove video player"; "Oh let's auto-play videos"; "drive-by A/B testing"; "We don't control this third-party 2MB image", "The widget streams a 23MB .WAV file for background music that only auto-plays in mobile"; "Why build this in-house when we can just use this good third-party library?"; "Good third-party library costs too much, let's use this horrible but much cheaper one instead"; etc. AMP allows you to tell your product manager: "Sorry! Not supported." Of course, with enough responses like this, a decision eventually comes down to not use AMP.
- tmoorai 11y ago
- franze 11y agostrange, my site * non AMP * standard HTML5 * with pretty pic above fold * not hosted on a Google CDN or any other CDN is still faster than the AMP, Google CDN, no lovely pic above fold page. amp example page by the OP https://cdn.ampproject.org/c/s/ageitgey.github.io/amplify/2016/03/08/example-post.html https://www.webpagetest.org/result/160315_NN_CPY/ first byte 0.267s start render 0.916s speed index 928 a page of my small website http://www.veganblatt.com/veganer-ei-aufstrich https://www.webpagetest.org/result/160315_NN_CPY/ first byte 0.176s start render 0.305s speed index 910
- tech-no-logical 11y agofor me, your site loads in 350ms, vs. 65ms for OP's (base html response only)
- pmlnr 11y agoThat +300ms looks like a roundtrip time for geographical difference.
- tech-no-logical 11y agohis site : 8 hops, 30ms. OP's site : 10 hops, 16ms. only a slight difference. OP's site is just, well, very fast :)
- antonislav 11y agoWhat is the technology stack you are using?
- franze 11y agoapache server, wordpress, https://roots.io/ https://roots.io/ theme, pretty old school
- pmlnr 11y agoServing static, stripped down HTML under 65ms is not that hard. You really don't need any AMP for this.
- praseodym 11y agoThis is not about serving time but about browser loading time: getting the DOM ready (DOMContentReady) in 65ms.
- pmlnr 11y agoRight. I guess it's a good thing that with a static HTML it's basically the same thing but without the fancyness and the Google cache in the background.
- untog 11y agoThis is what bothers me about AMP. You don't need to load a Google JS library to get fast loading of static content.
- wyldfire 11y agoDoes it support code syntax highlighting? (I'm not already familiar w/Jekyll).
- blairanderson 11y agoI think this is pretty cool. Funny how much trash people are talking. Keep the internet fast.