TECH

2020.09.27

AMP OptimizerによるAMPのさらなる最適化

以前、Optimize your hosted AMP pages - amp.devを読みながらAMPの最適化を行いました。 AMPページの最適化〜ぼくのAMPサイトがこんなに遅い訳がない〜 - SIS Lab このサイトもAMP対応したのだから、LighthouseやPageSpeed Insightsのスコアもきっと高いはずと計測してみたところ、全然スコアが出ていなかったので改善しました。 …

TECH

2020.08.15

Progressive Web Appを有効にする

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

TECH

2020.02.02

HugoでAMP対応のブログカードを作る

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

TECH

2019.10.11

AMPページの最適化〜ぼくのAMPサイトがこんなに遅い訳がない〜

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

TECH

2019.10.06

AMP向けのミニマルCSSフレームワーク「1BX」をHugoに導入した

ミニマルCSSフレームワーク「A Responsive CSS Grid for AMP | 1BX」を試してみました。 目次 TL;DR AMP用のCSSフレームワークに求められること 1BXとは ハマった点 解決方法 参考 TL;DR Hugoで作成するようなブログにおいては1BXで十分構成可能 サイズが小さくても、グリッドレイアウトを利用可能 2文字クラス名を多用して …

TECH

2018.12.02

AMPページがモバイル表示で引っ掛かる件

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