WordPressテーマの最適化〜テーマ最適化作戦

Web-log・ココログ関連,WordPress,パソコン・インターネット,モバイル

ここしばらく、WordPressの記事が続いていたと思いますが、実はWordPressテーマファイルを修正していたのです。

なんとか、完成しました。テーマファイル(Orange and Black)を一旦デフォルト(オリジナル)に戻し、再度、カスタマイズして行きました。その際、テーマファイル本体にはなるべく手を加えないと言う方針にしました。テーマファイルを触ってしまうと、テーマが更新された時に、再修正しなければならないからです。と言っても私が使っているテーマは、もう2年以上、更新がありませんが…。

画面の配色などの、CSSに関する部分は、Jetpackの「カスタムCSS」を使いました。テーマファイルに手を入れる事無く、CSSの修正ができます。また、Jetpackのモバイルテーマにも対応しているので、モバイルテーマのCSSの変更にも利用しています。

次のページも参考にしています。

CSSを触るためには、Firefoxのインスペクタ表示が必須です。次の記事では、3D表示を使っていますが、実際にCSSを修正する時は2D表示しか使いません。最近のインスペクタは、修正したその場で効果が見られるので、非常に便利です。

CSSのfloat設定が良くわからなかったのですが、次のウェブページにわかりやすく、解説されていました。ありがとうございます。

また、同時にCSS spriteも最適化しています。次の記事よりも、更に進んだ事をしています。

これで、統一のとれたCSSにできるのですが、WordPressのマルチサイト運用にしていると、面倒ですね。全部のサイトに、設定を貼付けなければならないです。

CSS以外に、ヘッダ、フッタの変更や、機能追加をしています。

この時は、テーマファイルのfunctions.phpに追加していました。ですが、CSS変更と同様の理由で、テーマファイルの更新で修正が元に戻ってしまう可能性があります。

なので、この様な機能追加をまとめて、自作プラグインとして登録しました。プラグインとする事で、テーマファイルとは独立に、機能追加ができます。モバイルテーマのカスタマイズの際に、確立した手法です。

この方法を取る事で、PC表示のテーマのカスタマイズとモバイルテーマのカスタマイズを、共用する事ができます。

そして、気になるカスタマイズの結果ですが、GTmetrix (Goole Page Speed, Yahoo! YSlow)で、両方Aを獲得する事ができました!

GTmetrix

項目 サーバー博士 GoDaddy GoDaddy+Photon GoDaddy+Tuned
Top
Page Speed (Google) A (91%) B (89%) B (89%) A (90%)
Yslow (Yahoo) B (84%) B (84%) B (84%) A (90%)
Page Load Time (sec) 4.44 3.26 2.71 2.59
Page Size (kB) 226 275 300 230
Requset 41 48 46 38
ブラウザ時間 (sec) – 6.84 3.28 4.36
Page
Page Speed (Google) A (90%) C (79%) B (87%) A (92%)
Yslow (Yahoo) B (80%) C (79%) B (80%) B (82%)
Page Load Time (sec) 7.01 3.68 3.35 4.83
Page Size (kB) 317 632 427 667
Requset 52 64 63 64
ブラウザ時間 (sec) – 9.4 4.69 5.89

地道に改善してきました。でも、高スコアのために、Social系のリンクは全部外してしまいました。ま、いいか。

Social系のリンクは無いのですが、最近のアクセス数が増えています。ページの表示時間が短縮されたため、ちゃんと表示されるまで待ってくださる方が増えたのでしょうか?

Similar Web

Posted by お市のかた