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

そいる塾長
そいる塾長

どうも、そいる塾長です。

ちょっとここ数日深夜に頑張っておりました。このブログは戦闘中に書いております。途中荒れるかもしれませんがご了承ください。その戦いの軌跡をご覧あれ。誰が興味あるねん(笑)

前回書いたこちらの記事。

【初心者がWordPressで遊ぶ】この2か月半でやったことをまとめてみる。
そいる塾長 どうも、そいる塾長です。 余談です。塾や勉強関係ありませんがなんか最近質問箱のほうにブログに関する質問がときどき来るようになっているので書いておきます。最近あまり質問箱に回答しなくてすみま...

ひょんなことから再度計測することに。

再度サイトのスピードが問題に

ここまでは本当にCocoonのに標準機能で出来ることをやってたんですが、ここからさらに手を入れました。単なる自己満足ですがタイトル通り遊んでいます(笑)

その辺はまた詳しく書くとして、新たに入れたプラグイン、アニメーションを簡単に設定できるプラグインなのですがこれがきっかけで再度サイトスピードが気になることに。

今このサイトを開いてもらうと上からヘッダーとグローバルメニューがスライドインしてきます。あとふわっと記事が下からフェイドインしてきます。これはCSSで。もちろんほとんどコピペですが。

これで楽しくなってしまってもっといろいろ動かしたくなってしまったわけです。だって男の子だもん(中2感)

ということでアニメーションを簡単に設定できるプラグインを入れてしまったんですね。初心者がすべてCSSで書くのはめんどいし難しいので。それがこれ。

WP Shortcodes Plugin — Shortcodes Ultimate
ビジュアルコンポーネントの包括的コレクション

しかしネットでの評判を見るとこれがなんでもとっても重たいとのこと。でもやりたいことを実現するにはこのプラグインを入れるととっても楽ちん。ということで試しに入れてみたわけです。ダメなら削除すればいいですしね。

結果、そんなに重たくなったという感覚はなかったので安心していたんですがやはり少し気になって久々にこのサイトで計測を。これで沼に足を突っ込んでしまうことに…(-_-;)

PageSpeed Insights

前も紹介したこちらね。前回はこんな感じでした。

初心者がWordPressで遊ぶ(1)「突然のブログサイト高速化作業」
そいる塾長 どうも進学塾soilの塾長です。 今日、講習の合間の休憩時間にWordPressについて色々調べてましたら、こんなサイトを見つけまして。 サイトの表示速度を計測するサイトですね。 なんかネ...

頑張った結果PCとモバイルの両方いい感じに持って行けたわけです。特にモバイルは99点ですよ!

ところが今回再度同じサイトですると計測すると衝撃の結果が…。

モバイルサイトが衝撃の33点!(゚Д゚;)

マジですか…こないだ99点よ?( ;∀;)

この数カ月でおれは何をしたというんだ…(いやそのプラグイン外せよという突っ込みはやめてください。簡単に認めたくないことってあるじゃないですか…男の子だから)ということで再度高速化に挑むことに。

ただ一つ気になる点が…。

こちらはPCサイト。え?なんで?めっちゃ健康そうな色と数字。

どうやらモバイルサイトだけに問題があるようです。

こんなことってあるんですね…う~ん、なんでだろう…(*_*; ※これがフラグです。

といことでPageSpeed Insightsさんに

こういうことですね。簡単に言えば…

画像が重いんだよ!

ということです。そりゃあれから記事を100くらい書きましたしいろいろ画像もアップロードしましたし。

てことでいろいろやってみますね。

とりあえずこれまで使っていたプラグイン

EWWW Image Optimizer
より小さな画像、より速いサイト、より幸せな訪問者。ロケット工学の学位を必要としない、包括的な画像最適化です。

こいつを停止。代わりにこいつ↓を投入。

TinyPNG – JPEG, PNG & WebP image compression
Speed up your website. Optimize your JPEG, PNG, and WebP images automatically with TinyPNG.

このCompress JPEG & PNG imagesの問題は圧縮できる画像の上限が500個/月という点。

今画像が900個くらいなので最初の一括圧縮で困るわけですね(;’∀’)

しかしとりあえず全画像EWWW Image Optimizerで一旦全体は圧縮しているのでできる限りでいいやということで早速使ってみるとこんな感じ。

画像が900個くらいあったので残念ながら上限の500個で引っかかり途中で止まってしまいましたがほとんどの画像でまだまだ圧縮できました。

てかこれ見て気が付いたのが私があげている画像がでかすぎるんですね(;’∀’)

jpgであげりゃあいいものをpngでサイズも気にせずバンバン挙げてたわけです。

EWWW Image Optimizerさんは弱いといっても一応圧縮してくれてたわけで、その結果MB級の画像を毎日挙げてたらそりゃ重いわなと。

透過した画像とかが質にこだわる画像はpng。それ以外はjpgでアップロード。

初心者にはこんな当たり前のことを知らなかった自分が情けない( ;∀;)

調べてもなかなかアップロードした画像をpngからjpgに変換するのは面倒そうなので忘れよう。これから気を付けることに。

ちなみにCompress JPEG & PNG imagesはこちらのサイトのプラグインバージョン。

TinyPNG – Compress WebP, PNG and JPEG images intelligently
Free online image compressor for faster websites! Reduce the file size of your WEBP, JPEG, and PNG i...

こちらのサイトで気楽に画像を圧縮できます。

ただなんせプラグインは圧縮できる上限に達したので一旦停止して再度EWWW Image Optimizerに戻しました^^;

いや圧縮もなにもそもそも画像がでかすぎる問題

そもそも画像サイズがデカすぎるんですよね。ポスターにするわけではないですからね。

これもなんも考えずにアップロードしてたな~…(;’∀’)ということで画像サイズ自体を小さくします。

ということで大きな画像を縮小してくれるプラグインを導入。

https://ja.wordpress.org/plugins/regenerate-thumbnails/Regenerate Thumbnails

こちらでこれからアップロードする画像は自動で指定サイズにしてくれます。そしてすでに使用している画像も一括で縮小。楽ちんですね。

そしてもう一つ。こちらは「フルサイズ画像の制限と過去画像のリサイズ」をしてくれるプラグイン。

Imsanity
Automatically resizes huge image uploads. Are contributors uploading huge photos? Tired of manually ...

こちらも同様。これで画像も小さくなったはず。

なんか圧縮する順番を間違えた気もしますが気にしない。

とりあえずこれで画像はかるくなった!…はず。

ということで再計測

はい、点数さがったよ~ん(゚Д゚;)

なんでやねん(笑)