サイトを全力で軽量化していく!!
公開:2019.09.25 更新:2019.09.26

開幕写真

これはこのサイトの読み込みの速さです。遅い!おそーーーーーーーーい!あんまり遅いから読み込みの問題が出て最近はサーチコンソールがモバイルエラーだらけ………。

極めつけは少し覗いたアナリティクスページ読み込み前に帰る人めっちゃいたこと。これには能天気な猫もショックでした!

という訳で今回はなりふり構わずいろんな要素を駆使してこのサイトを軽くしていく!

画像

Page speed insightsは評価だけでなく良いアドバイスもくれますので、そいつを参考にしていきます。

やはり画像ですね。推測とはいえ、かなりの効果ありです。

という訳でまず画像!JPG重すぎ!もう繊細な写真は諦めて全部PNGにします!

トップページのこれがでかい!こいつをPNGにします。てかなぜ最初からPNGにしなかったし。

直す!直す!直すううう(ry

直しました。

それに加えて背景設定していたCSSも直します。

ついでにCSSもページごとに背景読み込みが書かれてるとかいう愚の極みんだったので、bodyタグをセレクタに、コードを集約しました。

FTPでアップしたら一回結果を見ます。

お、これだけでも90点付近まで来ましたね。

やはり初歩的な物だけでも見直せば大分いい線行きますね。

圧縮系プラグイン

Insightsの次なる指摘は「次世代フォーマットでの画像の配信」のようです。もうPNGやJPEGが主流の世界の終わりも近いのでしょうか…….。

という訳で、プラグインを探します。「ワードプレス 高速化」とかでネットで調べると色々出てきましたが……なんだかどれも信憑性が薄いので、せっかくなのでInsightsが勧めるプラグインを使おうと思います。

という訳で圧縮系プラグインには、リンク先で見つけた「Autoptimize」を使います。

無料版と課金版がある模様

公式が勧めるだけあって評価数もかなりの高レベルですね。安心して使えそうです。

例のごとく、インストールすると設定画面が出てきます。

Autoptimizeはページに含まれる画像の圧縮はもちろん、次世代フォーマットのWebPへの変換からCSS,JSファイルの圧縮までを最適化してやってくれる優秀なプラグインです。

更に、画像の遅延読み込みを使えば、ページ表示の先行も可能です。

ただ、優秀なだけあって高度な機能をいくつも持ち合わせているので、そういう機能は扱うのには相応の知識が必要でしょうから十分気を付けてから使うようにしましょう。

Autoptimizeを有効化するとタスクバーに緑色のマークが追加されます。ショートカットになっていますので、ここからもいろいろ いじれますね。

軽くはなりましたが少し不具合を発見。アーカイブページの葉っぱの背景画像のopacity設定が解けてしまっています。

どうやら、ページ読み込み後に画像をロードする設定をしているとAutoptimizeが画像に[transition][opacity:1]を勝手に掛けちゃうみたいです。

 

少し焦りましたが、これにもきちんと対抗策が用意されていました。

個々の画像を指定することによって、その画像を遅延読み込みの対象外にすることが出来るっぽいです。

私の場合は葉っぱ画像にクラス.backleafを指定しているのでそれを利用しました。

これで解決しました。良かった~。

薄い葉に戻った

終わり?

で、作業に戻るべくちょっとInsightsを覗いたら……….

な、なんか高得点なっとる!?( ゚Д゚)/!

やったーーーー!

と思いましたが、なかなかモバイルの数値が安定しません。パソコンの数値は99で安定。)

モバイルの方はまた対策を考えなければなりませんね…….。 ( 一一):

今回は一回止めて続きはまた書くことにします。

それでは!

おすすめ商品

[基本を学ぶにはこれ]
参考にしているWordpress教本

[テーマ作成のお供に!]
WordPressデザインレシピ集

コメント

内容をご確認の上、送信してください。