たぬきボーイ
ぼくのブログなんか重たくてさ。表示までに5秒とかかかるんだよね

メスしろくま
それって損してるかもしれないわよ
おはようござ!タニオカです。
「サイト速度」って意識したことありますか?
わたしは最近まで何も気にしていなかったのですが、ふとサイト速度を測定してみましょう!という記事を発見し、何の気なしに計測してみたのです。
すると、・・・・37点!!!!!
100点が満点なのでかなり低い数字です。赤点ギリギリ・・・。

タニオカ
ウソーーーーーン
まさか自分のサイトがこんなに遅いとは!!!!!!!!!!ドン引きです。
サイトが重いとなにがよくない?
Googleは「このサイトは重くて読者に友好的じゃないな」と判断してサイトの評価を下げ、読者も「こんなに遅いなら他のサイトでいいや」と別のところに行ってしまいます。サイトが重いと、誰も来ないサイトになってしまうのです。
それから、これはいけないと思いアレコレ改善に努めたのですが、なんせわけがわからない
「サイト速度 改善」とかで検索するはいいけれど出てくるものたち難しすぎて何を言ってるんだかさっぱりわかりませんでした。けれど、仕方ないのでできそうなものからやってみました。
結果は・・・
MOBILE
モバイル96点!!!!!!!!!!やったーーーー!!!!!
PC
PCも60点とまずまずなので良しとします。

タニオカ
正直これ以上のことはやりたくない。全然こういう作業きらい・・・
はじめにネタバレしておくと、わたしが行った作業は「画像を最適化する」「ブラウザのキャッシュを利用する」「プラグインEWWW Image Optimizerを使うの3つです
では、速度の測り方からわたしが96点に達するまでに何をしたかを解説していきます!

 

サイト速度を測れるサイトはいくつかありますが、わたしは「PageSpeed Insights」を使いました。

 

使い方は「ウェブページを入力」と書かれたところにウェブページのアドレスを打ち込んで「分析」をクリック!

メスしろくま
このサイトでいったら「https://yamemasu.com/」だわね
クリックすると計測が始まります。
下にスクロールしていくと「最適化についての提案」というものがあります。これは「こうすればサイト速くできるぞ!」という改善案たちです。

Google
こうすればサイト速くできるぞ!!!!
この通りに実行していけばサイトを高速化することができます。

たぬきボーイ
修正方法を表示」して出てきた文章わけわかんないけどね

実際に効果があったのは3つ!

 

最初にも書きましたが、いろいろある改善案の中から実際にわたしが取り組んで効果があったものは以下の3つです。

  1. 画像を最適化する
  2. ブラウザのキャッシュを活用する
  3. プラグインを使う

 

ちょっと面倒くさいですがやっていきましょう!

メスしろくま
その気になればできるわ!!

 

画像を最適化する

 

ブログに画像をアップロードするときの基本は「できるだけ軽くしてから」!

 

例えば1枚の画像に10テラバイトとか絶対いらないですよね。10テラの画像をつくったなら、できるだけ圧縮して載せないとサイトが重くなってしまいます。

補足
画像のサイズは小さ方から順に「キロ」「メガ」「ギガ」「テラ」と表します。わたしはこういう基礎中の基礎が苦手です。

 

Googleからの「画像を最適化する」という提案は、まだ圧縮できる画像を圧縮してその分軽くしようよ!というもの。

 

めんどくさいけど簡単にサイトを軽くすることができます。

ざっくり手順は以下の3つです。

  1. Googleにどの画像が重いのか教えてもらう
  2. その画像を圧縮する
  3. アップロードし直す

 

 

まずは「PageSpeed Insights」にアクセスして、自分のサイトの速度を計測してください。

 

結果が出た後、下にスクロールしていくと「最適化についての提案」があり、その欄に「画像を最適化する」というものがあると思います。その下の「修正方法を表示」をクリックしてください。

 

 

すると「この画像が重たいよ」というもの一覧がずらっと出て来ます。

