初心者がWordPressで遊ぶ(1)「突然のブログサイト高速化作業」

そいる塾長
そいる塾長

どうも進学塾soilの塾長です。

 

 

今日、講習の合間の休憩時間にWordPressについて色々調べてましたら、こんなサイトを見つけまして。

 

PageSpeed Insights

サイトの表示速度を計測するサイトですね。

なんかネットを見てると重いサイトは色々問題あるとのこと。

確かにそうかもしれません。人のサイト覗くとき重たいとすぐ離脱したくなるもんな…。

今の塾のブログではこんな事考えたこともなかったな~と。

ということで、ちょっくらやってみよ~っと、ということで軽い気持ちで計測スタート。

 

 

・・・

 

 

・・・

 

 

・・・

 

 

(・o・)

おい…、これいいのか?

ついてるよ・・・?

え…?これ遅いよってことやんね?

え?なんでなんで?まだ2記事しか書いてないよ。

まだなんにもいじってないし…、プラグインもいれてない…、え?なんで?

ねえ?ねえ?な・・・

き~んこ~んか~んこ~ん♪

 

ということで授業再開…(あかん、なんかとっても気になるぞ…。)

 

・・・

 

・・・

 

・・・

 

時は流れ…授業終了後、自宅に帰って只今チェック中。

なんか色々見てみるとやはりこのスピードはよろしくない模様。本当のことを言えば現段階では気にする必要はないのかもしれないが、頑張ればスピードアップ可能ということ。

(゚∀゚)

頑張る必要はなくてもこういうのは頑張ってしまう人(笑)

おっしゃ、いっちょやってみるか!

ここでふと気づく…(そういえばこれって誰のサイトでも計測できるんだよな…。)

ということで師匠(もはや勝手に師匠呼ばわり)のサイトを勝手に計測(笑)

さくら個別ができるまで - 中学生の勉強情報を塾長くにたてが日々発信!
中学生の勉強情報を塾長くにたてが日々発信!

 

・・・

 

・・・

 

・・・

 

(._.)

…さ、さすがっすね。

 

しかし余計にやる気出てきた!こうなったらもう止められないよ、私!気になりだしたらもうやめられない!

意地でもにしてやるべ!

といことで色々調べながらやってみますよ。

参考にしたのはこちらのサイトなど。

WordPressを高速化する12の方法 – 表示速度を上げるテクニック
WordPressで表示速度を高速化する方法を、初心者の方でも分かるようにまとめました。キャッシュを活用する方法からコードを圧縮するプラグインまで。

 

 

 

画像の最適化

 

まずはこれよね。だってまだなんにも弄ったりしてないのだから重たい理由はこれしかない。

ということでまずはこれで画像をチェック!↓

 

クロームのアドイン「Image Size Info」

 

Error 404 (見つかりませんでした)!!1

ほほう、こりゃ便利だ。サイトの画像のところで右クリックすると…

こんな感じでその画像のサイズがわかってしまう!

(なおこのサイズは後ほど行う画像最適化の処理後の数値です。だいぶ軽くなってます。)

これで調べてみたらやはり画像がちょっと重たかったかなと。

う~ん、やはり画像を軽くする必要があるぞ…、面倒だな…。

と思って調べるとやっぱあるのね。

 

 

WordPressプラグイン「EWWW Image Optimizer」

やっぱりワードプレスって便利よね、なんて思いながらインストール。

プラグインは入れ過ぎ注意って感じのようだけど、とりあえず問題起きるまでは極力プラグインで切り抜けようと心に決めております。

で、早速画像の最適化~、ポチ!

 

・・・

 

・・・

 

・・・

 

え…、こんなに時間がかかるの?

 

・・・

 

暇です。眠いです。明日激烈夏期講習です。寝落ちしそうです。そうだAmazonプライムでナルト見よう・・・

 

・・・

 

ナルトを見るつもりがなぜかドラえもんをみながら散々待たされ、ようやく完了。

さ~って、気を取り直していよいよ再計測!これでさぞかしスピードアップしていることだろうよ。

はっはっは、では行くぞ~!!!

再計測!

 

・・・

 

・・・

 

・・・

 

 

おっしゃ、Goodでた~!緑になっとる~!

やった、やった、や・・・

・・・

ん?あれ?ちょっとまって…

 

・・・

 

モバイル版変わってね~!!!

 

 

その他の手段もやってみる

 

う~ん、多分これじゃない気はするんだけど、後々必要になってくるだろうから今のうちにやっておいてみよう。

 

プラグイン「Autoptimize」をインストール

 

次の一手を繰り出す。HTMLとCSSを圧縮します。

・・・

はい、変わりませんね。今回の問題はこれじゃない。

ということで、なんか提案されとりますのでこれ↓に対応してみます。

うん、これでもダメか。(本当にできているかは分かりません笑)

しゃーない…。

 

ブラウザキャッシュの有効化

 

これをするためには、サーバー内にある.htaccessというファイルにコードを追記します。

FTP使っての編集です。

FTPソフトはこれにしました。

https://filezilla-project.org/

こういうのは一応いまの塾のホームページで慣れているつもりだけど理解はしていないので不安だですね。

書き換えた瞬間、画面真っ白になる的な話がネットにゴロゴロ…(^_^;)

怖い。

ちなみにFTPのコードはこんな感じ。

やっぱりなんかエディタを入れておこうと思いましてこの後これを導入しておきました。

Sublime Text 3 - Sublime Text

それはさておき、ちょっと怖いけどやるしかないね。

えーい、ままよ!

 

・・・

 

 

・・・

 

 

・・・

 

 

あ・・・(・。・;

やってしまった・・・。恐怖で震えました…。まさかの記事が表示されなくなるというピンチ。

か~ら~の~・・・

バックアップとってました~、てってれ~!ヘ(゚∀゚ヘ)アヒャ(疲れてきた…)

とまあ、危うく大惨事となるところでしたが無事生還。

バックアップ大事!

で、今度はちゃんと書き直して、再アップロード。

無事これでブラウザキャッシュも有効化されたはず。

今度こそ…今度こそ…

再・計・測!ハッ!

変わらね~!!!!!

 

あかん、もう寝よう…その時歴史が動いた!

 

なにやってもピクリともモバイル速度があがらんので今日はもういいやと。

色々やった結果PC版はこんな感じに。

PCの方は90まであがってますね。なんやかんやで弄った効果は出ているようです。

でもなぜかモバイルのほうがピクリと動かんのですがね。モバイル特有の何かがあるんですかね~…

なんか自分のスマホでやると昼間よりもかなり速度上がってる気がするんですよね。

試しに今の塾のブログサイトや師匠のモバイルサイトをスマホで開いたりして比べてみても、ダントツでこのブログが早く表示されている気がするんだけど…。

 

な~んかおかしくないか?(・・?

 

 

ということでGoogleのモバイルサイトのスピード計測サイトへ。これね↓

How speeding up your mobile site can improve your bottom line