自分の記事を重くする真犯人を見つけた。自分の記事を重くする真犯人を見つけた。それとPinterestのピンの埋め込みは軽量化の救世主になれるのか実験していたという話2019-11-10自分の記事を重くする真犯人を見つけた。考え方www.kedama-okm-ppp.com写真やイラストの貼り付けによって自分のサイトが重くなっていたのではないか?...とこの記事に書きましたが、実は真犯人がいました。分かっている人なら今この時点で察すると思いますwそれと、Pinterestの埋め込みによるちょっとした実験を行っていたので、ついでにその話も一緒に。結果Pinterestのピンの埋め込みでページを軽くすることができるのか?結論から言うと、そんなに変わらない。Insightsで赤点すれすれだったのは流石に違和感いくら画像のサイズが重いといっても、画像のリサイズ設定忘れただけで50点近くも減点されますかね?流石に原因はこれだけじゃないだろと感じたので色々試してみました。CSSとjavascriptの圧縮をしてみたmacoblog.comCSSとjavascriptを圧縮させて軽量化を図りました。オンラインで圧縮できるサイトを上の記事で4つ紹介されています。Minifierを利用してCSSと圧縮しましたが、めちゃくちゃ簡単ですね。圧縮すると記事に反映しないコードも中にはあったので気を付けてください。自分の場合、圧縮すると反映されないコードが2つだけありましたね。Insightsでページ表示速度をテストしてみました。以前と変わりませんでした。PC版のトップページの記事数」で、トップページに表示する記事数を10から5に減らしました。右:モバイルの結果なんと、PCの方は20点ぐらい上がりましたね。モバイルの方はまだ悪いままですが10点ぐらい上がりました。80点以上は欲しかったのですが、PCのトップページに関してはこれでも満足なのでもうこのままでいいかな。モバイルの方はもうちょっと頑張ってくれ(他力本願)5枚のイラストを貼るだけのテスト記事5枚のイラストを貼って、ページ表示速度のテストをしてみました。リサイズしてない奴を5枚貼り付けたのでカロリーは半端ないです。右:モバイルの結果あれれ...?PCの方は80点近くまで来ました。広告を貼るだけのテスト記事をつくり、ページ表示速度をテストしてみました。www.kedama-okm-ppp.comちなみに広告は「忍者Admax」を利用していました。右:モバイルの結果はい。真犯人はコイツでした!広告つけただけでPCの方は20点近くも下がるとかどんだけ~wという訳で、現時点では広告つけないことにします。そもそも1日のPV数がろくにないのに広告をつけて収益図ろうという考え方が間違っていました。サイトが重いとgoogleの評価が悪くなるらしいですねぇ。記事数少ないけれど、最初から集客して貰えない状況を作っていたのでは20記事だろうが100記事だろうが更新し続けてもあまり意味ないですね。www.kedama-okm-ppp.com...え~、結果的にドヤ顔で無知を晒したような記事になってしまって大変お恥ずかしいのですが(笑)まぁ、嘘はつかないけど間違いは結構言います。宜しければコメントの方で「これは違うよ!」と容赦なくご指摘をお願いします。それなりに勉強しているとはいえハッキリ言ってブログに関しては素人なので、どんな指摘も貴重なご意見として参考にさせて頂きたいと思っております。画像の軽量化も大事なのかと。多くの人が画像をリサイズする事を勧めいているし、少しでもサイトを軽くしたいのであれば画像サイズを軽くすべきかなとは思いました。貼ってあった広告を外し、すべての画像を軽量化したこの過去の記事でページ表示速度をテストしてみました。...って、なんでPCの方は80点超えてるの?気まぐれかぁ~?モバイルの方は色々調べて試してみたがもうワカンネ...調べたら「はてなブログの仕様でモバイルの表示速度がどうしても遅くなる」と書かれている人も見かけたのですが、これが本当ならもうお手上げ...CSSとjavaの縮小化もダメ、広告外してもダメ、画像サイズ落としてもダメ...この状態でもモバイルの表示を速くする方法を知っている方がいれば是非コメント欄にお願いします!Pinterestのピンの埋め込みでページを軽くすることができるのか?結論から言うと、そんなに変わらない。www.cocoindia.coPinterestのピンを埋め込む方法はこちらの記事で丁寧に説明されているので参考に。設定することができます。あ、もちろん自分のアカウントを作って自分のイラストをPinterestに投稿しています。同じように、Pinterestのピンを5つ埋め込むだけの記事を作り、ページ表示速度をテストしてみました。結果はこんな感じです。リサイズしていない画像を5枚貼っただけのテスト記事とそんなに差がないんですよねぇ...(モバイル君の謎の頑張り)Pinterestのピンをはてなブログに埋め込んでみるのもありっちゃあありだが、一々Pinterestにイラストを投稿してはてなブログに埋め込むのは結構手間かかるかなと...早い話、ファイル形式がpngであればjpgに変換してリサイズして、そのままはてなブログに貼った方が気が楽ですね。forest.watch.impress.co.jp自分はこの「Ralpha」を使ってリサイズとjpg変換を行っています。いっぺんに複数枚変換できるので大変便利です。大きさの設定を「長辺基準(px)」にして長辺を「600px」、設定→フォーマット変換設定でPNGイメージをJPGイメージに変換設定すれば、大体は100KB以下のサイズの画像ファイルに変換されます。イラストだと100KBよりちょっとだけ超えることもありますが、リサイズしていないイラストを5枚ぐらい(約5MB)貼り付けても、それほどページ表示速度は落ちないと分かったので、そんなに気にしなくても大丈夫かなと。Pinterestのピンの埋め込みで何が役立つのか?ピンの埋め込みで一つだけ役に立つものがあります。プリパラのちりちゃんです。(もちろん自分が描いて作ったやつ)時間が少ないものであればGIFアニメもPinterestに投稿できるんですよねぇ。これつい最近知ったのですが驚きましたね。ちなみにこれの元のファイルサイズは2MB近くあります。同じように、GIFアニメのピンを貼っただけのテスト記事を作り、表示速度をテストしてみました。右:モバイルの結果はい。結果は以前とほぼ変わりません。絵が動くので流石に変動するだろうと思っていたので正直意外でした。表示速度テスト結果の下に「画像のファイルサイズ落としてみたら?」と提案してきます。上の画像の通りヘッダーのサイズ圧縮は提案されているが、ピンのGIFアニメ圧縮は提案されていないですよね。ちなみにピンがイラストの場合は「これ圧縮しろ」と提案されます。いう仕組みなのか全くわからないのですが、埋め込んだGIFアニメのピンは0KBであるという事でいいのでしょうかね?はてなブログに直接GIFアニメを貼ろうとすると何故かアップロードに失敗するので、その時はPnterestにGIFアニメを投稿してそのピンをはてなブログに埋め込むのも1つの手かなと思いました。...とはいえPinterestにも限界があったようで、このちりちゃんのGIFアニメは投稿できたのですが、サイズが7MBで15秒ぐらいの別のGIFアニメのファイルを試しにアップロードしてみたのですが、できませんでした。投稿できる基準がちょっと分かんないですね...それと「作ったGIFアニメをブログに載せてみよう!」って人はなかなかいないんじゃないかな?このちりちゃんのGIFアニメ、たったの5秒間ぐらいしかないですが、この程度のものでも出来上がるのに2、3日ぐらいかかりましたからねwプロのアニメーターがどれだけすごいのかを改めて実感しました(笑)少し話が逸れましたが、Pinterestのピンの埋め込みを使うことって結局あんまりないのかな?と思いました。PRO版でも作れるのですが、3秒間だけしかアニメが作れない制限があるんですよね。3秒間だけでも十分かなと。自分はちょっとだけ長いGIFアニメを作ってみたかったので時間制限が解除されるEXを購入したわけですが...最近全然アニメーション使ってないな...wまとめ・トップページに表示する記事数を減らすと表示速度が早くなる可能性が高い・まだブログを見て貰う人が少ない場合、ページを重くする原因である広告はつけない方が良い・更に少しでも軽量したいのであれば画像のファイル形式をPNG→JPGに変換しリサイズしてそれを記事に貼り付ける・Pinterestにイラストを投稿しピンを記事に埋め込むのは軽量化の観点ではあまり意味がない・GIFアニメをPinterestに投稿できたもので、そのピンを記事に埋め込むと軽量化できる可能性が高い(GIFアニメはそのままはてなブログに貼り付けようとするとアップロードに失敗しやすい)こんなところですかね。絞ろうかなとおもいます。毎日ブログ更新しようとすると「ファンアートや自分の描きたい絵が全然描けない」「他の人のブログを読む時間がほとんどない」といった大問題が生じたのでなかなか厳しいですね...また都合が悪くなったら更新日を変えてバランスを調整していくつもりなので宜しくお願いします。22:06自分の記事を重くする真犯人を見つけた。はてなブログPro東方やプリティーシリーズとかが好きでファンアートや二次創作を描いてます。ブログでは二次創作の事もちょいちょい触れつつ、絵に関する事やそれ以外の日記みたいな事も壁打ちのように書いていきたいと思います。映画「AI崩壊」を見に行きました。'none'){$Contents.slideDown(400),$this.text("目次を隠す")}else{$Contents.slideUp(400),$this.text("目次を表示")}})});プライバシーポリシースターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。