• Posts
  • RSS
  • ◂◂RSS
  • Contact

  • Trying out AMP

    February 2nd, 2018
    tech, amp  [html]
    I'm going to be working with AMP some at work, so to get more familiar with it I decided to try making an AMP version of my site. Switching everything over would be a bunch of work, so I decided to limit this to the blog posts themselves (everything under /p/ except for the index). I'm now running a 50-50 A/B test where half the time these pages load as AMP and half the time they load normally. I've labeled the page either [amp] or [html] in the upper right, and if you refresh a few times you should see both versions.

    Things I ran into:

    • The hand-rolled software that builds these posts was in terrible shape, with over a decade of hacks on top of hacks. This made it very hard to make the small changes I needed in order to generate AMP versions of pages. I rewrote it to work more sensibly (parsing html with a parser instead of linebreaks and regexps, to start with) which was a surprising amount of work. [1]

    • The comments were the hardest part. This page is served statically, and then it fetches the comments in the background. The original version uses JS for this, making requests in parallel for the different services, and then uses JS to build the HTML to display the comments.

      In AMP you can't use custom JS, so I needed to build this out of an existing component (or, in theory, write a new component). It looked like amp-list was the closest to right, but it doesn't seem to support nesting. I gave up on nesting, and decided to use '→' to mark reply comments.

      This meant creating a new endpoint on my comment server for AMP pages, and having it serve JSON in a form that AMP would be able to work with.

    • AMP uses amp-img tags instead of standard image tags. They're pretty similar, except that in AMP everything needs to have a deterministic size. Luckily I'd already sorted out a system of automatically injecting the sizes of my images a few months ago, or this would have been much more work.

    • I needed to convert my embedded youtube videos to amp-youtube, which wasn't too bad. This got me to fix some of my very old flash embeds that I still had kicking around.

    • AMP doesn't let you use style attributes, so I wrote something that automatically hoists these to a style block at the top of the page.

    On my pages I expect AMP to slow things down a bit in general by adding a blocking script load, but it could make up for this on long pages with a bunch of images because AMP is able to better prioritize visible content. Example WebPageTest runs, all on a simulated Moto G on simulated bad 3G internet:

    • Ordinary Page:
      • Regular: 1, 2, 3
      • AMP: 1, 2, 3
    • Lots of Images:
      • Regular: 1, 2, 3
      • AMP: 1, 2, 3
    As expected, the first page it loaded (going by "page load time") about a second faster without AMP (~5s vs ~6s) while on the second page it loaded ten seconds faster with AMP (~10s vs ~20s). Though that's not entirely fair, since AMP is still going to have to load the rest of the images once you start scrolling.

    Update 2018-02-06: I went to check how this experiment was doing, and I realized I didn't set up the custom dimension properly in google analytics. In addition to making sure I'm sending it on each pageview (which I did) I also need to configure it server-side. I've done that now; hopefully I'll be able to look at this tomorrow. I had also set this up as a content experiment, but content experiments don't seem to let you analyze speed, only high level metrics like pageviews/session (which doesn't make sense with a random-per-pageview experiment) or bounce rate (which does, but is noisy).

    Update2018-04-27: this experiment didn't really work; wrote up results.


    [1] It's still a lot slower than the old version, around 25s instead of 5s. I looked at in with a profiler and nothing jumps out as nuts. I could rewrite it in something faster, or look more into speeding it up, but for now I just figured out how to run it in the background from emacs instead of having it block my workflow:

    (require 'subr-x)
    (defun process-sentinel (process event_type)
      (message (format "%s: %s%s" process
                       (string-trim event_type)
                       (if (string= event_type "finished\n")
                            ""
                            " (see buffer make-rss)"))))
    (defun publish-news-entries ()
      (interactive)
      (message "publishing news entries in the background...")
      (start-process "make-rss" "make-rss"
        "~/bin/makerss-and-reverserss.sh")
      (set-process-sentinel
        (get-process "make-rss")
        'process-sentinel))
    

    Comment via: google plus, facebook

    Recent posts on blogs I like:

    More on the Deutschlandtakt

    The Deutschlandtakt plans are out now. They cover investment through 2040, but even beforehand, there’s a plan for something like a national integrated timetable by 2030, with trains connecting the major cities every 30 minutes rather than hourly. But the…

    via Pedestrian Observations July 1, 2020

    How do cars fare in crash tests they're not specifically optimized for?

    Any time you have a benchmark that gets taken seriously, some people will start gaming the benchmark. Some famous examples in computing are the CPU benchmark specfp and video game benchmarks. With specfp, Sun managed to increase its score on 179.art (a su…

    via Posts on Dan Luu June 30, 2020

    Quick note on the name of this blog

    When I was 21 a friend introduced me to a volume of poems by the 14th-century Persian poet Hafiz, translated by Daniel Ladinsky. I loved them, and eventually named this blog for one of my favorite ones. At some point I read more and found that Ladinsky’s …

    via The whole sky June 21, 2020

    more     (via openring)


  • Posts
  • RSS
  • ◂◂RSS
  • Contact