お金を超える価値の発掘
  • その他
    その他
    カテゴライズできないニッチな活動
  • やってみた
    やってみた
    こんなこと、やってみました!
  • インタビュー
    インタビュー
    いろんな話、聞いてきました!
  • インターン
    インターン
    インターンは多くを学べる絶好の機会
  • 国際協力
    国際協力
    国境を超え活動しているライターの体験記
  • 留学
    留学
    留学を通して感じたこと・楽しかったことなどを綴った体験談
  • 祭り
    祭り
    祭りが人を熱くさせる
  • 自然保護
    自然保護
    自然の中で体を動かすのは、きっと皆さんが想像している以上に楽しい
pick up
Top

portfolio

初心者でもできる!?HPの表示速度を速くしたNの施策

HPを爆速にしたNの施策

学生団体・サークル等々。知識がないのにHPの運用をいきなり任せられた or 今後HP開設しようと考えている人に向け、役に立ちそうな知識を書いていきたいと思います。

今回は、moireのHPの速度改善のために実際に行なった施策を書いていきます。(この記事はwordpressを使ってる方向けです。WIXといった、手軽にHPが作れる無料サービスを使ってる方は、申し訳ありませんが参考にならないと思います。)

1.HPの表示速度は大事!?

題名は「表示速度は大事?どうなの?」みたいなニュアンスにしてますが、ぶっちゃけ大事なのは言わずもがなですよね笑

表示までがあまりにも遅いHPは、表示される前に離れてしまいますよね、普通。

でも逆に、よっぽど遅くなければ、それが理由でHPから離れないというのもまた真。実際、人気ブログなどでも、表示が遅いところはあります。

それでも、サクサク動くならそれに越したことはない。めちゃくちゃ速くなくてもいいけど、それなりには速くしたい。最低でも、そんなニーズを満たせるように書きたいと思います。

因みに、HPの表示速度が速いとseoに有利みたいです。やっぱり速度は重要!

2.まずはHPの速度を図ろう!

「速度改善を行う前に、まずは現状の知ろう」ということで、実際にHPの速度を測って見ましょう。用いるツールはこちら。

Page Speed Insight
https://developers.google.com/speed/pagespeed/insights/

Google PageSpeed Insights(以下PageSpeed Insights)はGoogleが提供するWebページのコンテンツを解析して、ページの読み込み時間を短くするための方法を提案してくれるツールです。
Webサイト表示を高速化 Google PageSpeed Insightsを理解しよう/ウェブ部

Googleのサービスです。検索エンジンはやはりGoogleがよく使われるため、そのGoogleのツールを使うのは理にかなってますね!

また色々な方がこのサービスを指標にしているため、調べればたくさんの情報が出て来ます。これもオススメの理由の一つ!

早速HPのURLを貼り付けて測定して見てください。

因みにこちらがmoireの最初の測定結果。モバイルが絶望的ですね。モバイルの表示遅いとは思ってたのですが、やはりですか…

絶望的モバイル

最初モバイル

PCはまあまあ

最初PC

それでこちらが、これから書く施策を行ったあと。爆速になりました。

モバイルは満点まで後少し

最終的モバイル

PCは満点!!

サクサク動くのやっぱ気持ちいですね!

moireはHOMEのページで波紋が一つ広がるようにしているのですが、HPが重いとこれがカクカクしてしまう。今まではカクカクした動作で、なんともダサい感じだったのですが、今はぬるっと動いていい感じです。

実際行った施策はどれも難しくないので、ちょちょっとやって、少し改善する気持ちで試して欲しいです。

2-1.速度を測ったら次に見るもの

速度の測定が終わって、自分のHPの速度がなんとなく分かったら、次は「改善できる項目」を見ましょう。下にスクロースしていったら出てきます。

基本は、この項目を一つずつ改善していくことになります。

これが

lazyload入れた後

こうなるようにがんばりましょう!!

実際に改善した項目はこちら。

・オフスクリーン画像の遅延読み込み
・レンタリングを妨げるリソースの除外
・使用していないCSSの遅延読み込み
・次世代フォーマットの画像の配信

