WordPressでサイトを作成する際、多くのプラグインを使います。その1つが表を作成するTablePressです。これをなくす方法について解説したあと、サイトの表示速度に与える影響を示します。
写真1. 地道にスピードアップを重ねた東北新幹線(大宮で撮影)
TablePressの削除方法と効果のまとめ
WordPressでは使うTablePressの代替機能とその効果の要点は以下の通りです。
- 表は標準的なHTMLで作成することにより、プラグインは不要になる
- TablePressによる表からHTMLの表に置き換えるにはExcelで操作すると良い
- TablePressを削除することにより、ロード時間は0.1秒近く短縮される
詳細は以下に記します。
復習：TablePressの機能
TablePressとは、WordPressでサイトを作成する際に表を作成しやすくするためのプラグインです。もともとWebで表を表現するには高度な知識が必要とされ、なかなか難易度が高いものでした。TablePressはExcelのような感覚で手軽に表を作成できます。その使いかたは本記事の範囲内ではありませんが、外部サイトにまとめられています(このサイトさんは自己啓発的な内容があるので、サイト全体をうのみにするのは良くないと思いますが、該当記事は有用に感じました)。
ただし、プラグインはサイトが重くなる原因です。いうなれば、携帯電話に余計なアプリケーションをダウンロードすると動作が重くなることと同様です。プラグインは全体的にその傾向がありますが、TablePressはその傾向が強いです。
Webサイトにおける表の作成方法
写真2. 表は日常生活に大きく入り込んでいる(渋谷で撮影)
WebサイトはHTMLで構成されます。WordPressはWebサイトを作るためのツールで、PHP(動作)、CSS(デザイン)、HTML(中身)で構成されます。WebサイトはWordPressで作成しなければならないこともなく、究極はHTMLさえあれば構築できます。WordPressでいうプラグインはこれらをパッケージとして代行してくれ、PHP(動作)、CSS(デザイン)、HTML(中身)にうとくともそれなりのコンテンツを作るための枠組みを提供してくれるという認識です。
表はHTMLで作成できます。
<table></table>コード1. 表を示すタグ
HTMLは開始タグと終了タグで囲みます。表(英語で「テーブル」という)の場合はTableで囲みます(コード2)。
<table><tr></tr></table>コード2. 表で行を示すタグ
Webサイトは基本的に横書きです。そのため、1つの行ごとに記します(コード2)。2行、3行と増えるにつれてtrタグが増えます。まずは、1行の表を完成させます。
<table><tr><td>山手線</td></tr></table>コード3. 表で列を区切るタグ
列の中に行ごとに区切るために、tdタグを挿入します(コード3)。いいかたを変えると、tdタグ(後述するthタグでも同様)で囲まれた領域が1つのマスです。tdタグの中に必要な内容を入れます。ここでは、山手線という文字列を書きました。
表1. 1行1列の表(コード3と同じもの)
| 山手線 |
さて、これを1行2列に増やします。tdタグを挿入します。
<table><tr><td>山手線</td><td>品川－田端</td></tr></table>コード4. 1行2列の表のコード
1列の中に2つの行があるという認識で、次に新しいtdタグを入れます(コード4)。
表2. 1行2列の表(コード4と同じもの)
| 山手線 | 品川－田端 |
同様の考えかたで2行2列の表を作成します。
<table><tr><td>山手線</td><td>品川－田端</td></tr>
<tr><td>常磐線</td><td>日暮里－岩沼</td></tr></table>コード5. 2行2列の表
1行目と同じようにtrタグとtdタグで1行2列の表を作成しました。1行2列の表を2つ重ね、2行2列の表に作成するという感覚です(コード5)。HTMLでは改行の有無にかかわらず、同じ内容が出力されます。ここでは見やすさのために1行目と2行目を改行しましたが、ここで改行しなくとも出力される表は同じです。
表3. 2行2列の表(コード5と同じもの)
| 山手線 | 品川－田端 |
| 常磐線 | 日暮里－岩沼 |
ところで、表には見出しが必要なことも多いです。基本的にtdタグと考えは同じですが、thタグを使います。
<table><tr><th>路線名</th><th>区間</th></tr>
<tr><td>山手線</td><td>品川－田端</td></tr>
<tr><td>常磐線</td><td>日暮里－岩沼</td></tr></table>コード6. 見出しを入れたもの
見出しもデータもtrタグの中に入れるのでそこまで難しくありません(コード6)。
表4. 3行2列の表(最初1行は見出し、コード6と同じもの)
| 路線名 | 区間 |
|---|---|
| 山手線 | 品川－田端 |
| 常磐線 | 日暮里－岩沼 |
このように表を完成させることができました。そう、山手線は都内を1周する路線でもありませんし、常磐線は日暮里が起点です(この内容は本記事に関係ありません)。
ところで、表を結合することがあります。山手線も常磐線もJR線であり、他に埼玉高速鉄道(1路線のみ)が入った表を作ることを考えます。
表5. 結合のある表の例
| 事業者 | 路線名 | 区間 |
|---|---|---|
| JR | 山手線 | 品川－田端 |
| 常磐線 | 日暮里－岩沼 | |
| 埼玉高速鉄道 | 赤羽岩淵－浦和美園 | |
JRの文字が2列にまたがり、埼玉高速鉄道の文字が2行にまたがっています。このような表の作成方法を述べましょう、ということです。ここで「JRが東日本旅客鉄道じゃないか」「埼玉高速鉄道は埼玉スタジアム線という立派な路線名があるのではないか」ということは気にしないでください。
<table><tr><th>事業者</th><th>路線名</th><th>区間</th></tr>
<tr><td rowspan="2">JR</td><td>山手線</td><td>品川－田端</td></tr>
<tr><td>常磐線</td><td>日暮里－岩沼</td></tr>
<tr><td colspan="2">埼玉高速鉄道</td><td>赤羽岩淵－浦和美園</td></tr></table>コード6. 結合のある表の例
そのコードを示しました。マスを結合したい場合は左上のマスで結合するためのおまじないを書きます。おまじないは以下の通りです。
- colspan：横に結合
- rowspan：縦に結合
結合後のマスについては、左上のマスで書かれたと認識し、そのマスはthタグなりtdタグで囲う必要はありません。そして結合したい数を""で囲みます。今回は2列なり2行を結合したいので、2という数字を囲みました。
図1. 結合の考えかた
結合の考えかたを簡単に示しました(図1)。慣れればそこまで難しくないと思います。表を装飾したい場合はCSSに及びますが、本記事の範囲を超えるので省略します(たいていはシンプルな表でじゅうぶんと個人的に思います)。
TablePressの表をHTMLに置き換える作業
写真3. 車両が置き換えた例(スイスのチューリッヒ中央駅で撮影)
従来、TablePressで表を作成していた人がHTMLを覚え、今後の表はHTMLで作成したとしましょう。問題はTablePressで作成した従来の表をHTMLで記述する必要があるということです。ここでは、TablePressで作成した表をTablePress表、HTMLで記述した表をHTML表と表現します。方法は何でも良いと思いますが、私は1つ1つの表に以下の操作を適用しました。
手順1. 表の内容をExcelでコピーする
まず、TablePress表の内容をExcelファイルにコピーします。
図2. TablePressのプレビュー画面や編集画面を開く
TablePressのプレビュー画面を開きます(図2)。リンクがある場合は編集画面のほうが良いかもしれません。これを開き、Excelファイルにコピーします。
図3. Excelに貼り付けた様子
このようにExcelに貼り付けます(図3)。HTMLはフォントや飾り(太字や下線など)は関係ないので、Excelでは体裁にこだわる必要はありません。
手順2. タグを入れる
Excel画面上でタグを入れます。
図4. タグを挿入した後の状態
タグを挿入した後の状態です(図4)。個人的な感覚ですが、以下の順序が良いと思いました。また、Excelの鉄則の1つの「入力は細かく分割し、コピペをしやすくする」を守ると良いと思いました。
- 絶対必要なtrタグを左右両端に配置する
- 結合してある部分にtdタグ(場合によってはthタグ)を入力する
- 結合した後(colspanなら下、rowspanなら右)のマスは注意が必要なので、当該箇所近くにタグを入力する
- 結合していないマスに必要なタグを入力する
つまづきやすい箇所は、結合とtrタグの入れ忘れと感じました。
とにかくExcelファイル上でHTML表のフォーマットが完成しました。
手順3. 当該のTablePress表の該当記事を開き、手順2のコードを貼り付ける
TablePress表はショートコードで管理されています。特定の表(先ほどまで編集していた表)のショートコードを投稿一覧の右上の検索窓に入力し、特定のTablePress表が使われている記事を探します。
図5. Excelの内容を貼り付けた様子
その記事の編集画面を開きます。そして、TablePress表が使われている箇所にカスタムHTMLで先ほどのExcel表をコピーします(図5)。表はtableタグで囲まれていることを思い出し、前後にtableタグで囲うことを忘れずに！
補足Excelファイルに開始タグと終了タグを入れなかったのは、単に間違えた場合に修正作業がしやすいからです。分割すると作業しやすくなりますので、開始タグと終了タグを分けただけです。これは個人の好みの問題で、Excelファイルにtableタグを入れても構いません。
TablePressを廃止した結果…
写真4. 爆速で通過する通勤電車の例(神宮前から通過電車を撮影)
このような作業で(ある程度手を抜いていますが力技と思います)、TablePress表をHTML表に書き換えます。最後に[table id=で投稿記事を検索し、TablePressnのショートコードがないことを確認してください。そうしないと、ショートコードだけが記事に残り、読者さんから見た記事の完成度が低く見えてしまいます。
この状態でTablePressプラグインを削除しました。プラグイン削除前後のサイト速度を示します。今回は一時的にCode Profilerプラグインを導入し、テーマとプラグインが関与するサイト表示速度を測定しました(このプラグインはすぐに外しました)。
図6. TablePressがある状態での表示速度
弊サイトはもともと表示速度をある程度重視し、素人ながら爆速サイトを目指していました。そのため、当初よりフォントの指定なし、カールセル(上部にランダムで何かが表示される)なし、とそれなりにこだわってきました。また、ロリポップちゃんの爆速宣言のおかげもあって、この程度の表示速度です。
全体で0.27秒、うちTablePressで0.048秒程度でした。いいかえるとテーマやプラグインのうち2割近くをTablePressが占めていました。
図7. TablePressがない状態での表示速度
全体の表示速度は0.18秒と0.09秒短縮されました。これらはn=1の測定結果であり、測定時のばらつきを考えるとこの差をうのみにするのはいけないのかもしれません。それでも、TablePressプラグインを削除し、表示速度が0.09秒高速化されたという事実は残ります。
TablePressプラグインを廃止して
写真5. メンテナンス性が考えられた最新の電車(池袋で撮影)
サイト運営の目的は人それぞれでしょう。その目的にかかわらず、見てもらわないと話になりません。その1つの手法がサイト表示の高速化です。一般にプラグインが多いとサイト表示速度が遅くなります。今回は、影響の大きいプラグインに手を付けました。その結果、表示速度が上がりました。今回の施策はたかだか0.1秒という声がありましょう。しかし、劇的なスピードアップは地道なスピードアップの積み重ねです。今回の0.1秒は地道なスピードアップの1つであり、劇的なスピードアップを構成する重要な1つの要素と確信しています。
他方、プラグイン削減は保守性の向上につながります。そのような意味でも1つの重要な施策と理解しています。
全く別の側面になりますが、本記事のような基礎知識があれば、金銭をかけることなくプラグインから卒業できました。世の中のネット記事には有料サービスを使うような風潮が見られますが、それは知識のなさに起因する側面があります。有名講師からセミナーでブログ術を学ぶ前に、基本的な技術的な知識を身に付ける点の重要性を改めて実感しました(余談ですが、私も大金をいただいてセミナーを開いてみたいです！)。