NAGOのライフスタイルBLOG

あなたのライフスタイルは?日々楽しく豊かに暮らしたいですね。

サイトの表示速度が遅くなってきたチューニングしてみた

トップページを再読み込みするとアイキャッチ画像が遅れてパラパラ表示された。画像が重い?ページ表示速度が遅くなってる。そういえば画像はリサイズも圧縮もしてなかった。

 

サイトが重いのでデザインテーマを変更し画像を圧縮してスピードアップしてみた

リライトは1月くらいから始めようと思っていたけど、記事が増えた後だと大変なので画像の差し替えだけでも始めようと思いサイトの表示速度から調べてみた。

ツールを使ってページ表示速度を計測してみる

developers.google.com

使ったのはこれ↑自サイトの速度を計測できます。

アナリティクスの行動/サイトの速度/速度についての提案から各ページの速度を確認できます。

 

100点満点でモバイル(66点)パソコン(57点)
70点以上80点を超えるのが理想なんだけど、かなり厳しい現実。

 

筆者の場合は画像を使わないわけにはいかないので画像の最適化から始めてみました。地道な作業です。

現在画像はすべてgoogleフォトに上げてあります。アイキャッチに使っている画像は画像提供サイトからのものでダウンロードサイズはそれほど大きくない640×426(100KB以下)それをGoogleフォトの画像と差し替えてみるとさらに軽くなる。

トップページに表示されているアイキャッチ画像をすべて入れ替えてみるとパラパラ遅れる現象はなくなった。

 

テーマを軽いものに交換し関連記事は削除

次に関連記事を削除してみた。効果はそれほどないようだ。サイドバーの注目記事を増やしたので「関連記事はもういいかな」ということで削除した。

後考えられるのはテーマ、テーマストアに出ている人気テーマをテストしたら一番軽かった「Brooklyn」に決めました。1番人気でしたね、皆さん重さに気を使ってるのでしょうか?

CSSはバックアップしてからテーマ交換

テーマをかえたらCSS吹っ飛びましたね。バックアップ取っとけばよかったけど後の祭り。CSS再設定のついでにスタイルシートの圧縮も同時に行った。こういのうの素人なのでよくわからないけど効果はありそう。

CSSもついでに圧縮してみた

syncer.jp

使ったツールはCSS Minifierコードをいれるだけで圧縮してくれるので素人でもなんとかいけたようだ。

アドセンスは消えたまま様子を見てみる

アドセンスがまだ空白なのが気になるけど一応の作業は終わったので再びスピードを計測してみる。

画像はソフトで圧縮後Googleフォトへ移動

画像をページに上げる前に画像を圧縮した上でGoogleフォトへ移動させて貼り付けてみた。見た感じはそんなに変わらないけど16.9KBから7.7KBまで圧縮している。

再計測モバイルは変化なしパソコンは78までスピードアップ

ページの読み込み速度が一気に上がった。残念ながら80には届かなかったが十分成果は上がったと言えるでしょう。

 

 パンダはキモイが効果抜群Tiny PNG

使ったソフトはTiny PNG。PNGとあるがJPEGも使えるとある。

tinypng.com

パンダがちょいキモイけど効果はすごいです。

こちらの画像は707.5KBから174.8KBまで圧縮、なんと-75%!!

他にもこんなソフトがあります。

www.jpegmini.com

どちらも使えますので臨機応変に。

 

アバターのアイコンも減量200×200ピクセルにして圧縮。意外とこれ重くなってることがあるので注意ですよ。

 

今回は少し疲れました。画像はマメに圧縮リサイズしておかないとまとめてやるとかなり時間がかかりました。googleフォトに上げるとさらに圧縮されてましたよ。