ここに乗っている改善策以外が表示されていたら、その項目をググって見てください。たくさんの人が、その項目についての記事を書いているので、それを参考にしてみたください。

もちろん、これから書く改善策よりもっといいものがあるかもしれないので、臨機応変に対応してみてください。

3.実際に行ったNの施策

ここからは僕が実際に行なったN個の施策を書いて行きます!!

3-1.Lazy Load

まずは「オフスクリーン画像の遅延読み込み」の改善から。

オフスクリーン画像の遅延読み込みとは、ざっくり説明すると、画面上に表示されていない画像は後から読み込みなさいってこと。何も設定をしていない場合、最初の通信でそのページで表示させる画像が全て読み込まれます。

そうすると、スクロールしないと見えない画像まで読み込まれ、最初の通信および、最初の画面表示(レンダリング)が遅くなります。それを、最初に表示される画像以外の画像は後から読み込ませることで、最初の表示を速くさせましょうってことです。

これを改善するかしないかで、月とスッポンほどの差があるので、要改善ですよ!

そして、この改善のためにやったのが、wordpressのプラグイン『Lazy Load』の導入。

この辺を参考に!
WordPress でスクロールにより画像を遅延読み込みするプラグイン Lazy Load
高速化プラグイン『Lazy Load』の使い方&初期設定は?

このサイトでは、このプラグインを有効化しただけです。

そして、その結果がこちら。
lazyload入れた後

もともとオフスクリーン画像の遅延読み込みが 4s だったのですが、これが 2s に。ちょっと進歩!

Lazy Loadは次のLazysizeがあれば不要かもですが、一応入れています。

3-2.Lazysises

「オフスクリーン画像の遅延読み込み」がまだ改善できそうだったので、さらなる施策を行いました。

それがLazysisesの導入。これはプラグインではなく、若干コードをいじらないといけないのでちょっとハードル上がります。

ただ、今後もwordpressを運用していくならどこかしらでぶち当たる壁。この機にいじれるようになっておくのがいいかもしれません。

僕はwordpressはコードベースでいじるので助言できませんが、ちょっとコードいじる人に向けた記事も見たことあるので、ぜひそちらを参考にトライして見てください!

Lazysisesについてはここら辺が参考になりました。
背景画像も遅延読み込み可能。万能Lazyloader、lazysizesの使い方
lazysizesの使い方を通して学ぶ、画像の遅延読み込みとレスポンシブイメージの基本
究極で軽量なlazyloader。lazysizes

結構最近出て来た技術みたいですね!

新しい技術はどんどん取り入れていかなければ。ってことでお試し気分で入れてみたのですが、特にバグなく動いてくれて、いい感じです!

やり方としては、「lazysizes.min.js」をサーバーにアップロードして、それを以下のコードで読み込みしました。このコード自体は`functions.php`に記述しています。おそらく`jQuery`等を読み込んでいる関数があると思うので、そこで読み込みをしています。(ここは、みなさんの環境によって異なってくるし、結構難しいかもしれません…)

どうしてもわからない場合は、「wordpress js 読み込み」とかでググって見てください。

wp_enqueue_script( 'lazysize-moire' ,get_template_directory_uri() . '/js/lazysizes.min.js');>

あとは参考HPに書いてあるように、imgタグをちょちょっといじって作業完了。1時間もかからないくらいで終わりました。

そして結果がこちら。

モバイルでの改善項目からは無くなりましたが、全体の点数は変わらなかったです。ちなみにPCは点数大幅アップ。といっても、体感速度はあまり変化なかったですが…

点数あんまり変わらなかった

改善項目からは無くなったんですがね…

Lazysises

PCは大幅UP

Lazysises

コードいじるとこもあまり多くないので楽といえば楽。コードいじったことない人はちょっと苦労するかもしれないです。

3-3.async/defer

次に取り組んだのが、「レンダリングを妨げるリソースの除外」

具体的には「async/defer」をつけることで対応しました。チョチョっとコピペするだけだったんで楽でした。(ちゃんと調べてやった方がいいです笑)

