海外高性能レンタルサーバーhostingerでWordPressを何とかするためにやってみたこと

ウェブホスティング

はい、まずは、色々と説明からしなくてはなりません。
国内のレンタルサーバーなら特に気にすることもない応答速度。けれども、それが海外ともなると気にせずにはいられないのが世の常であります。どうすれば軽くできるか色々と毎日のように考えてはおりますが、そうそう速くなるわけもなく、試し試しやってみるしかないのです。

Hostingerとは

国内のレンタルサーバーは主に無料のものはバナーが勝手に挿入されたり、あるいはアドセンスの収益の何%かがレンタルサーバーの業者と利用者で分割されたり、色々な方法で「無料と謳いながら」どこかで収益を上げているものです。
タダで運営できるわけでもなく、その理由はわかりますが、やはり妙な仕様はやめて欲しいと思うのが利用者です。

WordPressを動作させるには、データベースとPHPが動作しないといけません。今時、htmlしか動かないようなレンタルサーバーも少ないとは思いますが、PHP 5.xのバージョンが動作して、データベースも用意されていて、かつ無料と言うようなレンタルサーバーは少なく、だいたいそういった所は転送量の上限が決まっており、hostingerも例外ではありません。

ただ、国内では有料というような所まで無料であり、かつfacebook、Google等のアカウントでログインできたり、色々キャンペーンで安く有料サーへビスが受けられたりと意外に大丈夫なレンタルサーバーとなっています。

無料プランでは、2GBの容量、データ転送量100GB/月、PHPは5.4まで使えデータベースは2つ、cronなども使えます。有料では340円/月で容量やらが無制限になったりします。wordpressも1クリックでインストール可能。

ここまで高性能ながら泣かされるのがその速度です。有料コースを選べはサーバーも高性能なものになり回線速度も上がりますがやはり無料でなんとかしたい。そこで以下のようなことを現在試しています。

できるだけ速くWordpressを動作させるためにやったこと

現在、WordpressのテーマにSimplicityを利用させてもらってます。本来自分でやるには面倒なことをテーマ側でやってくれているので非常に便利です。
更に便利にするために、まずいつも僕はSimplicityのheader.phpを最初にいじります。

まずはjQueryの読み込み部分。ここを以下のように変更して、外部CDNからjQueryを読み込み更にdeferを付けます。deferを付けることでレンダリングを妨げないような処理とするわけです。

こちらのWordpressのテーマを作っておられるサイトのまま利用させて頂いてます。

2015/3/20 追記
header.phpはそのままで、子テーマのfunctions.phpに書き込んでも使えます。
2015/4/1 追記
Defer Parsing of Scripts(StackExchange)

2015/6/13 追記

fopen,file_get_content等がそのままでは利用できないサーバーでWordpressのjQueryをCDNにする方法
※ fopen,file_get_contentが利用できるサーバーでも下記で動作します。←これ重要 ※ 内容的にはwordpressのj...

wordpress4.1から新しいapi等が出てきて以前書いた記述と変わっているため、Simplicityでもそちらが採用されています。以前書いた方法は、以下のブログカードで確認できます。プラグインとか色々と入っているとjavascriptの読み込み順序とか様々な問題が出てくるのでそれらを解決する方法だろうと思いますが、まだwordpress4.1になって間がないので、便利なスニペットもあまりなくひとまずは上記はそのまま利用させてもらってます。

Simplicityを少し改造してみた part5
GoogleのPageSpeed Insightsでブログを調べてみると、 スクロールせずに見えるコンテンツのレンダリングをブロックしてい...

上記jQueryの外部読み込みの処理としてどういうことをしているかというと、Wordpressは元々自前でjQueryを持っています。バージョンは確か、1.11.1だったように記憶しています。自前のjQueryでもまぁ良いのですが、できれば最新のバージョンを使いたいということからGoogle Hosted Librariesより、jQeuryを読み込んでいるわけです。

ただし、ダッシュボードやWordpress自身の処理をする時は自前の最適化されているであろうjQueryの方が何かと良いと思われますので、そういった画面に移動する時は、自前のjQueryを読み込み、記事の閲覧時等は最新のjQueryを読み込むというような事をしています。
更に、add_filter部で、エンキュー(読み込み順番待ちみたいな感じ)されたjQueryにstr_replaceでdefer等を付けているというようなものです。

