写真やイラストの貼り付けによって自分のサイトが重くなっていたのではないか？
…とこの記事に書きましたが、実は真犯人がいました。
多分分かっている人なら今この時点で察すると思いますｗ
それと、Pinterestの埋め込みによるちょっとした実験を行っていたので、ついでにその話も一緒に。
記事数は10ぐらいしかないのにPCでもPageSpeed Insightsで赤点すれすれだったのは流石に違和感
いくら画像のサイズが重いといっても、画像のリサイズ設定忘れただけで50点近くも減点されますかね？
流石に原因はこれだけじゃないだろと感じたので色々試してみました。
CSSとjavascriptの圧縮をしてみた
CSSとjavascriptを圧縮させて軽量化を図りました。
オンラインで圧縮できるサイトを上の記事で4つ紹介されています。
自分はCSS Minifierを利用してCSSと圧縮しましたが、めちゃくちゃ簡単ですね。
ただ、圧縮すると記事に反映しないコードも中にはあったので気を付けてください。
自分の場合、圧縮すると反映されないコードが2つだけありましたね。
結果
またPageSpeed Insightsでページ表示速度をテストしてみました。
以前と変わりませんでした。
まぁ、でしょうね。
自分は不要なCSSやjavaのコードはすぐ消していってるので、コードを縮小した所で劇的に変わるとは思えなかったので…
しかし数字が全く変化しないとは…
トップページの記事数を10→5に変更してみた
ダッシュボード→「設定」→「詳細設定」→「PC版のトップページの記事数」で、トップページに表示する記事数を10から5に減らしました。
結果
なんと、PCの方は20点ぐらい上がりましたね。
モバイルの方はまだ悪いままですが10点ぐらい上がりました。
正直80点以上は欲しかったのですが、PCのトップページに関してはこれでも満足なのでもうこのままでいいかな。
モバイルの方はもうちょっと頑張ってくれ(他力本願)
5枚のイラストを貼るだけのテスト記事
5枚のイラストを貼って、ページ表示速度のテストをしてみました。
こんな感じに。リサイズしてない奴を5枚貼り付けたのでカロリーは半端ないです。
結果
あれれ…？
PCの方は80点近くまで来ました。
何故かモバイルの方は逆に下がりましたが…
もしかして、１記事だけだとイラスト貼ってもそんなに影響ないのか…？
広告を貼るだけのテスト記事
広告を貼るだけのテスト記事をつくり、ページ表示速度をテストしてみました。
こんな感じに。
ちなみに広告は「忍者Admax」を利用していました。
上の記事に書いたように、アドセンスが審査して貰えないので代用としてこれを使っていたのですが…
結果
はい。
真犯人はコイツでした！
広告つけただけでPCの方は20点近くも下がるとかどんだけ～ｗ
という訳で、現時点では広告つけないことにします。
そもそも1日のPV数がろくにないのに広告をつけて収益図ろうという考え方が間違っていました。
サイトが重いとgoogleの評価が悪くなるらしいですねぇ。
まだ記事数少ないけれど、最初から集客して貰えない状況を作っていたのでは20記事だろうが100記事だろうが更新し続けてもあまり意味ないですね。
…え～、結果的にドヤ顔で無知を晒したような記事になってしまって大変お恥ずかしいのですが（笑）
まぁ、嘘はつかないけど間違いは結構言います。
なので宜しければコメントの方で「これは違うよ！」と容赦なくご指摘をお願いします。
それなりに勉強しているとはいえハッキリ言ってブログに関しては素人なので、どんな指摘も貴重なご意見として参考にさせて頂きたいと思っております。
ただ、やっぱり画像の軽量化も大事なのかと。
多くの人が画像をリサイズする事を勧めいているし、少しでもサイトを軽くしたいのであれば画像サイズを軽くすべきかなとは思いました。
早速貼ってあった広告を外し、すべての画像を軽量化したこの過去の記事でページ表示速度をテストしてみました。
素晴らしいです。
…って、なんでPCの方は80点超えてるの？
気まぐれかぁ～？
モバイルの方は色々調べて試してみたがもうワカンネ…
調べたら「はてなブログの仕様でモバイルの表示速度がどうしても遅くなる」と書かれている人も見かけたのですが、これが本当ならもうお手上げ…
CSSとjavaの縮小化もダメ、広告外してもダメ、画像サイズ落としてもダメ…この状態でもモバイルの表示を速くする方法を知っている方がいれば是非コメント欄にお願いします！
Pinterestのピンの埋め込みでページを軽くすることができるのか？
結論から言うと、そんなに変わらない。
Pinterestのピンを埋め込む方法はこちらの記事で丁寧に説明されているので参考に。
こんな感じに、サイズを「大」「中」「小」に設定することができます。
あ、もちろん自分のアカウントを作って自分のイラストをPinterestに投稿しています。
同じように、Pinterestのピンを5つ埋め込むだけの記事を作り、ページ表示速度をテストしてみました。
結果はこんな感じです。
リサイズしていない画像を5枚貼っただけのテスト記事とそんなに差がないんですよねぇ…(モバイル君の謎の頑張り)
Pinterestのピンをはてなブログに埋め込んでみるのもありっちゃあありだが、一々Pinterestにイラストを投稿してはてなブログに埋め込むのは結構手間かかるかなと…
早い話、ファイル形式がpngであればjpgに変換してリサイズして、そのままはてなブログに貼った方が気が楽ですね。
自分はこの「Ralpha」を使ってリサイズとjpg変換を行っています。
いっぺんに複数枚変換できるので大変便利です。
大きさの設定を「長辺基準(px)」にして長辺を「600px」、設定→フォーマット変換設定でPNGイメージをJPGイメージに変換設定すれば、大体は100KB以下のサイズの画像ファイルに変換されます。
たまにイラストだと100KBよりちょっとだけ超えることもありますが、リサイズしていないイラストを5枚ぐらい(約5MB)貼り付けても、それほどページ表示速度は落ちないと分かったので、そんなに気にしなくても大丈夫かなと。
ではPinterestのピンの埋め込みで何が役立つのか？
ピンの埋め込みで一つだけ役に立つものがあります。
GIFアニメです。
プリパラのちりちゃんです。(もちろん自分が描いて作ったやつ)
時間が少ないものであればGIFアニメもPinterestに投稿できるんですよねぇ。
これつい最近知ったのですが驚きましたね。
ちなみにこれの元のファイルサイズは2MB近くあります。
またまた同じように、GIFアニメのピンを貼っただけのテスト記事を作り、表示速度をテストしてみました。
はい。結果は以前とほぼ変わりません。
絵が動くので流石に変動するだろうと思っていたので正直意外でした。
表示速度テスト結果の下に「画像のファイルサイズ落としてみたら？」と提案してきます。
しかし、上の画像の通りヘッダーのサイズ圧縮は提案されているが、ピンのGIFアニメ圧縮は提案されていないですよね。
ちなみにピンがイラストの場合は「これ圧縮しろ」と提案されます。
正直どういう仕組みなのか全くわからないのですが、埋め込んだGIFアニメのピンは0KBであるという事でいいのでしょうかね？
はてなブログに直接GIFアニメを貼ろうとすると何故かアップロードに失敗するので、その時はPnterestにGIFアニメを投稿してそのピンをはてなブログに埋め込むのも１つの手かなと思いました。
…とはいえPinterestにも限界があったようで、このちりちゃんのGIFアニメは投稿できたのですが、サイズが7MBで15秒ぐらいの別のGIFアニメのファイルを試しにアップロードしてみたのですが、できませんでした。
投稿できる基準がちょっと分かんないですね…
それと「作ったGIFアニメをブログに載せてみよう！」って人はなかなかいないんじゃないかな？
このちりちゃんのGIFアニメ、たったの5秒間ぐらいしかないですが、この程度のものでも出来上がるのに2、3日ぐらいかかりましたからねｗ
プロのアニメーターがどれだけすごいのかを改めて実感しました（笑）
少し話が逸れましたが、Pinterestのピンの埋め込みを使うことって結局あんまりないのかな？と思いました。
GIFアニメのピンを埋め込みたい時には便利だろうけども、それをやろうとする人はかなり少数派のような…
ちなみにGIFアニメは「CLIP STUDIO PAINT EX」で作りました。
PRO版でも作れるのですが、3秒間だけしかアニメが作れない制限があるんですよね。
でもまぁ、3秒間だけでも十分かなと。
自分はちょっとだけ長いGIFアニメを作ってみたかったので時間制限が解除されるEXを購入したわけですが…最近全然アニメーション使ってないな…ｗ
まとめ
・トップページに表示する記事数を減らすと表示速度が早くなる可能性が高い
・まだブログを見て貰う人が少ない場合、ページを重くする原因である広告はつけない方が良い
・更に少しでも軽量したいのであれば画像のファイル形式をPNG→JPGに変換しリサイズしてそれを記事に貼り付ける
・Pinterestにイラストを投稿しピンを記事に埋め込むのは軽量化の観点ではあまり意味がない
・GIFアニメをPinterestに投稿できたもので、そのピンを記事に埋め込むと軽量化できる可能性が高い(GIFアニメはそのままはてなブログに貼り付けようとするとアップロードに失敗しやすい)
こんなところですかね。
「もしや！？」と思ってPinterestに着眼してみたのですが、期待していたものとは違う結果に…
GIFアニメには使えるという事が唯一の収穫でした（笑）
【報告】
先週「ブログの更新を毎日やってみます！」と書いたのですが、やっぱり無理があったので更新する日を水曜日、金曜日、日曜日に絞ろうかなとおもいます。
毎日ブログ更新しようとすると「ファンアートや自分の描きたい絵が全然描けない」「他の人のブログを読む時間がほとんどない」といった大問題が生じたのでなかなか厳しいですね…
また都合が悪くなったら更新日を変えてバランスを調整していくつもりなので宜しくお願いします。
ではまた！