triBlog

トリアナのブログ。

サックサクなサイト制作には何が必要か〜ウェブサイト高速化Nightに行ってみた!〜

2019.9.5 ウェブサイト高速化Night
水筒に牛乳入れたらフタが開かなくなりました。
ライター画像
おくだ

3秒で53%。

みなさんはこの数字がなんだかわかりますか。
これは「ウェブページの読み込みに3秒かかると53%もの人が離脱する」というGoogleの調査によるデータです。

って、さとペンさんが言ってました。

今回はウェブサイト高速化Nightに行ってきたので、それをレポートします!
と言っても有料のイベントでしたので、内容をそのまま書くのはナンセンス。
この記事ではトークのおおまかな概要を押さえつつ、感想を中心に構成します🌼

それではレッツゴー!

ウェブサイト高速化Nightとは

このイベントでは、あなたのウェブサイトを早く表示するための方法をご紹介します。
かなり具体的な内容ですので、帰ってすぐにでも実施できます。
イベントレジストより

タイトルの通り、ウェブサイトを高速化しよう!という名目のイベントです。
会場は大分のWeb業界ではおなじみの「Oita Co.Lab Lounge」。

参加費は3,240円(税込)。

第1部 Webページ 高速化超入門

スピーカーは佐藤あゆみさん

同姓同名たくさんいるからさとペンでよろしく、とのこと🐧
今年、2019年5月に発売された「HTMLコーダー&ウェブ担当者のためのWebページ高速化超入門」の著者で、1997年から趣味でコーディングを始めたとのこと。

奥田が生まれた年からコーディングということは歴にして約22年…。
好きなことで生きている人は若い…。

3秒で53%

冒頭でもお伝えしましたこのデータ。
Web制作に携わる人間はドキッとするのではないでしょうか。

どこか知っているつもりでも実際に数字として示されると、
Webの高速化がいかに重要か実感できます。

「果たしてうちのサイトは3秒未満で表示されているだろうか……。」という不安に駆られて、
参加者はもう血眼でスライドを凝視👁👁

もっとも重要なのは「画像の最適化」

みなさん、直感的にわかっていますよね。そりゃ一番サイズを食うし。

でも本当にしっかり対策できていますか?
1つ1つの画像、適切な拡張子で、適切なサイズで、適切に圧縮されていますか。

JPEGが一番軽いのはなんとなく知っていましたが、
PNGのほうが優れている場合やWebPという新しい形式など、
知らないこともたくさんありました。

画像圧縮のスライドではみんなおなじみのtinypngが紹介されてました。

いちいち圧縮するの面倒くさいな」
「ファイルに画像入れたら勝手に圧縮してくれないかな」

って人はぜひ、奥田の書いた作業を自動化する「Gulp」の記事をご覧ください。

実際、このtriBlogなどは複数の社員が記事を書いているので、
1人1人が自分の記事の画像を圧縮する必要があります。

でも、それって誰か圧縮せずにアップロードするかもしれないし、
確実ではないですよね。

そういった場合のために紹介されたのがEWWW Image Optimizer

WordPressにアップされる画像を自動で圧縮してくれます。
この勉強会参加の翌週、本ブログにすぐ導入しました。
さとペンさんありがとうございます🙏✨

その後も画像についての色々なレクチャーがありました。
また、画像以外にも文書の圧縮、読み込み順序、ファーストビューなど……。

あー!お伝えしたい!!すべてお伝えしたい!!!

でも…できない!!!

だって有料イベントの内容をすべて伝えるのはNGだから!!!

続きはさとペンさんの本でチェックしてください🌝(具体的な高速化の方法がたっぷり)

ちなみにWeb全般ではないですが、WordPressサイトの高速化は弊社のWordPress王こと塚崎が記事にしていますので、
ぜひこちらもご覧ください🙌

スピードよりも大切なこと

これだけはお伝えしましょう!

それはズバリ、

・運用とのバランス
・採点サイトに振り回されない

の2つ!

って、さとペンさんが言ってました。

