内容が古くなっている場合があります。
WordPressを筆頭としてCMS(コンテンツ管理システム )の最大の課題は、いかにしたら速くページを生成できるか? ではないだろうか。
WordPressはコミュニティーの広がりと導入の容易さから幅広い層に支持されているが、もしページを生成する速度が2倍いや1.5倍速いCMSが登場したらあっという間に人気筆頭の地位は脅かされるだろう。話はこれほど単純ではないが、とにかくWordPressにしろ他のCMSにしろ運営者は速度のことばかり考えていると言っても過言ではない。
Googleに言われるまでもなく読み込みがたった1秒遅いだけでせっかくのコンテンツを観てくれる人が減るから、血眼になって速いページづくりに知恵を絞るのは当然だ。
CMS(特にWordPress)が一般化する以前は、階層構造をつくり1ページごとHTMLを記述してホームページコンテンツを書いていた。私もそうしてサイトを運営していたし商用サイトの作成・運営に関わっていた。現在こうしたサイトはほんとうに少なくなったけれど、ときたま出会った際のストレスなくページが読みこまれる様子は爽快であり脅威ですらある。
たとえば俳優阿部寛さんのページだ。リンクしないが、クリックと同時にページ全体が表示される。「あっ」とか「えっ」と言っている暇さえない。
CMSの最大の特徴はPHPを使い動的にページを生成する点にある。つまり1ページに使われるパーツごと別々に用意しておき、アクセスされるたびパーツを呼び出して組み立ててブラウザに送っている。変更点があるたびすべてのページのHTMLを書き換えることなく、パーツを作り変えればよいので管理が簡単である。また閲覧者ごと異なったページを生成できるし、いずれにしろ柔軟にコンテンツをつくれるのがCMSのメリットと言える。
階層構造をつくって1ページごとHTMLを記述した静的なホームページコンテンツは爽快なほど高速だと前述したが、CMSでは要求されるたびサーバー側でページを組み立てる動的なコンテンツであるためどうしてもコンテンツがブラウザに表示されまで時間がかかる。サーバーのスペックが低ければ表示までの時間はさらにかかるし、コンテンツを呼び出したり生成するPHPが重厚長大で鈍重ならこれもまた時間がかかる。このためWordPressに限らずCMSではキャッシュを利用している運営者がほとんどだろう。一回生成したページを静的なHTMLとしてサーバーに保存しておいたり、閲覧者のブラウザ側に保存させておく手法だ。画像しかり動画しかり。
これは結局のところ静的な、階層構造のページでコンテンツをつくっていた時代に部分的に立ち返っていることになる。静的なページもスタイルシートやらJavaScriptを駆使すれば見栄えのよいものになるのだし、いっそ最初からCMSに頼らない手だってある。阿部寛さんのページは古典的というか牧歌的だけど、これは凝ったデザインをしていないからにすぎない。なにがなんでもCMS、なにがなんでもWordPressと意固地にならないほうがよいだろう。それでも必要性があるからCMSなのであって、ほんとうに悩みは尽きない。
ココは私のサイトだが、私にとっての本体とも言えるサイトは別のドメインの別のサイトなのだ。こちらだ🔗(新しいタブで開く)。どうせタダなので観て、それぞれのページの速度を体感してもらいたい。以下に述べる理由から高速化がなにかと難しいのだ。
そちら「本体のページ」は写真作家としてのギャラリーなので画像要素が多いし、最近は高精細ディスプレイ(いわゆるRetina)対策のため寸法で2倍サイズの画像を用意しなければならない。2倍にせずとも表示寸法と等倍でRetina対策ができるとしても、いずれにしろ画像だけで重いページになる。写真を売っているのでかなり大きなサイズで表示できるようにもしている。このため本体サイトは、いま観ているこのサイト(つまりココ)より低速なのが悩みのタネだった。
営利サイトなので運営者を紹介するAboutの表示速度があまりに遅いのは大問題だ。しかも写真家のAboutなので画像要素が多い。Aboutに限らず他の固定ページだって事情は変わらない。
ということで、コンテンツの見直しを機会にいろいろと工夫してみた(まだ改修途上だけど……)。
元からサーバーキャッシュとブラウザキャッシュ、サーバーサイドでは高速化のための機能を使い倒している。さらにいろいろやってみた結論としては、前述のように静的コンテンツに限りなく近づけるほかないのがわかった。CDNを使ったところで言うほど高速化なんてしないのだった。
たとえばスライドショーを呼び出すショートコードを貼り付けたとする。スライドショーは見栄えがよいし、誰もが一度はやりたい演出だろう。スライドショーで開く画像サイズやJPEGの圧縮率を最適化しても、PHPを動かすため読み込みまでの時間はどうしても短縮できなかった。ほんと考えられる対策はすべて取ったが、画期的に速くなるどころか体感的には何もしないのと変わりないありさまだった。
ではスライドショーを一例にして説明を続けよう。
やりたいことは複数の画像を閲覧者に提示することであってスライドショーで画像が入れかわり立ち代わり表示される演出でない。だったら画像を並べて呼び出すだけのレイアウトでよいはずだ。
たとえば……
<div style=”float:left; margin: **px”>と<img src=”***/***jpg“>
の組み合わせだ。こうしてCSSでレイアウトして画像を呼び出すだけの話になる。
これで閲覧性と演出効果を犠牲にせず速くページが表示できるようになった。とはいえ、画像中心のサイトなので爆速ではない。また未だにスライドショーを残している部分だってある。他の要素でJavaScriptだってバリバリに動かしている。なにもかも禁欲的にする必要はないだろう。
でもはっきりしているのは、限りなく(できるだけ)静的なページに近づける必要性だ。サーバーのスペックが現在と比較すると圧倒的に劣っていて、しかも回線速度が低速だった大昔でも、読み込みが速いページはCMSを使ったいまどきの遅いページより圧倒的に高速だった。サーバーのスペックと回線速度が向上した現在であっても、昔ながらの静的なコンテンツの優勢は変わらず、さらに高速なのだ。
あらゆる種類の高速化プラグインを使っても、php.iniをいじくりまわしても、nginx化させても結局のところページのつくりとコンテンツに立ち帰りざるを得ないのだ。
© Fumihiro Kato.
Unauthorized copying and replication of the contents of this site, text and images are strictly prohibited. All Rights Reserved.