今日は1日サイトの設定に時間を当てました。
主に何をやっていたかというと、
”サイト表示速度の調整”です。
前々から、友人に
「サイト表示が遅い…。」
と言われていたので、
今日1日を使って直すことに。
僕のサイト表示速度が遅い原因は、
実は分かっています。
サイトを見てもらうと分かると思いますが、
僕のサイトは少しデザインに凝っています。
まぁ、あんまり意味はないんですが、
他サイトとの差別化をしたかったため、
デザインや構成に力をいれました(遊びました)。
デザインや構成に凝った分、
サイト表示速度が犠牲になったわけです。
GTmetrixというサイトで表示速度を
計った結果がこれ
↓ ↓ ↓ ↓
PageSpeed Score F
YSlow Score F
….めちゃダメだしを食らいました。
ちなみにPageSpeed Scoreというのは、
Googleで検索したときの速度で、
YSlow ScoreはYahoo!で検索したときの
表示速度を表します。
まぁ、計測する前から分かってことだけど。
サイトの表示速度が遅い原因を探ると、
僕の場合、”画像”と”フォント”が原因みたいでした。
高画質な画像を使ったことと、
Adobe Typekitでフォントを読みこんだのが、
サイトに負荷をかけていたみたいです。
(自覚はしていたんですが。)
原因が分かったところで、
早速、サイトにオペを開始。
まずは画像の圧縮から。
WordPress上の画像を全部圧縮することに。
二段階に分けて圧縮しました。
特に重かった画像はTinyPNGを使い圧縮。
◇—–一言メモ—–◇
TinyPNGは画質を保ったまま圧縮してくれる
高品質無料サービス。
サイト自体は英語だけど、使い方は簡単。
サイトを開いたら、サイト上部に、
「Drop your .png or .jpg files here!」
と書いてあるので、どこに圧縮したい画像を
ドラック&ドロップするだけ。
最大20枚まで一気に圧縮できる。
◇——————–◇
TinyPNGを使って特に重かった画像を
圧縮できたら、Wordpressに再アップロード。
残りの画像はプラグインで一気に圧縮。
WordPressに挙げた既存の画像を
一気に圧縮できる便利プラグインを発見。
便利なプラグインがあるんですね…。
技術の発展万歳。
ちなみに僕が使ったプラグインは、
「EWWW Image Optimizer」というもの。
PNGだと大体30%くらい圧縮してくれます。
これで画像の圧縮は全て完了。
次はフォントをどうにかする番。
僕のサイトでは、サイトタイトルと、
記事のタイトルとウィジェットのタイトルに
Adobe Typekitを利用して、
それぞれフォントを読み込ませています。
外部からフォントを読み込むと、
どうしても読み込みにラグができて、
再描画のちらつきが目立ってしまいます。
ちなみにこのちらつく現象は、
“Flash Of Unstyled Text “と呼ばれていて、
略してFOUTと言うみたい。
だから以前はFOUTが起きない様に
サイト全体のフォントを読み込み終わるまで、
サイトを表示させないようにしていました。
でも、そのせいでトップページの表示に
6,7秒かかるという致命的な遅延が…。
サイトのデザインを取るか、
表示速度を取るか。
表示速度はSEOに大きく影響していて、
コンバージョン率にも関係があるそうなので、
ここは迷いなく速度を優先させることに。
速度を優先させたことで、
サイトタイトルが少しちらつきますが、
まぁ、いいでしょう、許容範囲。
ここまでの作業(原因を探り対処まで)
1,2時間程度かかりました。
しかし….。
本当はここで終わるつもりだったんですが、
せっかくということで、他のところも調整して
さらに速度向上を目指すことしました。笑
先ほどの調査で、
画像が悪さををしているみたいだったので、
いっそのこと画像の読み込みをを遅延させることに。
有名なプラグイン”Lazy Load”を
導入することにしました。
普通は、画像の読み込みが終わってから、
サイトが表示されるという仕組みです。
ただ、これだと画像が重いと、サイト全体の
表示が遅れてしまいます。
Lazy Loadは、そんな遅延を防いでくれます。
このプラグインを使うと、
「画像読み込み→サイト表示」を
「サイト表示→画像読み込み」に変えるので、
サイト表示速度が大きく上がります。
しかもインストールするだけで、
設定がいらないのでとても楽ちん。
でも一つ問題が。
LazyLoadを有効化すると、
画像の読み込みがサイト表示の後になるので、
Googlebotに画像が認識されないのだとか。
SEOにも多少影響してしまうみたいです。
コレは困る…。
せっかくサイト速度を向上させ、
SEO効果も期待していたのに orz
でも調べていくうちに、
ちょっとした小技があることを知りました。
Googlebotがサイトを巡回するときのみ、
Lazy Loadをオフにすればいいとのこと。
さっそく、その命令をプラグインに書き込みました。
これで画像に関しては問題ナシ。
ここで終わればよかったものの、
作業のスイッチが入っていたので、
さらに表示速度の改善をすることに。
ここでやめとけばよかったものを 笑
次にキャッシュに手を出しました。
「W3 Total Cache」というプラグインで
キャッシュを導入…！
全部英語表記で時間がかかったけど、
設定を間違えることなく設置完了。
ついでにCDNサービスも利用して、
さらに高速化を追求しました。
◇—–一言メモ—–◇
CDNサービスとは、
キャッシュを複数のサーバで共有すること。
簡単に効果だけ説明すると、
複数サーバーでサイトを管理できるので、
1つのサーバーの負荷が減ります。
結果、サイト表示が早くなるみたい。
僕も詳しくは説明できませんが…。
◇——————–◇
無料で使えるCDNサービスを探すと、
なんと海外のCloud Flareというところが、
無料で使えるみたいです！
さっそく登録して、海外のサーバーを
経由するように設定しました。
毎回思うけど、
ドメインとかサーバー触る時って
けっこう慎重になりますよね。
一歩間違えるとサイト吹き飛ぶし…。
まぁ、ローカル環境でやれっていう
だけの話なんですが。
で、しばらくアレやコレや設定して、
キャッシュもCDNも設置完了。
「これで自分のサイトも爆速で
表示されるでしょ！」
と、サイトを開いたら、まさかのコレ↓
キャッシュの設定やCDNサービスの設定は
ミスしてないはず….。
これはサイトが吹き飛んだか…？
と全力で原因を探っていると、
なんと元凶は僕のサーバーにありました。
やられた。
僕は現在wpxサーバーという
サーバーを利用しています。
wpxサーバーはキャッシュ系プラグイン
(W3 Total Cacheなど)は相性が悪く、
エラーが起きるみたいです。
.htaccessがW3 Total Cacheに上書きされて
上手く機能しなくなるらしい。
だから、photonとかもダメ。
wpxはサイト表示速度は速いけど、
cronも利用できないし、
キャッシュも別で入れられないし、
色々と不便。
仕方ないので、復旧作業と、
W3 Total Cacheとphotonを止め、
ついでにCDNも怪しいので止めることに。
追加でした作業全部無駄じゃん…。
復旧作業が終わるころには、
1日も終わりかけてました。
さて、後半無駄な作業がありましたが、
最後にもう一度サイト測定！
どれくらい速度が上がったのか….！
それがこちら↓
イマイチ上がってませんでした。
でもページの容量は、
だいぶ軽くなったので良しとしましょう。笑
PS.
あの後、ブックマークレットを使い、
もう一度測定したところ…。
↓ ↓
このような結果がでたので、とりあえず良し。
PR.期間限定で1480円の電子書籍を無料で読むことができます
今までの僕の起業体験や失敗談、0からどうやって事業を構築したのかなどをまとめたものが電子書籍になりました。
見た目は少し難しそうな雰囲気ですが、20分程度で読めるように気軽に読めるような内容です(詳しくは下の本の画像クリック)。
読むと「不労所得の作り方」「個人でも大企業に優り、億という単位の収益を出す戦略のファーストステップ」「0から起業して1の収益を出す方法」「自己実現をするために何をしたらいいのか」「起業家に大切な7つの精神」などが分かります。
よりカンタンかつ具体的に理解できるようにストーリーを交えて綴っています。
学校では学べないような内容ばかりです。
ビジネスカテゴリーでAmazon電子書籍ランキング1位&2位同時獲得を記念して、1480円で販売中の書籍を今だけ0円で読むことができますので、気になったら読んでみてください。
お持ちのスマホやパソコンですぐに読むことができます。
詳しくはこちらをクリック(下の本の画像をクリックしても詳細を見ることができます)
この記事が役に立つ！面白い！と思われたならシェアをしていただけると喜びます。
