From 2006-2016, Gregable.com was published on Blogger using a custom domain name. I've been going against Blogger's recommendation and setting up my DNS records so that the blog is actually hosted at gregable.com instead of www.gregable.com, as I largely thought it was slick to do so. This little trick got me into trouble with Blogger and broke my setup in a way I wasn't able to recover from. This is mostly my fault, not Blogger's.
I decided to use this as an opportunity to move off of a web app for managing my blog and to roll my own. It's been a lot of work, and I don't really recommend it, but the result is coming along. Let me tell you about it.
First thing is serving. I want inexpensive. I want https everywhere. I want fast to load: CDN, HTTP/2. I don't need dynamic content. I went with Amazon S3 for cheap storage and Cloudflare for CDN delivery. I may switch some of these up in the future, but they both have a large user base and good documentation.
Next comes design. I definitely wanted the site to look good on both desktop and mobile, and load very fast. I've been contributing to the AMP project and wanted to give an all AMP website a try to see how far I could get. Every page on this site is valid AMP HTML. You can test it for yourself by tacking #development=1 on the end of any URL and looking at the browser developer console output. You may need to reload once to get the 'AMP validation successful.' message.
As you can see in the screenshot below of a blog post with some larger images, the content loads quite quickly and there are few supporting resources. This shows 10 requests:
An interesting note is that there is actually a 4th image on that page, the same headshot photo as is on the bottom of this page. It is not initially loaded because the AMP runtime determined that it was out of the viewable area and so it can be loaded later, after the user has begun to scroll.
When does the page actually load? According to Chrome, it took 1.38s. However, the page is actually visible as soon as the fonts finish loading, well under the 1s mark. If the fonts and AMP runtime files were cached, this would have appeared loaded only slightly after the main page loaded, at around 339ms.
I ran a few tests on how fast the page is visible in the browser, as loaded from the AMP Cache:
Another trick I employ here is the use of WebP for images. Webp compresses signficantly better than any of the other image formats out there, but comes with a few drawbacks. One is that it's only supported in Chrome and Opera. Firefox is considering support but that still leaves out Safari and IPhone users. Similarly saving the image to your computer typically means fewer photo editing softwares will be able to use it. I don't love this situation and may change this in the future. Best would be to deliver WebP conditionally to browsers that support it, but I don't know of a way to do that within the AMP framework right now.
All of the elements on the page are using responsive CSS. Regardless of your screen width, it should look pretty nice. For narrow screens, some elements willstack rather than floating side by side, such as my footer headshot image.