AMP Service Workerを使うと、簡単にServiceWorkerを導入できる。 このブログでも利用しているが、1つうまく動かないモジュールがあった。 それは、Prefetch Linksの機能だ。 ドキュメントどおりに設定してもうまく動かなかった …

2022年1月11日に突如「はてなスター」がリニューアルされました。 はてなスターをリニューアルしました。また、リニューアル記念キャンペーンを実施します！ - はてなブログ開発ブログ はてなスターをリニューアルしました - はてなスター日記 かつて「はてなダイアリー」や「はてなブログ」を利用してい …

HugoでCSSフレームワーク「Tailwind CSS」を利用し、AMP Validなページを生成する方法についてのメモです。 ポイント HugoでPostCSSの仕組みを利用して、TailwindでCSSを組み立てる Tailwind CSS v1.4からpergeCSSを内包し、設定方法が変わ …

以前、 Optimize your hosted AMP pages - amp.dev を読みながらAMPの最適化を行いました。 AMPページの最適化〜ぼくのAMPサイトがこんなに遅い訳がない〜 - SIS Lab 今回は、さらに一歩進みAMP OptimizerによるAMPの最適化を試してみまし …

このブログでは、HugoでFull AMPなHTMLを生成し、GitHub Pagesでホストしています。 AMPの最適化を行う際、Lighthouseを利用してWebパフォーマンスを測定しているのですが、PWA Readyになっていないことが気掛かりでした。 個人ブログをPWA化しても自分しか使わ …

「Hugoでもブログカードを利用したい」 そう考えているところに以下の記事がTwitterのTLで流れてきたので、試してみました。 Hugoでブログカードに対応する | Hugo 入門 / 解説 | nasust dev blog ブログカードのShortcodeと表示例 {{% blogcard …

このサイトもAMP対応したのだから、LighthouseやPageSpeed Insightsのスコアもきっと高いはずと計測してみたところ、全然スコアが出ていなかったので改善しました。その時のメモを残しておきます。 目次 TL;DR 計測 セルフホストしたAMP Pagesを最適化する 1. 最初の …

ミニマルCSSフレームワーク「 A Responsive CSS Grid for AMP | 1BX 」を試してみました。 目次 TL;DR AMP用のCSSフレームワークに求められること 1BXとは ハマった点 解決方法 参考 TL;DR Hugoで作成するようなブログにおいては 1BX で十 …

現象 iPhone 6Sで、 AMP ページを表示するとスクロールが意図しない動きになる HeaderとMain Contentの間で、スクロールが止まる 本家のland-seeAMPページでも引っかかりを感じるので再現性あり https://www.ampstart.com/templates …