こちらが参考サイト
WordPressでscript要素をまるっとサクッと非同期化する方法
外部JavaScriptを非同期(async / defer)で読み込みレンダリングを高速化する

具体的には、一つめのサイトの関数をコピペしただけです。

こんな感じになりました。

モバイルの点数はアップはしました。

改善項目、依然一番…


それとasyncdefer、どっちをつけるかという問題。このHPは、jQuery入れてるのもあってdeferをつけています。それで実際高速に動いているので、deferでいいのかなって個人的には思います。

ここまでではjsだけでcssは対処していないので、次はcssの改善に乗り出します。

3-4.loadCSSの導入

こちらも結構最近出て来た技術(git遡ってみたら、2014年からみたいでした)。なので古いブラウザ(IEとか)では動かないみたいです。

BtoB向けサービスとかIEで動かないとだいぶ問題になるのですが、団体のHPとかはみんなSafariとかEdgeとかで見るので、よっぽどじゃなければ気にしなくて大丈夫ですよ!

こちらがわかりやすかった。
レンダリングブロックを解決するCSS配信の最適化と手順

ヘッダー大幅変更が結構たいへんでしたね。やるなら早めにやるのをオススメします。

最初の方はデザインの変更が多々あるので、クリティカルcssの設定しなくてもいいかもです。moireではまだしていません。最初の0.5秒くらいcssの適応ができていないことがあるくらいです。後々デザインが固まってからやろうと思いっています。

頑張った結果がこちら。CSSの遅延読み込みが消えているのがわかります。
lazyload入れた後

3-5.テキスト圧縮の有効化

これはxserverのサービスです。レンタルサーバーがxserverの方のみですね。

mod_pagespeedを設定することでできます。設定自体は、かなり簡単にできます。
mod_pagespeed設定について

その結果がこちら。
mod_pagespeed

体感的には速くなった気がしたんですが、点数的にはあまり変わりませんでした。っていうかむしろ悪くなってる笑

しかも実際に適応した後に、スタイル崩れるというバグが出ちゃいました。設定もう少しいじれば直ったかもしれませんが、そこまで速くなりそうになかったので、この施策は断念しました。

3-6.Compress JPEG & PNG images

ここでは画像の圧縮を行いました。

HPの配信でのデータは、そのほとんどが画像と言われています。その画像のデータ量を少なくし、送るデータの量を減らせば速くなるだろうという理論です。

今回はこちらを参考に行いました。
画像圧縮する TinyPNG のプラグインを導入して WordPress の表示速度をアップする方法!転送量の削減にも貢献!

圧縮でたら量はこちら。いい感じに圧縮できました。
CompressJPEG&PNGimages

画像をアップロードしたらよしなに圧縮してくれるので、こういう圧縮系プラグイン、一つは入れておきたいですね。

3-7.WP Fastest Cache

こちらもwordpressのプラグインgzip化したかったので導入。

gzipとは、配信するファイルをzipにして送り、受け取った側でzipフォルダを展開して表示させるという技術。zipしてデータ量を圧縮することで、データの通信量を減らし、ひいては通信時間を減らすことが目的です。

これもブラウザによって使えないとかあるみたいですが、基本的には大丈夫かなと。

ちなみに、chromeではデベロッパーツール > Network でHeaderがこのようになっていたら gzip できています。
gzip

またこのプラグイン、本来の使い方はキャッシュに使うもの。ついでにgzipもついています。

ここでキャッシュについても。キャッシュとは、ざっっっくり説明すると、いろんなデータを取り出しやすいように保存しておくこと。

一つ例に挙げると、ブラウザキャッシュというのがあります。これは、みなさんのブラウザにキャッシュすることを指します。ブラウザキャッシュがないと、みなさんがmoireのHPに何回も訪れるとして、その度に全てのデータを取ってこないといけません。しかし、ブラウザキャッシュがあると、キャッシュ(ブラウザに貯めてあるデータ)分はデータを取ってこなくていいので、その分通信量が少なく、より高速にHPを表示することができます。

