Webサイト工事中です! 閲覧できますが不具合があるかもしれません

FRONTL1NEコアアップデートのお知らせ 2020.06

こんにちは、FRONTL1NE運営チームのFL1NEです。

この度、FRONTL1NEのWebサイトにおいて以下のような更新が行われましたのでお知らせします。

  • FRONTL1NE Webサイト内に存在する静的アセットをCloudflareのエッジから配信するように変更しました。
    (合わせてWP-Statelessの無効化を行いました & Google Cloud Storage内のデータは近日削除します)
  • AMPへの再対応。
  • 画像読み込みの際にレイアウト崩れを防止するため、事前にプレースホルダーを設置するようにしました。

これらにより、FRONTL1NE Webサイトの更なる高速化 & 通信料金のコストダウンができました。

 

 

目次

高速化について

アップデート前

105 requests, 1.8 MB transferred, 2.6 MB resources, Finish: 1.95 s, DOMContentLoaded: 597 ms, Load: 1.63 s

 

アップデート後

108 requests, 1.6 MB transferred, 2.5 MB resources, Finish: 1.95 s, DOMContentLoaded: 227 ms, Load: 268 ms

DOMContentLoadedとLoadが明らかに早くなりました。
これは、画像を実際にロードする前にプレースホルダーを設置し、後から入れ替えるという形をとったことが影響しています。
(Load完了後に画像を差し替えるといった感じです)

また、画像などの静的アセットがCloudflareのエッジにキャッシュされ配信されるので、画像ファイルなどのTTFB(サーバー応答時間)も短くなっています。

 

 

AMP対応について

今我々が使っているテーマ「Luxeritas」ではAMP対応が行われていますが、Google Cloud Storageから画像を配信するWP-Statelessを利用しているとAMPでエラーが発生するので無効化していました。
しかし、今回の更新でWP-Stateless依存がなくなったため、再びAMP対応を有効化しました。

 

AMP対応 サンプル

(DOMContentLoadedとLoadは素の状態でAMPページより早いですが、全体の表示完了はAMPページの方が高速となっています)

 

報告は以上です。

 

マスタリングNginx

マスタリングNginx

Dimitri Aivaliotis
6,980円(06/17 23:32時点)
Amazonの情報を掲載しています
GCPの教科書

GCPの教科書

クラウドエース株式会社 吉積 礼敏・他
3,960円(06/18 00:13時点)
Amazonの情報を掲載しています
Amazon Web Services 基礎からのネットワーク&サーバー構築 改訂3版

Amazon Web Services 基礎からのネットワーク&サーバー構築 改訂3版

大澤 文孝, 玉川 憲, 片山 暁雄, 今井 雄太
3,800円(06/18 00:32時点)
Amazonの情報を掲載しています

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

SESSIONS や Tokyo Demo Fest 等のイベントを主催してる人
各種最適化やIT・インフラ・3DCGが好き
◆YouTube: http://youtube.com/@FL1NE_
◆X(Twitter): @FL1NE

コメント

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

目次