wordpressでのスマホ対応webサイト制作・wpプラグイン・SNS活用・ 動画・bgmやテーマ曲アレンジまで考えるコラム!

   

wordpress屋のマルチメディアコンテンツ制作読んどけ☆コラム

【WPテーマを軽くカスタマイズ】プチ静的化して、データベースアクセスやPHPファイルをへらしつつ同じデザインで

      2018/04/05

こんにちは、管理人@SS_mshpです。

今回は管理人も利用しているWP(wordpress)サイトで、ちょっとだけ静的に表示できるようにしました。
WPテーマをプチ静的化
『サーバーでプログラム実行やデータベースから取得』みたいな処理が少なくなるので、負荷対策になるかもしれません。さっそくやってみましょう。

■WPは動的な生成・では静的ページのメリットは?

このサイトでも取り上げているWPは通常、『サーバー側でPHPを実行したり、データベースから本文を読み出したりして、サイトを動的に生成』します。それゆえ『重い』とよくいわれます(実際テーマや、低価格サーバーによってはすごく重い)。

しかし、『HTML/CSS/JS』だけで組まれたシンプルなサイトは、そのような処理が発生しないので、『比較的軽い』といえます。表示スピードでアドバンテージがあると、今後のスマホ検索順位などにも影響してきそうです。

■wpを静的ページに・プラグインで対応『Simply Static』

wpを静的ページにするプラグイン
管理人はまだ試してないんですけど、『静的ページを生成するプラグイン』があります。

■WPテーマをプチ静的化カスタマイズ例

ここでは、管理人がWPテーマのパーツを静的HTMLに置き換えるなど、プチ静的化を紹介します。(やった理由は、サーバーにいろんなサイトが入っているので、PHPプログラム実行やデータベースアクセスなどを減らして、サーバー負荷とか動作重いのを予防したかったからです。)

■ヘッダーのロゴなどは、直接画像URLを貼る(header.php)

ロゴなどは、直接画像URLを貼る
header.php内の『メインビジュアル・ロゴなどを出力するPHP』を、単純に画像URLに置き換えました。ここはほぼ全ページで共通なので、『ページごとに条件分岐して表示を変える、みたいな動的な処理』をやらなくてもいいかなーと思ったからです。

■sns.phpはカットし、直接single.php内に移植

sns.phpはカット
管理人のテーマは、昔のバージョンのstingerを改造したものなんですけど、『get_template_part』で、snsウィジェットのPHPファイルを読み込む部分がありました。

直接single.php内に移植
single.php内に直接貼りました。注意するポイントは、『記事ごとにシェアするurlを対応させるには、PHPが最低限必要』ということです。生成したあとのhtmlを貼っても、トップ記事とかしかtwitterに読み込まれないからです(あまり速度は変わらないかも)。でも、構成ファイルが1個減ったので良しとします。

■(stingerテーマなど)そのほか使わないphp(広告ウィジェットとか)

テーマによっては、広告ウィジェットを出力するphpファイルがあります。アドセンスコード入れると、サイドやフッター・記事下とかに出すアレですね。管理人は無謀にも、広告ウィジェット用phpもカットしました。アドセンス自動配信コードを取り入れたので、後はそっちに任せます。
そもそも、アフィリエイトのぶろぐでもないし、アドセンスが一番の収益ポイントでないので、こういうことをやっても大丈夫なわけです。

アドセンスは自動表示してくれるけど、通常のアフィリエイトバナーは、クリック率・視認性が良い位置に貼る必要があります。適切な位置にチューニングされたウィジェットは、カットしないようにしましょう。)

■プチ静的化実行して、ファイル数字・サイズを大幅削減・突き詰めると高速化にもメリット

テーマ構成ファイル数が、こんなに少なくなった
PHPファイルをカットして静的HTMLに置き換えたりした結果、テーマファイル数が、こんなに少なくなってしまいました。
さっき管理人のスマートフォン(BIGLOBEでんわ・MVNOなんで昼はクソ遅いとされている)で、キャッシュクリアしてから表示してみたところ、『(状況にもよりますが)二秒くらいでサクッと表示した』ので、突き詰めていくとWP高速化にもつながりそうです。

とりあえず、カスタマイズテーマの容量は、最近のテーマではありえないくらい小さくできました。みなさんも、必要な機能との兼ね合いを考えながら、プチ静的化もやってみてください。

*アトリエSS・web関連サービスページに移動します。

【カテゴリ】 - webサイト高速表示 【タグ】 -

Message

メールアドレスが公開されることはありません。

  関連記事

【ワードプレスサイト高速化プラグイン】Speed Up-JavaScript To Footerで、表示速度を速くする方法

今回は、ワードプレスサイトの使い勝手(読者から見た)を向上させるプラグイ …

【wordpress限界高速化】Pjax技術を使ってサイトを高速表示するプラグインと、エラーの対処

今回は、『遅い』とされていた(過去形)wordpressサイトを『Pja …

【wpプラグイン】ワードプレスサイトで、スマホアクセス時だけ軽量テーマに切り替える方法

今回は、スマホでみるとワードプレスサイトがちょっと重い件について対策して …

【サイト高速表示】ワードプレステーマ・stinger(5)のCSS軽量化!どれくらい小さくなる?

今回は、前回やったCSS縮小続きで、『書き方変えたり、いらない部分カット …

CSSを限界圧縮してヘッダーに書くと、表示速度は速くなるの?(fc2ぶろぐで実験)

今回は、サイトを高速表示するCSSの書き方についてです。 管理人が昔使っ …

Googleがスマホ表示速度をランキング要因にすると発表・サイト制作者/ユーザーの対策は?

今回は2018年1月に、Googleの検索順位に影響する内容が公式に発表 …

【WPプラグイン・サイト高速化】EWWW Image Optimizerで、画像をサクッと圧縮して表示を速くしよう

今回は、サイトの高速化で、画像を圧縮してくれるものを試します 画像サイズ …

【サイト表示速度】googleのスマホ向け速度チェックツールで、表示速度/秒数を計測

今回は、スマートフォンに特化した、サイトの表示速度チェックツールをご紹介 …

スマホページ高速表示のための、CSS圧縮方法まとめ

今回は、読み込み速度を速くしてwebページ(特にスマホ版)を高速表示する …

ページ高速表示~正規URLとリダイレクトで、速度スコアが10点近く違う件

今回は、リダイレクト処理における、ページ表示速度の変化を検証します。 題 …