wordpress高速化にいそしむ

高速化

ワードプレスの高速化がしたい。

テンプレートにあたるテーマファイルを早いのにする方法が簡単、でもそんな都合の良い物はないの。PageSpeed Insightsか、Googleのアカウントをお持ちならウェッブマスターツールで自分のサイトの表示速度がわかります。アナリティクスでも可。

wordpressのテーマファイルを調整してみよう

ふつうにテーマを持ってくるだけですと、ページスピードインサイトでだいたい50/100ぐらいのポイントしかでできません。もうちょっと何とかしたい。テーマファイル自体は変えて試しても変化量は小さく、私が使っているのは個人が趣味で作ったのものですから、自分で修正するしかなさそうです。

スタイルシートの小型化

デベロッパーツールやページの速度を見るサイトで文句を言われるのがCSSとjsファイルの読み込み。レンダリングしているから画面が表示できないぜって毎回怒られます。読み込むファイルは変えられないので、CSSの圧縮をしてみます。

スタイルシート軽量化

wordpressの管理画面から外観に行きます。テーマの編集を開くと、下の方にCSSファイルがでてきます。そのうち分量のあるファイルを見つけて圧縮します。

圧縮する前に、管理画面のウインド中のコード(文字)をテキストファイルで保存しておきます。次にRefresh-SF – Online JavaScript and CSS Compressorなどの圧縮サービスでファイルの中身を小さくします。

注意点

小さくしたコード(文字)を管理画面で元の文字と置換えると、読み込み速度がちょっとだけ速くなります。圧縮するとコードが読めなくなります。微調整には元ファイルが必要ですから、変更するファイルは保存しましょう。最悪配布されてるテーマを解凍して元に戻せます。

保存の話が一体なんなのか分からない方は作業しないように。ファイルの読み順を変えるプラグインを入れるなど、ほかの方法で80点くらいまでは充分高速化できます。

キャッシュの操作で早くする

WordPressキャッシュプラグインの最終兵器「 WP Fastest Cache」|Web Shufu
キャッシュはこちらの方法を使いたかったのですが、私のブログはファイル名を?p*****の表示方法にしてるので、WP Fastest Cacheプラグインが使えず。スタイルとスクリプトを後読みするプラグインを導入して様子をみています。

高速化チューンの結果

いちおうwordpressで80点台まで来ました。ひとりWikiのほうはもっと早いのは、あっちはCSSだけだから。wordpressはどこ向けに使っているのか分からないjqueryを切りとることが出来ず。JS周りを削除するのは無理なので、ファイルをフッター近くで後読みするプラグインで対策を立てています。プラグインだらけになるのはあまりスマートではありませんが手法としては他に無い模様。

携帯サイトの高速化は難しい

wordpressの携帯スマホ表示に関してはなかなか速度が上がりません。ファイルサイズを極力縮めてテキストばかりの私のサイトでこのくらいですから、画像の多いサイトは大変だと思います。画像を多用するブログを書く人は、写真やカメラに凝ってもファイル圧縮には懲りませんし写真の品質を保つためにはファイルサイズを落さないのが基本ですから、画像の容量問題は結構引きずるのではないかなと見ています。プラグインでサムネイルを自動で書き出して差し替える仕組が有効ですが、私は元ファイルを極力軽くするように下ごしらえを必ずしています。ここは昔とった杵柄で、画像のキロバイト数調整は趣味なのです。

携帯サイトエミュレーター

携帯サイトの表示チェックは昔は専用のエミュレーターで見ていましたが、いまはデベロッパーツールでそのまま見られます。
Tech TIPS:Google Chromeブラウザーでスマートフォンサイトをチェックする – @IT

自分のサイトはフォントサイズ、枠ともにきちんと表示されています。

テーマを入れただけで表示速度は上がりません。有名どころのSEO対応を謳った有料テンプレートでも無調整ならほかのテーマと差はつかず。トライアンドエラーで挑戦するしかありません。

現場でかならず使われているWordPressデザインのメソッド