個人的には「ウェブページを1秒台で表示させる原理と方法」ここに書かれている方法をとても参考にしており、上記のjQueryだけでなく、常々「CSSのレンダリングブロックを解消することが高速化のカギ」この部分をなんとかしたいと考えているわけです。

Googleの「レンダリングブロックCSS」解説サイトにもCSSはデフォルトでレンダリングブロックリソースであると書かれています。
そりゃ生のhtmlの方が速いに決まってるわなって話です。

まずwebサイトのスピード計測サイトなどで見られるネットワーク状況(ブラウザでも可能)で気になるのが、Google adsenseの広告の読み込みとFont Awesomeの読み込みでだいぶ時間を浪費しているという点です。FontAwesomeは例えばCSSスプライト等で代用が可能な部類なのと、CSSスプライトにすればキャッシュが効くようになるので高速にすることは可能なはずですが、Google adsenseの広告は外部から読み込んでいるのと、下手にいじれないと言う点から頭を悩ますところである訳です。

「ウェブページを1秒台で表示させる原理と方法」で書かれている方法では、「DNSプリフェッチを設定」と言う所に目を引かれます。
Googleの広告を利用しているサイトに役立つプリフェッチとして役に立つものとして、

こういったものを掲載されています。そりゃ少しでも速くなるなら入れてみたいと思うのが人の常。先ほどと同様Simplicityのheader.phpに書き込むでしょうと言う話です。

後は、javascriptとCSSを縮小するためにAutoptimizeを導入しています。これらも簡易画面で、Optimize (JavaScript/CSS) Codeにチェックを入れているだけです。
WordpressのプラグインでHead Cleanerや、javascriptの読み込みをdeferしてくれるものも使ってみましたが、Autoptimizeと併用すると速度が落ちたり、あるいは評価が下がったりすることがあったので、現在はAutoptimizeのみを使用しています。

WordPressのキャッシュプラグインとして、W3 Total CacheとMO Cacheを併用したりして、ページやオブジェクト意外に、翻訳部分もキャッシュするようにしています。なんせWordpressはデフォルトで英語ですから、翻訳する部分に案外リソースが使われたりしていると言う点でセレクトしているわけです。

あと、JetpackのPhotonも利用していますが、これはちょっと微妙な部分です。画像を予め縮小したりオプティマイズしたものをアップロードしていればこれも切れるはずですが、それが面倒になってしまうのでひとまず有効にしている次第です。
EWWW Image Optimizerが動作すればこれが一番手軽なのですが、hostingerではセキュリティのためexecが使えないとか何とかでこの重要プラグインが動作しません。これが案外痛い。その代用という意味でのPhotonですが、効果はでていないようにも思います。

Simplicityの性能を利用してデザインを独自のものに変更する

カスタマイズが比較的色々できるSimplicityですから、現在作業中ではありますが、本来のスタイルを大幅に無視して、flex-boxにてサイトをリデザインしています。
なぜそうしているのかは色々と理由もあるのですが、子テーマが使える、色んなcssをimportしなくてもよい、レスポンシブにできると言うのが大きい理由でしょうか。

flex-boxはとても素晴らしい技術ではあるのですが、chromeは特に問題なく思い通りに表示できるものの、Firefoxはやや難がありそこをどうしていくかが今後の課題です。IE?それはもうどうでも良いと考えてます。
PCの画面はまだしも、今時はスマホには対応しなくてはと思いつつ、それも後回しになっている状況ですが、そのうち何とかなるでしょう。

素材がそろえばSNSのボタンまわりもCSSスプライトにしようと画策しています。そうすればfont awesomeも利用しなくても良くなり更に高速化が望めると考えるわけです。

本来こういうことは国内のサーバーでは考えもしないわけですが、海外サーバーであるというデメリットを何とか解消するための方法なのです。
実際現在もCSSのレンダリングブロックは解消されているわけでもなく、以前よりは多少速く表示できるようになった気がしますが、まだ国内のサイトのレスポンスには敵わないと思うので、せめてまぁ別に気にならない程度に速くなれば良いなぁと思う次第です。

スポンサーリンク

シェアする

フォローする