HTMLブログカードでPageSpeedInsightsスコアを向上させよう

2021/03/10

Blog

t f P L

ブログカードを乗り換えてページ読込速度の高速化を実現

近年のスマホの普及拡大により、Google検索においても"ページ読込時間"や"見やすさ"等が重視されるようになりました。

もう、今時みんなスマホ持ってるもんね。

そんな背景もあり、本ブログも時代の流れに合わせて、ブログのページ読込速度を高速化していこうと思っています。 その一環として、ブログカードを現在、順次乗り換えを行っています。
本記事では、その成果を報告しようと思います。

今まで使っていたEmbedlyブログカードは魅力的なブログカード

今まで筆者は、ブログカード「Embedly」を使っていました。

Embedlyってどういうブログカード?

「Embedly」は、スクリプトで自動的にリンク先のページ情報を"毎回"読み込むAPI型のブログカードです。
自動的に読み込んでくれるため、リンク切れが起こらない限り、放置していても何も問題ありません。 そして、見栄えもよく簡便にブログカードを生成できるため、非常に良いツールです。

Embedlyブログカードにおける欠点その壱~遅延~

魅力的なブログカードなのに、どうして乗り換えるの?

確かに「Embedly」は魅力的なブログカードですが、

  • 毎回リンク先のページを読み込む
  • 外部スクリプト
  • 事もあり、遅延が生じてしまうという欠点も兼ね揃えています。

    遅延をどうにかできないの?

    一応、「defer」宣言やLazyLoad等でスクリプトの読込開始を遅延させることも可能です。 しかし、スクリプトの実行が遅れるという事は、表示も後回しになってしまいます。

    表示の後回しの何が問題なの?

    画像や動画の遅延読込は普通にしているよね。

    画像や動画は遅延読込させても、パッと表示されるため、そこまで問題ではありません。 しかし、"スクリプト"ましてや、リンク先のページ情報を読込するブログカードの遅延読込は、表示までに時間が掛かりすぎます。
    せっかく遅延読込によるページ読込速度の向上も、快適性の低減により台無しとなってしまいます。

    だから、ブログカードの遅延読込だけはしたくないのね。

    そういう事です。

    Embedlyブログカードにおける欠点その弐~速度はAPIと外部サーバーに依存する~

    また、EmbedlyスクリプトのCDNサーバーは、2021/3/10時点では「HTTP/1.1」です。

    PageSpeedInsightで表示されるHTTP/1.1での通信一覧

    これは、Embedlyに限った話ではありませんが、まだまだ「HTTP/1.1」を使っているサーバーは多数存在しています。

    「HTTP/1.1」の何がいけないの?

    「HTTP/1.1の通信プロトコルを使うことはいけない事」ではありません。しかし、時期にオワコン化すると筆者は見ています。また、ページ読込速度の向上のために「HTTP/2」にしたいところです。

    「HTTP/2」に変えちゃえば良いじゃん(笑)。

    残念ながら、こちら側ではどうすることもできません。スクリプトを保管しているサーバーの管理者が「HTTP/2」に切り替えてくれない限りは、ずっと「HTTP/1.1」のままです。

    世界中一斉に、「HTTP/2」に切り替えればいいのにね。

    そんな都合よく行かないのが世の中というものです。
    しかし、自分自身は変えることができます。

    HTMLで直接ブログカードを生成しよう

    API(スクリプト)を利用せずに直接HTMLでブログカードを生成できれば、遅延や高速化カスタマイズも容易です。
    よって、次のHTML生成型のブログカードに乗り換えました。

    ブログカードのブックマークレットを作成しました

    SSL化後の悩ましい作業のひとつ ブログカード これまで Embedly を使ってきましたが、仕様がかなり独特なんですよね (´・ω・`) 画像や記事概要など、必ずしもOGPに従っているわけではないもので。かといって はてなブログカード はSSLに対応できてないですし。 * 2018年現在ではSSL対応しています。...

    HTML生成型のブログカードってどんなもの?

    これまで使っていたEmbedlyブログカードは、アクセスするたびに、外部CSS及びリンク先のページ情報を読み込んで出力していました。
    それに対してHTML生成型のブログカードは、筆者が記事を編集する際に、CSSやページ情報をHTMLに記述します。そのため、アクセスする度に外部CSSやリンク先のページ情報を読み込まなくても良いという訳です。
    その結果、PageSpeedInsightsのスコアが少し向上しました。

    API依存型のブログカードを使用した場合と、そうで無い場合のPageSpeedInsightsの比較

    APIスクリプトを使うか使わないかで結構差がでるのね!

    しかし、このHTML直接生成型ブログカードは、良い事ばかりではありません。

    HTML直接生成型のブログカードは早いけど変化に自動的に対応できない

    「良いことばかりじゃない」ってどういうこと?

    HTMLに直接記述して生成する形式のブログカードは、API(スクリプト)を使わないので、その分高速化が可能です。
    しかし、APIを使わないという事は同時に「リンク先のページ情報が変わった場合"自分で修正"する必要がある」という事を意味しています。

    記事数が多くなればなるほど、管理が大変になりそうだね。

    記事数が100記事程度であればなんとか管理可能ですが、200記事、300記事と増えていけば管理不可能になってきます。
    そういった点では、Embedly等のAPI利用型ブログカードは、リンク先のページが消去されない限り、基本的に放置していても特に問題は無いので、優れていると言えます。

    大人しくEmbedlyブログカード使った方がいいんじゃないかな?

    まとめ

    とはいえ、リンク先のWebページが削除された場合は、APIを利用していても、利用していなくても手動で修正する必要がある点は変わりありません。
    そして、内容が"大幅に"書き換わる(リライトされる)事は、滅多になく、ほとんどの場合、軽いリライトで済まされることが多いです。 その場合、内容自体はそこまで変わらないため、気にする必要もありません。

    確かに言われてみれば。

    また、外部スクリプト全般に言えることですが、永遠に利用できるわけではありません。 いつかは、使えなくなります。

    それはそうね。

    可能であれば、外部スクリプトに依存しない方が良いです。
    よって、本ブログでは外部スクリプトを使わないブログを目指す第一歩として、APIを使わないHTML生成型のブログカードを、今後、使用していこうと思います。


    [Blogger]独自(カスタム)ドメインブログをIpv6に対応させてみた

    「IPv4が枯渇してきている」とよく耳にするようになって、そろそろIPv6に対応しなければと思い、独自ドメインで運営しているBloggerブログをIPv6対応させてみました。


    QooQ