高速化(ブラウザキャッシュとリソース圧縮)2種類の記事の違いについて

Simplicityの特徴 › フォーラム › Simplicityについての質問 › 高速化(ブラウザキャッシュとリソース圧縮)2種類の記事の違いについて

  • このトピックには3件の返信、2人の参加者があり、最後にパソ活により10年、 5ヶ月前に更新されました。
3件の返信スレッドを表示中
  • 投稿者
    投稿
    • #39351
      パソ活
      ゲスト

      お世話になります。パソ活です。

      Simplicity1.9.3
      WordPressバージョン4.4.2
      ブラウザ:Google Chrome
      サーバー:エックスサーバーX10

      本日、サイトを高速化しようと思い、いろいろ調べていて、以下のページの高速化を試したところ、目に見えて数値が向上しました。

      ーーー

      【寝ログ】リソースを圧縮して転送サイズを減らしブログを高速化する方法(CSS、JS、WEBフォントなどの圧縮)
      http://nelog.jp/compress-components-with-gzip

      スピードテストしたURL
      http://pasokatu.com/11746

      GTmetrixでは
      前:B(82%) D(67%)
      後:A(91%) D(68%)

      GoogleのPageSpeed Insightsでは
      前:モバイル36 パソコン54
      後:モバイル46 パソコン73

      という結果でした。(モバイルが広告ベタベタ貼っているのでそれでもかなり遅いですが(汗)

      ーーー

      ただ、その後、Simplicity公式サイトにも同様にhtaccessに追記する方法で高速化の記事がありまして、

      【Simplicity公式】コピペ一発でSimplicityを結構高速化する方法
      http://wp-simplicity.com/simplicity-speed-up/

      こちらを実施すると

      GTmetrixでは
      前:B(82%) D(67%)
      後:A(91%) C(70%)

      GoogleのPageSpeed Insightsでは
      前:モバイル36 パソコン54
      後:モバイル53 パソコン73

      という結果になり、とくにモバイルがさらに向上しました。

      ーーー

      結果を比べると、たぶんSimplicity公式のやり方のほうが高速化に貢献しているんだとは思いますが、これで良いんですかね?

      どちらの記事も正解っちゃ正解なので何か理由があって使い分けするシチュエーションもあるのかなと疑問に思いまして。

      Simplicity公式のほうには「サーバーソフトがApacheでないと利用できません。」と書いてあり、寝ログのほうには書いてなかったので、Apacheではない場合は寝ログに書いてあるやり方をやるって感じになるのでしょうか?

    • #39367
      Hidekichi
      ゲスト

      > サーバーソフトがApacheでないと利用できません。

      htaccessはapacheの本来の設定ファイルであるhttpd.confを直接いじらなくても、htaccessのコマンドがサーバーで許可されている場合は、部分的に設定を作れるというようなシロモノです。
      htaccessはapacheの設定ファイルですから、apacheでないと利用できないということです。nginxの場合はnginx用のまた別の書き方があります。

      高速化するのはとても簡単です。
      キャッシュを利用して、ほぼテキストのサイトにすればよいだけです。あわせてSNSや動画などの外部からデータを拾ってくるようなものも排除すると効果的です。

      例えばbraveと言うブラウザがあります。javascriptを作った人が手がけてるブラウザですが、chromium(chrome)ベースのブラウザで、広告を排除する機能が入っており、例えばこのトピックのページがすべて表示するのに7秒ぐらいかかるとすると、braveでは、1〜2秒で表示します。
      まだ完全に出来上がったブラウザではないので、ひとまず動作するぐらいな感じだったと思いますが、広告を排除するだけでかなり速く表示できるのです。

      同じchromium(chrome)ベースのブラウザでデベロッパーツールのnetworkで見た所、
      vivaldiで約11.88秒 (ublockあり)
      braveで約3秒
      でした。
      firefoxではnetworkで見ると、14.40秒でしたが、これは計測する方法が異なるのかも知れないので単純に比較して良いものかはわかりません。
      いずれもfinishタイムです。ここからも広告を除外すれば速くなるというのは理解してもらえるかと思います。しかし、それはGoogleのアドセンスのようなスクリプトで読み込むタイプのものです。

      「外部への何かしらのリクエストを投げてそれを受ける」こういうのをhttpリクエストなんて言いますが、これを減らせばかなり速くなります。画像にしてもそうです。同じ画像なら使いまわすとか例えばSimplicityの場合はfont-awesomeですが、これをcssスプライトで各SNSの画像を1枚にまとめたものを利用すれば、どの箇所にあるSNSの画像も最初に読み込む1枚だけのリクエストで済みます。

      まずGETなりPOSTなりで相手サーバーにリクエストします。サーバーが遠いほど時間もかかるでしょうし、プロバイダ等の速度も影響するのかも知れません。次にそれを受けたサーバーは処理を開始して応答します。ここでも時間がかかります。例えば、imgのsrcはサーバーのディレクトリにアクセスします。今時はSSDとかのサーバーもありますがたいていHDDです。回転するメディアは遅いのが特徴です。なので場合によってはCDNなどの方が速いという事もあります。
      CDNはいわゆるキャッシュデータをやりとりしてます。なのでネットワークの速度が肝ですが、遅いサーバーより速いネットワークと言う感じです。これが例えば画像読み込みを高速化するためにjetpackのphotonを利用しようという色んなサイトで言われる所です。

      しかし最も速いのは画像を使わないと言う事です。比較的小さな画像であればデータURIスキームを利用してテキストで画像を表示させます。cssで書くこれは基本テキストですから、httpリクエストを減らせます。比較的小さな画像というのを書いたのは大きな画像などはテキストサイズが膨大になって逆に遅くなる場合があるからです。

      wordpressは動的にサイトのhtmlを出力します。しかし、同じアドレスにアクセスした時に既にその情報(html)が変わらないのであれば、どこかに一時的に保管しておいてそれ(静的html)を返すような仕組みを持った方がサーバーでの処理がない分速いですよね。これがキャッシュです。

      とにかく処理を減らしキャッシュを持てば速くはなります。プラグインなどをむやみに読み込まない方が処理が減る分おそらく速いでしょう。

      これら個人でできる事を全て凌駕するのがwordpressに合わせて完全にチューンナップされたサーバーを利用することです。kusanagiとかKUSANAGIとか(笑)
      お値段がアレかとは思いますが(笑)
      それ以上に導入・設定ができるかどうかとかもあったりするので、個人的にはなるべくテキストベースのシンプルなスタイルにするのが高速化の鍵かと思います。

    • #39379
      アバター画像わいひら
      キーマスター

      どちらの記事も正解っちゃ正解なので何か理由があって使い分けするシチュエーションもあるのかなと疑問に思いまして。

      2つのコードは、書いてあることはほぼ同じだと思います。

      ただ、以下の記事の方は、記事中にもあるように、より詳しい方に添削していただいたおかげで、そういった違いが出ているのではないかと思います。
      http://wp-simplicity.com/simplicity-speed-up/

    • #39387
      パソ活
      ゲスト

      なるほど。どちらもApacheでないと動かないということ、わかりました。そもそも「htaccessはapacheの設定ファイル」ということを知りませんでした。他にもいろいろ勉強になります。ありがとうございます。

      高速化についてはそこまで突き詰めて速くしたいとまでは思っていないので、閲覧に支障が出るほど遅くなければそれで良いかなぁと思ってます(笑)

      「遅い→速い」よりも「速い→さらに速い」のほうが当然ですけど難易度に対する効果が低くなっていくし、一般の読者が見た時にそんなに体感速度が変わらないこととかあるだろうから、新しい学習コストをかけて積極的にやろうとまでは思わないんですよねぇ。

      PVがとんでもなく増えて効果が高くなりそうであればまたもう少し高速化を考えてみようかと思います。

      2種類の記事の違い、了解です。じゃぁSimplicity公式サイトのほうを利用させてもらいます。

3件の返信スレッドを表示中
  • フォーラム「Simplicityについての質問」には新規投稿および返信を追加できません。
スポンサーリンク
アドセンス(大)
アドセンス(大)