たしかに最適化に一生懸命で運用が大変になってはいけません。運用も大事。

また、Page Site Insightsなどの採点サイトの点数もあくまで目安です。
速いに越したことはないけど、なにも100点を目指す必要はありません。
ユーザーが思う「使いやすさ」って速さだけではないですもんね。

第2部 AMP技術について

来ました。第2部!

スピーカーは北 幸一郎さん

今回このイベントを主催してくださった株式会社シャーロックの代表取締役の方です。

AMPとは

みなさん、検索したときにAMP⚡️って表示されたサイト、見たこと有りませんか?

私はあります!

あれってAMPという技術を用いて表示を高速化しているらしいのです。

北さんが言ってました。

Accelerated Mobile Pages (AMP) は、Googleが中心となって立ち上げた、モバイルでのウェブサイト閲覧を高速化することを目的とするオープンソースプロジェクトである。
Wikipediaより

Googleお墨付きということで注目度も高く、実際に導入している事例も少なくありません。

AMPのメリット

そりゃもう一瞬で表示されることです。めちゃくちゃ一瞬。

主催者の株式会社シャーロックのサイトはAMPを採用していますがもう爆速です。ほんと。

スマホで開いてみてください。もう、ビュンッです。
(ちゃんとtriBlogに戻ってきてくださいね!)

ほかにも、AMPはCVRやトラフィックなどの面でメリットが……

あー!言えない!!!

だって有料イベントのないy((

AMPのデメリット

書き方が特殊です。
既存のHTMLタグをAMPの独自タグに置き換える必要があるので、運用のコストは高めです。

他にもあれやこれやで「AMPは今後の保守管理を考えたらすぐには導入できんな…」と思いました。

ただ、

「これは作成・運用コストをかけてまでも爆速で表示したい!こだわりたい!」

ってサイトがある場合は非常に有効だと思います。
ここは前述したように運用とのバランスが大事だなと…。

また、「速ければ速いほうが良い」ってのはどのサイトにも言えることなんですが、
特にお店の情報が載っているサイトなどはなおさらスピードが求められるので、そういったサイト向きです。
(パッと検索してパッと情報を得る必要があるため)

AMPの導入方法

もうみなさんお気づきでしょう。

そうです。具体的な実装方法は言えません。

なぜなら……。

有料イベンt((

(本日3回目)

でも、実装自体はそんなに難しそうではありませんでした。

WordPressではプラグインだけでできるみたいですし。
(ただし、エラーは出ること多いのでそれは人力で解決する必要あり)

北さんが実際に会場でライブコーディングをしましたが、本当にあっという間に実装されてました。

ちなみにAMPとは全然関係ないですが、
イベント中「サチコ」という単語が頻出してて誰やねんと思ったら「サーチコンソール」のことでした。

まとめ

ウェブサイト高速化Nightは内容がすっごく充実してて、
本当に内容を言いたくて仕方なかったんですが
有料イベントだったためおおまかな内容だけお伝えいたしました。

Webページ 高速化超入門についてもっと知りたい方はさとペンこと佐藤あゆみさんの本を!

AMPについてもっと知りたい方は北さん(株式会社シャーロック)の今後のイベントをチェックしましょう〜!

佐藤あゆみさん、北幸一郎さん、本当にありがとうございましたー!

今回学んだ技術はうちの制作物にも惜しみなくつぎ込んでいきます!
サイトの高速化チューニングならトリアナへお任せください😎

登壇者情報

今回イベントに講師として登壇されたおふたりのSNS・会社情報です。

佐藤あゆみさん

Twitter

ペンタプログラム

北幸一郎さん

Twitter

株式会社シャーロック

記事を書いた人

ライター画像
おくだ インターン

UIとインタラクティブ表現に強いフロントエンドエンジニアを目指してます。自称トリアナの新しい風。

ライター画像
おくだ インターン

UIとインタラクティブ表現に強いフロントエンドエンジニアを目指してます。自称トリアナの新しい風。

ページ上部へ