実際はかなり複雑な技術ですし、ブラウザ以外にも色々なところにキャッシュはかかっています。でも、イメージとして先ほどの説明を理解しておいてもらえば、おそらく大丈夫かと思います。

HPを高速化する際、キャッシュは実は一番に導入が打診されます。それほど有効な技術です。

ただ、キャッシュが変にかかるとHPを更新したはずがユーザー側では更新されなかったら、キャッシュ系のプラグイン入れたらバグが出たって話もよく聞くため、結構慎重に取り扱わないといけません

僕もキャッシュはどうしようかと色々迷っていて、導入を先延ばししていたのですが、『WP Fastest Cache』はインストール数が多く、設定も細かくできるということで、このプラグインの導入を決めました。

実際どれくらいの効果があったのかは未検証なのであれですが、特にバグが出ているわけでもなく、一番の目的であったgzip化も手軽にできたので、個人的には満足しています。

前述したように、このプラグインは導入数が多いため、このプラグインに関する記事はたくさんあります。僕はこちらを参考に導入しました。
【プラグイン】 キャッシュ制御 WP Fastest Cacheの設定と使い方

ただ思ったより効果が出ませんでした。キャッシュ入れてPage Speed Insightで効果でなかったのは、おそらくキャッシュがこのサービスではかかってないからだと考えています。実際は、キャッシュは高速化において有効な手段なので、うまく導入したいところです。

ここまで施策を重ねてきましたが、モバイルの点数がなかなか上がらないですね。

これはfacebookの埋め込みが足を引っ張っているのが原因でした。この時は、HPにTwitterとFacebookのタイムラインを挿入していたため、これが原因で点数が上がらなかったのです。

この二つは、画像等々、たくさん送信してくれるため、遅くなる原因でした。そしてたくさん画像を送ってくれるため、「次世代フォーマットの画像の配信」で足枷になっていました。

ちなみに「次世代フォーマットの画像の配信」とは、画像を「JPEG 2000、JPEG XR、WebP」のどれかで送ってくれってことみたいです。
PageSpeed Insightsの「次世代フォーマットでの画像の配信」対策方法

あまり詳しくないのであれですが、あんまり聞かないファイルの形式ですね。実際、ここは特別な対応をしなくても足枷にならなかったので、とてつもない量の画像を載せない限りは大丈夫かなと思っています。

3-8.脱タイムライン

TwitterとFacebookのタイムラインが足枷になっていることはわかったので、脱タイムラインを決行しました。

修正後はタイムラインではなく、アイコンを使っています。このアイコンは、公式のもの。これに、実際のSNSのアカウントのページに飛ぶように link をつけています。

実際タイムラインがあったところで、結構小さいしあんま見られない気がします。だったらいっそ無くしてしまった方がいいと思います。まあ、人好き好きですが笑

そして辿り着いたのがこんな感じ。スッキリ^_^このまま下にスクロールしていったら実物が現れます。

これにより、ついに圧倒的なスピードを手に入れることができました。まさに爆速。改善できる項目もほとんどなく、かなりいい感じに修正できました。

モバイルも

最終的モバイル

PCもいい感じ♩

4.おわり

以上がmoireのHPを高速化するためにやったNの施策の全てです。

え?思ったより多いって…??

まあまあそんなこと言わずに笑

一回高速化してしまえば、あとは超快適HP生活が始まりますよ!

ある程度HPが完成して、さらなる改良を考えている人はぜひお試しください!

では

人気記事ランキングに反映されます。クリックお願いします!
moire代表 見城 俊介
moireを通して「社会貢献活動が身近にある社会づくり」と「自然保護活動の普及」を実現します。大阪大学工学部4回。
関連記事
  • 千早赤阪の夕焼け
    ボランティア週末の活動

    幻想的な棚田のライトアップ。大阪唯一の村で週末ボランティアをしてきた

  • ボランティア

    世間のボランティアに対する考え方はちょっとおかしい。実際に活動して感じたことを赤裸々に書いてみました