まるっとコピーして検索にかけて画像を表示できたら良いのですが、わたしは超地道な方法で頑張りました。

どれでもいいので矢印?をかざすとこのように画像ファイルの正しいURLが表示されます。それを1文字ずつ検索窓に打ち込み、表示された画像を圧縮して元通りにアップロードし直しました。

 

 

圧縮に使ったサイトは「オンラインイメージ最適化ツール」です。これはJpeg専用のサイトなのでPngは「TinyPNG」などがおすすめです。

 

これは完全我流のやり方です。正しいやり方はエックスサーバーからアレコレしてエックスサーバーに直接画像をアップロード・・・みたいな感じだったと思いますが、なんか難しそうな感じがして「ウワッ」と思ってしまったので自分なりのやり方でいきました。

 

正しいやり方に興味がある方は参考になる記事

 

この作業やったの結構前なんですけど、今見返してみると別に難しくない気がします・・・・。次からは・・・・。

 

ブラウザのキャッシュを活用する

 

browser

 

キャッシュとは、「ちょっとの期間だけ保存してあるデータ」のことです。一度見たサイトのデータがちょっとの期間だけ保存されます。保存されることで次にサイトを訪れた時にイチからサイトを読み込む必要がなくなるため、サイトが表示されるまでの時間が速くなります。

 

いわば「前回のデータの使い回し」です。

 

「ブラウザのキャッシュを利用する」というGoogleからの提案は、サイトに訪れる人みんなのサイトに関するデータを使い回してサイトの速度をあげようよ!といったものになります。

 

メスしろくま
1人めが読み込んだサイトの情報をキャッシュとして残して、次に来た人はそのキャッシュをもとにサイトを表示する!それがずっと繋がっていくの。これでかなり高速化できるわ。

 

ブラウザのキャッシュを利用するまでのざっくり手順はこうです。

  1. FTPソフトをDLする
  2. FTPソフトとサイトを繋ぐ
  3. 「.htaccess」というファイルに決まった文をコピペする

 

うっわFTPかよ・・・・と思ってやめないでくださいね!ダウンロードして、必要な情報を打ち込んで、ファイルを見つけて、それにコピペするだけですから!

FTPソフトってなに?
FTPソフトとは、管理画面ではいじれない「サイトの中身」を直接いじることができるソフトのこと。

 

たぬきボーイ
ここわからん!っていうのがあれば気軽に問い合わせてほしい
では細かくみていきましょう。

 

 

まずはバックアップ!

 

これからサイトの中身を直接いじります。手順をそのままに間違わなければ何が起こるはずはありませんが、万が一のためにバックアップをとっておきましょう。バックアップがあればなにがあっても安心です。

 

メスしろくま
もしサイトが真っ白になったときにバックアップがなかったら・・・?ゾッとするわね

たぬきボーイ
ぜったいぜったいバックアップとってね!!!!!!

 

FTPソフトをダウンロードする

 

FTPソフトはいろいろありますが、今回はわたしがつかっている「FileZilla」を例に説明していきます。読みは「ファイル・ジラ」です。

 

わたしがMacを使っているためダウンロードの方法はMac向けのものになります。

Windows向けFileZillaダウンロード方法がわかりやすそうなサイト「KAGOYAサポート」を貼っておきますので、ダウンロードが終わったら合流してください。
たぶん下のリンクからWindowsで64bitか32bitどちらか自分のPCの方を選んで「推奨」の方をクリックすればいけるとは思います。Windowsじゃないので滅多なことはいえませんが・・・。たしかめリンク→自分のPCが34bitなのか64bitなのか確認するには?

タニオカ
Windowsの方また後で!

ではMacの説明いきます。

まずは「FileZillaのダウンロードページ」に飛んでください。

黄色枠の青線部分をクリックしてください。これからさき共通のことですが、「クリック!」といっておいてだいたいダブルクリックです。あしからず。FZ1

 

