スポンサーリンク

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

WordPressで遊ぶ
そいる塾長
そいる塾長

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

 

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

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

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

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

 

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

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

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

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

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

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

Shortcodes Ultimate
A comprehensive collection of visual components for your site

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

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

PageSpeed Insights

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

 

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

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

 

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

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

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

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

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

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

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

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

といことでPageSpeed Insightsさんに

 

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

画像が重いんだよ!

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

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

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

EWWW Image Optimizer
Speed up your website and improve your visitors' experience by automatically compressing and resizing images and PDFs.

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

Compress JPEG & PNG images
Speed up your website. Optimize your JPEG and PNG 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 PNG images while preserving transparency
Make your website faster and save bandwidth. TinyPNG optimizes your PNG images by 50-80% while preserving full transparency!

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

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

 

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

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

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

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

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

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

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

Imsanity
Imsanity は巨大な画像のアップロードを自動的にサイズ変更します。投稿者は巨大な写真をアップロードしていますか? 手動スケーリングに疲れましたか? 不満への救済です!

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

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

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

 

ということで再計測

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

なんでやねん(笑)

 

これを見る限り画像自体の問題は手を入れる前に比べて少しは改善されているような。

逆に一番上のテキスト圧縮の有効化っちゅうのが問題ですな。ということでGoogle先生に聞いてみる。

SEO対策:PageSpeed Insightsの「圧縮を有効にする」を修正する方法
関連記事 関連共有:クリックして Twitter で共有 (新しいウィンドウで開きます)Facebook で共有するにはクリックしてください (新しいウィンドウで開きます)クリックして Google+

ということでこちらのサイトのおっしゃる通りXSERVERのサーバーパネルで「.htaccess」の編集を。といってもコピペですが。(FTPでやればよかったね。)

簡単にできます。

 

・・

 

 

・・・

いや…これ前にもう対処したんですけど…(;’∀’)

すでに「.htaccess」編集されているやん。

なんでなん…?この警告モバイルのほうだけ表示されているし。

ということで再度計測!

 

・・・

もういやや…。

なんでやねん。

 

 

プラグインを停止してみる

認めたくはなかった。認めたくはなかったけれどやっぱりこれだよね。画像をあれだけ小さくしてもびくともしないスコア。

絶対プラグイン…犯人はお前だろうよ?

ということでまず最初にSmart Slider 3を停止してみる。

Smart Slider 3
Responsive slider plugin to create sliders in visual editor easily. Build beautiful image slider, layer slider, video slider, post slider, and more.

スライドショーを表示するプラグインですね。正直スライドでショーするものがない今は全くいらないですからね。しかもどう見ても重そうなプラグインだし^^;

すると…

キターッ!( `ー´)ノ

はいはい、そういうことですね。やっぱり原因はプラグインだったということです♪

う~ん、じゃあこれを停止すると抜群に速くなるということでしょうね…

Shortcodes Ultimate
A comprehensive collection of visual components for your site

Shortcodes Ultimateは先ほど紹介したようにアニメーションを簡単にショートコードで作れちゃうプラグイン。それ以外にも色々使える(そうです)。

アニメーション気にいってたんやけどな~。あきらめるか~…CSSとか頑張って勉強すれば何とかなるんかな…サイトで動く画像…文字…束の間の夢やったな…いうて自己満足やしな…誰も気にせーへんよな…それより表示が遅いと嫌がられるな…やっぱあきらめるしかないか。

決心しました。よし停止するっ!からの即測定!

どやっ!!!

 

 

 

・・

 

 

 

・・・

 

 

 

おまえちゃうんか~い!

もう…どういうことやねん。まったく変わらんやん。

このあといろいろプラグインを停止したり削除したりするも変化なし。

Smart Slider 3以外はそこまで悪さしていない模様。

おかげでShortcodes Ultimateは外さなくてもよさそうなので正直ほっとしたんですが^^;

この計測結果の画像をよく見てください。

2:37:5

そろそろ眠たくなってくる時間です。

 

CocoonのFunction.phpにコードを追加する

スクロールせずに見えるコンテンツのレンダリングをブロックしているJavaScript/CSS を除去してください

というのが出た場合の対象法です。…今回Googleさんからのアドバイスにこれは出てないのでやっても意味ないよね。と思いながらもやってみる。

はい、効果なし(-_-;)

わかってたましたよ。

気にしてへんし!

え?スクショ?

忘れたわ!

 

AMP化すべし!

なんでもモバイルサイトの重要性が高まっていてGoogleさんはモバイルサイト重視になるんだとか。

ちなみにSEOとか気にしていません。ただ高得点がとりたいのです。職業柄ね(笑)

ということで出てきたパワーワードAMP化

なんでもこれをすることで爆発的にサイトが高速化するとのこと。

しかも!

このサイトのWordpressのテーマCocoonはこのAMP化をボタンを一つクリックするだけで実現可能。

しかもレイアウトも崩れにくいとか。それだけは嫌ですしね。

な~んや早く言ってよ!ということで早速ポチっとな!

 

 

・・

 

 

・・・

 

 

 

はい、スコアさがったよ~ん(*_*;

疲れてしまってこれもスクショ取るの忘れたし…。49点くらいやったかな。

なんやねん…なんやねん…AMP化でモバイルサイト高速化ってタイトルにしよう思ったのに…遅くなるなんてあんまりやん…。

そして早々にAMP化解除…。

 

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

 

このタイトル…前回の高速化作業の最後と同じですね…(;’∀’)

ただ前回は問題のあったモバイルのスピードをモバイル専用サイトで計測したら結構良い結果だったので満足して寝たというオチでした。

モバイルサイトの読み込み速度とパフォーマンスをテストする
たった今、モバイルでの自分のサイトの読み込み速度を確認しました。あなたもぜひ #TestYourSite で読み込み速度の改善方法を確認して、訪問者を逃さないようにしませんか。

こちらですね。

ただ残念ながら今回はこちらでもダメでした。真っ赤な計測結果に。

そこで思い出したんですよ。前回、師匠のサイトはどうなんだろうと計測したことを。

ということで今回も勝手に計測。すると…

(゚Д゚;)

おかしくないか!?師匠のサイトも前回はたしかモバイルPCともに80超え。この3カ月でなぜにここまで下がるんやろ?

ざわ・・ざわざわ・・・ざわ・・・ざわ・・・

これもしかして原因が外にあるんじゃね?

ということで調べますと、なんかGoogleさんのご都合で計測サイトの基準がめっちゃきびしくなったとのこと。

 

・・

 

・・・

 

 

 

なんだよなんだよ…、ということでもういいです。またそのうちね…。また勉強しよう。

高校生
テスト後の生徒

今回は点数下がったけど平均点も下がってたの。あの優秀なさくら個別くんもあの点数なんだから僕の点数も悪いわけじゃないんだからね!プンプン

というよくあるテスト後の生徒みたいな言い訳をして終了。

あ~疲れた…寝ます。

 

今日はこのへんで。

 

 

コメント