BLUE B NOSE（以下:BBN）は「速くてリッチ」を掲げているけど、それの何が凄いのだろう？
プアよりリッチ、表現力豊かな方がいいのはよく分かるけど、速いからって何だというのだろう？
そう思われる一般ユーザー、制作に携わる方々も沢山おられるでしょう。
速くしたいなら、WordPressにしなきゃいい。そういう意見も、よく分かります。
あえてWordPressで速くする、PageSpeed Insightsでハイスコア獲得を目指す。
WordPressでも出来ること、可能なことを模索する。
「速くてリッチ」の困難さや、両立する利点、WordPress上での難しさと月額制モデルを選んだもう一つの理由についても、簡単にご紹介します。
目次
いわゆる「阿部寛のホームページ」は欲しくない
表示が速いWebサイトが良いと言われても、いわゆる「阿部寛のホームページ」（http://abehiroshi.la.coocan.jp/）は求めていない、欲しくないーー。そのご意見はよく分かります。阿部寛のホームページだって実は凄いんですが（https://ja.wikipedia.org/wiki/%E9%98%BF%E9%83%A8%E5%AF%9B%E3%81%AE%E3%83%9B%E3%83%BC%E3%83%A0%E3%83%9A%E3%83%BC%E3%82%B8）、それを説明されたところで、視覚的な課題や要望もあって然るべき、です。
ただ、表示速度を追いかけるとあのホームページ、ああいったWebサイトになるのも仕方ないところもあります。表現がプアで訴求力も不十分、マーケティングツールとしても十分に機能しないなら、多少遅くてもそうでない方、見栄えが良い方がいい。そのご意見も、よく分かります。
その上で、速くて豊かな表現力（＝速くてリッチ）と十分な訴求力を両立し、モダンな機能性も有したWebサイトが実現できると言ったら、どうします？
速さを求めるとなぜ阿部寛のホームページっぽくなってしまうのか、なぜ「速くてリッチ」の両立は容易ではないのか、なぜBBNはそれを実現できているのか、その辺りを解説していきましょう。
「速くする」より「遅くしない」
Webサイトを表示するに当たって「速くしたい」場合、すでに存在するものを「速くする」よりはいかに「遅くしないか」を考えて最適化する、できる方策を考えるのが基本です。世界最速を謳うあるWebサイト（https://www.usecue.com/blog/the-fastest-website-in-the-world/）でもこのように書かれています。
「The only way to have a super-fast website is to have a website with almost nothing!（超高速のウェブサイトを持つ唯一の方法は、ほとんど何もないウェブサイトを持つことです）」（by Mfon Abel Ekene https://www.usecue.com/blog/the-fastest-website-in-the-world/より引用）
Webサイトの表示にはサーバまでの距離やネットワークの速さも関わりますが、表示に関わるコードを読み込み、それを解釈して表示する必要があり、表示したいものが増えれば増えるほど、データ容量やコードの複雑さが増せば増すほど、どんどん遅くなっていきます。
表示や表現を豊かにすれば、基本的にはコードやデータが大きくなり、表示が遅くなります。「何も表示しない」が最速で、後はどんどん遅くなるだけ。これはどうしようもない原則なので、表示が速いWebサイトで表現力が劣る、今ひとつな仕上がりになるのは仕方がないとも言えます。
さらに、モバイルファーストの現代で「遅くしない」観点を持ち込むと、訴求する情報自体を減らす、制限することが最良の施策にもなってきます。
動画やインタラクティブなアニメーションを通じて強烈なインパクトを伝えたい、データ容量をしっかり使って強く訴求したいのと、その上で「表示を早くしたい」は基本的に両立できません。
極端な表現ですが、速さを求めれば表現や情報量（＝訴求力？）が減少し、表現や情報量（＝訴求力？）を求めれば遅くなるという、シーソーみたいなものというか、「速くてリッチ」は矛盾に近い概念ともなっています。
許容される遅さと対応する技術で両立させる
日本国内でも徐々にサービス終了が予定されている3G回線のような細い回線からのアクセスでも、そこまでユーザーを待たせない、あるいは待たせても問題ないだろうという遅さや挙動をGoogleが策定し、どう対策すれば良いかを教えてくれるのがPageSpeed Insights(https://pagespeed.web.dev)です。
年々採点基準等が変化するPageSpeed Insightsですが、近年は使用しているCMSやフレームワークも考慮に入れた上で採点をしてくれているらしく、動的にコンテンツを生成するためにどうしても遅くなりがちなWordPressでも、極端に点数を下げるようなこともなくなっていますが、採点基準そのものはどんどん厳しくなっています。
それでも、PageSpeed Insightsでハイスコアを取得できる技術、ハイスコアを取得できる表示速度であれば、「それなりに速くてリッチ」は実現可能です。
最近はSEOのスコアにも取り入れられているという噂もある表示速度や、表示パフォーマンスの対策としてもハイスコアを目指しつつ、その上でユーザーの役に立つコンテンツ、そして事業者にはマーケティングとしてビジネスに寄与する施策も目指すこと。これを基本的な考え方としています。
「軽くてリッチ」はモダンな技術
PageSpeed Insightsでも指摘される項目ですが、次世代画像フォーマットを用いるとパッと見は同じであってもデータ容量を抑えた画像を使用することが可能です。中でも、WebPであれば手持ちの画像を変換してくれるサービスやWordPressプラグインもあったりしますが、WebP以上に軽くできるAvifはよりテクニカルな方法、技術でなければ生成、変換が困難だったりします。
画像の読み込み自体も、loadingプロパティを”lazy”にしたり、decoding属性を”async”にしたり、fetchpriority属性を”low”にするおまじないを付け足してみたりで、読み込み速度の向上に寄与してみる、ただしレイアウトシフトが起こらない、PageSpeed Insightsでのスコアを落とさないような構築が必須になってきます。
Webフォントも、読み込み時の設定を調整してチラつきを回避したりというテクニックもありますが、そもそも読み込むファイルを、ttfやoftからwoff2に変換するといった一手間を加えるのも欠かせません。CSSのレンダリングブロックを回避したり、JavascriptやjQueryの読み込みに一手間加えたり、表示の豊かさを犠牲にせず、できるだけ表示速度を保つためには、磨き抜かれた枯れた技術だけでなく、導入しても問題ない程度に最新の技術、モダンなテクニックによるチューニングも必要となっています。
WordPress特有のコード挿入、機能制限も欠かせない
非常に細かい話ですが、お問い合わせフォームを導入しているWordPressサイトの場合、フォームのないページでも、GoogleのreCAPTCHA v3のバナーが表示されていることがあります。
これに限らず、WordPress本体や各種プラグインがサイト上に何らかのコードを挿入し、パフォーマンスを低下させていることも多々あります。
必要のないところではWordPressに同梱されているjQueryはもちろん、お問い合わせフォームのための機能を読み込まないように制御したり、バージョンが変わるごとに追加されるWordPressの機能に合わせた追加ファイルを読み込まないようにしたり、イタチごっこで「何がいるか要らないか」を判断してコードを書き換える、プラグインを選定するといった手間が出てきます。
表示速度を優先するあまり、WordPressに搭載されている編集機能をカットすることもあります。それが原因で、ブログなどのコンテンツで訴求力が低下する可能性もありますが、使わないうちは必要ないから問題ない、とも言えます。
必要になるまでは、WordPress等のCMSが用意した標準機能であっても制限する。そういった水面下の取り組み、細かいチューニングの上に「速くてリッチなWordPressサイト」が出来上がっています。
「速くてリッチ」は訴求力も機能も制限をかけた、ピーキーチューニングの産物
「遅くしない」ために情報量を削り、複雑さを減らして訴求力を犠牲にし、WordPressなら使えるはずだった編集機能もカットした上で、ギリギリの領域、非常に狭い部分で「速くてリッチ」なWebサイトを実現しています。
場合によっては更にピーキーなチューニングになることもあり、「ピーキー過ぎてお前にゃ無理だよ」と、劇場アニメ版の『AKIRA』で金田正太郎が自身のバイクに跨る島鉄雄を窘めたセリフ(https://dic.pixiv.net/a/%E3%83%94%E3%83%BC%E3%82%AD%E3%83%BC%E9%81%8E%E3%81%8E%E3%81%A6%E3%81%8A%E5%89%8D%E3%81%AB%E3%82%83%E7%84%A1%E7%90%86%E3%81%A0%E3%82%88)を彷彿とさせる程度には、「活かし方」にややクセがある仕上がりともなっています。
「速くてリッチ」を維持しつつ、最大限に活かすには、それらを踏まえたマーケティング、コンテキストも駆使したコンテンツ戦略が重要です。データ容量だけで「リッチなコンテンツ体験」を実施する取り組みには向きませんが、ペルソナをしっかり見極め、コンテキストも生かした総合的なコンテンツマーケティング、高速表示がプラスになる働き方を選択すれば、活かす余地は沢山あります。
シンプルに、速く。その上で過不足のない情報設計と十分な表現力で訴求力を担保し、何度も接触してもらって関係を深めるような取り組みなら、「速くてリッチ」にも分があるでしょう。
その都度の必要性に応じて、制限している機能も限定解除する。必要な情報、ページを追加するときも、コードやデータ容量等を加味して処理する。こうした取り組みは、作りきりでは困難です。そのため、月額制のモデル、伴走型のモデルを選択し、要望を擦り合わせて「速さとリッチ」も担保する、というスタイルを選択しています。
モダンな技術によるチューニングで、「速くてリッチ」を概ね実現
アクセス解析やプッシュ通知といった第三者コードの影響が大きく、精一杯チューニングしても中々ハイスコアをとらせてくれないPagespeed Insightsですが、BBNは表示速度と豊かな表現、訴求力を概ね実現させています。
WordPressを導入しているサイトであっても、訴求力も高速表示も高い水準で維持しつつ、ページの追加やサイトの改修を実現できるサービスは、他を探しても中々見つからないでしょう。
お手頃価格でピーキーチューニングの速くてリッチなWebサイト、モダンで高機能なWebサイトに更なるカスタマイズを加えたいなら、是非BBNをご利用ください。
BLUE B NOSEは月額1万円からスタートできる、速くてリッチなWebサイト制作です
「速くてリッチ」にチューニング済みのスターターキットで、表示が早いWebサイトをすぐにご利用いただけます。納期も工数も圧縮したパターンオーダーによる月額制Webサイト制作、BLUE B NOSE。速いWordPressサイトをお求めなら、一度ご検討してみませんか？