ダウンロードが終わると左下にこんなふうに現れます。クリック!!

FZ2

 

ダウンロードファイルが開かれます。そこにさっきダウンロードした「Fiile Zilla」があるので、それをクリック。FZ3

 

「開く」をクリック。

FZ4

 

こんな画面が開けば、ダウンロードは完了です!

FZ4

 

FileZillaの設定をする

 

次はFileZillaを使えるように設定していきます。FileZillaにサーバーの情報を入力するだけです。エックスサーバーの場合で説明させていただきます。

 

まずは、FileZillaに入れるサーバーの情報をとりにいきます。「サーバーパネルのログイン画面」からログインしてください。

ログインできたら「FTPアカウント設定」をクリックします。

 

速度をあげるブログのドメインを選択してください。

 

「FTPソフト設定」をクリックでFileZillaに入力する情報が出て来ます。黄枠のなかのものをメモに控えておいてください。

 

では、今メモした情報をFileZillaに入力します。まずは左上のマイクが三本立っているようなアイコンをクリック。

するとこんな画面がでます。

「新しいサイト」をクリックして、自分のサイト名を入力してください。

ここでさっきメモした黄枠内の情報を使います。
(3「FTPファイル転送プロトコル」を選択
(4)ホスト名(メモ)を打ち込む
(5)「明示的なFTP over TLSが必要」を選択
(6)「パスワードを尋ねる」を選択
(7)ユーザー名(メモ)を打ち込む

 

次は「詳細」からデフォルトのローカルディレクトリで「参照」をクリックして、自分の見覚えのあるファイルを選択します。ローカルディレクトリとは、PCの中のことです。ここで選んだファイルから自分のPCのデータにアクセスします。「デスクトップ」など見慣れているものを選べば間違い無いです。

 

次は「転送設定」から転送モード「デフォルト」を選択。

 

「文字コード」から「自動検出」を選択し、「接続」をクリック!

 

パスワードを求められるので、サーバーパネルのログインパスワードを入力して、「OK」をクリック。

 

右側にパラパラとサイトのあれこれが表示されればOKです。

ちなみにFilleZIllaの画面の味方ですが、左がPCの中身、右がサイトの中身です。ドラッグ&ドロップで簡単にコピー&ペーストできます。

 

これでFileZillaが使えるようになりました!

 

「.htaccess」を探し出して定型文をコピペする

注意
 「ITのおもちゃ箱」というサイトの.htaccess記述をそのまま使用させていただいています。この先の説明は「ITのおもちゃ箱」の内容をわたしなりにもう少し細かく説明したものです。

 

右側の「リモートサイト」のファイルの中から、「.htaccess」を探します。ちなみに読みは「エイチ・ティー・アクセス」です。わたしは最近まで脳内で「ヘッタシェッ・・ス」のようなかんじで読んでいました。本当はエイチ・ティー・アクセスです。

 

.htaccessの場所ですが、たぶん「自分のブログのドメイン名のファイル」→「public_html」→「wp〜」の羅列の中にしれっと紛れているのでは無いかと思います。

 

何か間違いがあると嫌なので、一度.htaccessのバックアップをとっておきたいと思います。左の.htaccessをドラッグして左のわかりやすいファイルにドロップします。これでコピーがとれました。

 

そしたら左に写した.htaccessを右クリックして「編集」をクリックします。

.htaccessが開きます。いろいろ何かしら書いてあると思いますが、その一番下に下記のコードをコピーして貼り付けてください。

1
2
3
4
5
6
7
8
9
10
11
12
13
<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 seconds"
ExpiresByType text/html "access plus 1 seconds"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 month"
ExpiresByType text/css "access plus 1 days"
ExpiresByType text/javascript "access plus 7 days"
ExpiresByType application/javascript "access plus 7 days"
ExpiresByType application/x-javascript "access plus 7 days"
</ifModule>

コピペができたら書き換えた.htaccessを左から右にコピーします。きっちりもとにあった場所に戻しましょう。さきほど同様ドラッグ&ドロップでOKです。

 

これで「ブラウザのキャッシュを活用する」ことができました!!!お疲れ様です

 

プラグインを使う

 

最後は一番カンタンで手軽な「プラグイン」を使う方法です。

わたしがサイト高速化のためにいれたプラグインは「EWWW Image Optimizer」というもの

 

読みは・・・・・・。調べても触れているサイトがありませんでした。後半は「イメージ・オプティマイザー」として、前半「EWWW」は「イー・ダブリューダブリューダブリュー!!!!!!!!!」で良いのでしょうか。わかりません。

 

なんとアップロードした画像を自動で軽量化してくれるプラグインです。

たぬきボーイ
便利・・・・・。

 

プラグインのインストールから設定方法、使用方法に関しては全て「オクノテ」というサイトを見てそのまま真似ました。あまりにも補足のしようもないほど完璧な記事なのでそちらを参考にしていただけたらと思います。

 

Head Cleanerを使ったら死んだ

 

サイト高速化プラグインといえば「Head Cleaner」もそのひとつです。以下Head Cleanerについての引用です。

Head Cleaner は、WordPressのそれぞれのページを構成するソースを最適化して、サイト表示速度の向上に寄与してくれるプラグインだ。

特に、サイトのソースの中でも容量の大きい以下の2つをコンパクトにしてくれる。

CSS:デザインやレイアウトを指定する言語
JavaScript:画像にカーソルを合わせると自動的に拡大させたり、アニメーションを取り入れる時などに使うプログラム

 

なんか・・・すごい速くなりそう!

 

ということでわたしもHead Cleanerをいれてみることに。

 

どれどれサイト速度は・・・・

 

パソコンのスコアが「8」上がりました。モバイルも「1」だけですが上がっていました。

 

やったぜと嬉しい気持ちで自分のサイトに戻って来ましたそのときです。

 

ん?

 

 

ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜!!!〜〜〜〜〜〜〜〜〜〜!!!!!!!!!!!!!!!!!!!!!???!?!??!!!!!!?!?!サイト崩れてる〜〜〜〜〜〜〜〜〜〜〜〜〜〜っっ!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

 

タニオカ
・・・・・・・。
わたしが入れているプラグインと相性が悪かったのかもしれませんが、テーマ「Diver」との相性が悪い可能性もあります。ワードプレステーマ「Diver」を使っている方は「Head Cleaner」を使うのはやめておいた方がいいかもしれません。
どうしても使うならバックアップは必ず&必ずとってください。わたしはちょっぴり泣きをみましたのでね・・・・。
Diver使用者に告ぐ
サイト高速化プラグインについてDiverに直接問い合わせてみたところ「Autoptimize」はスライドに影響が出る可能性アリ。「Lazy Load」の昨日はもともとDiverに搭載されているので不要とのことでした。参考までに!

おわりに

 

いかかだったでしょうか。この作業を終える前のわたしがこのブログを見たら「FTPソフトが出てくる時点で簡単じゃねえんだよなあカス」と思ったかもしれませんが、けれど今わたしはたしかに、軽くなったサイトでブログを書いている・・・・。

 

できる!タニオカにもできる!

 

「FTPソフト嫌すぎる」と思っていた過去のわたしにこのブログを見せてやりたいですね。

 

また、ここがわからないな・・・など立ち止まってしまった時はいつでもお問い合わせください。

タニオカ
待ってます!

 

サイト高速化はSEOにもよし、ユーザーのためにもよし。「人が集まるサイト」の基盤づくりにあたります。めんどくさいですがこの先考えると逃げてもいられませんな・・・。

メスしろくま
ちなみにGoogleは85点以上で「パフォーマンスが高い」認定するらしいわよ

 

 

 

たぬきボーイ
目指すぞ85点!!!!!!!
最後まで読んでいただきありがとうございました!

 

おすすめの記事