Movable Typeで、ページの読み込みが遅くなる落とし穴 | デザインってオモシロイ -MdN Design Interactive-

Movable Typeで、ページの読み込みが遅くなる落とし穴

2019.1.22 TUE



Webデザインには、あなたの知らない「落とし穴」がたくさん。大きなものから小さなものまで、それが及ぼす影響はさまざまだ。カンペキだと思っているあなたのサイトも、実はすでに暗い穴の中かも・・・。




Movable Typeで、ページの読み込みが遅くなる落とし穴


 Movable Typeでは、「カテゴリごと」、「日付ごと」、「月ごと」、「最新○件」といったように任意のソート条件に従った一覧ページを表示することができる。しかし、記事が増えるに従って、1ページに全件を表示するのがブラウザ側の負担になってくる。個人サイトで読み込みに異様に時間がかかるブログサイトがよくあるが、これが企業サイトであれば致命的である。記事が増えた際にコンテンツを再度カテゴライズし、記事分類し直すというやり方もあるが、大規模なブログサイトになると現実的ではない。

 ここでは、Movable TypeにPHPを導入することで記事を分割表示し、1ページ当たりの表示件数を抑え、ブラウザの読み込みを軽快にする方法を紹介する。ただし、サーバにPHPがインストールされていることが必須条件である。したがって、もしサーバにPHPがインストールされておらず、プロバイダがPHPの使用を許可していないような場合は、コンテンツ表示幅をパーセントではなくピクセルで指定するなど、少しでもレイアウト上の表示要素読み込みが軽くなるような工夫をして対応する必要がある。

 まず必要なプラグインを用意する。MT Extensions MTPaginate 1.26から無料でダウンロードできる【1】。解凍してできるMTPaginate.plというファイルを、Movable TypeのCGIファイルを格納しているのと同じ階層、「plugins」フォルダにアップロードする。この際、「plugins」フォルダがなければ新たに作成する。

 次に、管理画面の[ウェブログの設定]→[アーカイブの設定]で拡張子をPHPに設定する。また、カテゴリの[アーカイブファイルのテンプレート]というフォーム記述欄に「cat_<$MTCategoryID$>.php」と記述して変更を保存する。そして、カテゴリのソースを【2】のように修正する。これは1ページ当たりの表示件数を表しており、【2】では10件と設定している(4行目)。

 これで、2ページに分けて表示されるような場合には「1/2/すべて表示」という表記が記事一覧上部に記載されることになる。


 
【1】MT Extensionsのサイト

  MTPaginate>
<$MTPaginateNavigator format_all="すべて表示 " place_all="after" separator="|">
<MTPaginateContent max_sections="10">
<MTEntries>
【略】
<$MTPaginateSectionBreak$>
</MTEntries>
</MTPaginateContent>
<$MTPaginateNavigator format_all="すべて表示 " placement_all="after" separator=" | ">
</MTPaginate>
【略】
<MTPaginateContent max_sections="n">
【2】1ページ当たりの表示件数を10件と設定している

解説:横山 剛

(※本文中、及びキャプション内で使用している「<」、「>」は、全角になります。ご注意ください。)





twitter facebook このエントリーをはてなブックマークに追加 RSS

こんな記事も読まれています

この連載のすべての記事

MdN 最新刊

MdN BOOKS|デザインの本

週間アクセスランキング

1.14-1.20