FC2ブログのコメント投稿欄の装飾ツールバーが重たいので遅延ローディングしました

投稿 2018年05月08日
24
初級パソコン術
FC2ブログコメント装飾ツールバーLazyLoad

弊ブログをPCから閲覧の場合マイクロソフトのIEでは正しく表示しておりません! 閲覧ブラウザは Chrome や Firefox をお勧め致します。

FC2ブロガーさんでしたら、記事ページ下部のコメント投稿欄にある「コメント装飾ツールバー」をご存知ですよね、それが正式な名称なのかは筆者はよくは知りませんが(これの正式名称ってあるんでしょうか? ご存知の方はお知らせ下さいまし(笑))

コメント装飾ツールバー

これですが、ご利用のテンプレートによってはこのコメント装飾ツールバーを装備していないものもあります、まぁ、テンプレート作者さんの任意のようですが、、、。

もしも、下図のようなコメント装飾ツールバーでしたら、そのブログのテンプレートはもうかなり古~い時代のテンプレートになりますから、テンプレートそのものを最近の「レスポンシブテンプレート」などに替えられることをお勧めします、何故ならば最近のWeb技術であるHTML5+CSS3をあなたのブログではテンプレート的に表現出来ない(表示出来ない)ことになるからです。

旧タイプのコメント装飾ツールバー

このコメント装飾ツールバー(新旧タイプ問わず)は複数の小さなJavaScriptと言うプログラムの集合体のような構造になっていて、実はブログの表示速度を遅くしてしまう要因が隠れているのです。


もっと軽くならないの?
重いよねぇ、これ~

重たいってどれくらいかと言いますと、大雑把な言い方で「1秒以下の 0.4~0.5秒」と言う数値です(爆) 「なに言ってるのよ、それじゃほんの瞬間じゃない、大袈裟!」って方もいることでしょうね(笑)

そのような認識の方は、Web知識に疎い方とレッテルが貼られてしまいますよ(爆)

もっと具体的な言い方をしますと、その0.4~0.5秒、あなたのブログの記事ページ全体の表示が「遅くなる」と言う意味でして、それ以外にも記事ページの表示を遅らせる要因は何枚か貼ってある画像であったり何かのブログパーツであったりと、どっさり存在していて、このコメント装飾ツールバーもそのうちの1つと言うことなんです。

記事の内容によってはいつも複数枚貼っている画像が、その記事では1枚だけと言うこともあるでしょう、その時には複数枚貼っている時よりも記事ページの表示速度は「軽くなる=速くなる」と言う意味になります。

さて、コメント装飾ツールバーに話を戻しますが、このツールバーは記事ページを表示するときにいつも固定的にそれだけの「負荷」を毎回与えてしまっていることになる訳なんです。

その負荷を GTmetrix で分析してみたものが下図です。

GTmetrix分析-1

上図の 赤枠で囲ってあるものが全てそのコメント装飾ツールバーに関わる「負荷要素」でして、いっぱいあります (^^;; アセ

この固定的負荷要素をバッサリと除外してしまって、その分記事ページの表示を速くする方法が今回の記事なんですが、除外してしまう=コメント装飾ツールバーをテンプレートから削除してしまうのではなく(笑)今まで通りに使いつつも個別記事ページの表示に負荷を与えないようにすると言う、実に都合の良い方法なんです(笑)

弊ブログでも、既に画像の表示や多種のJavaScript等にも取り入れ始めました「LazyLoad=レイジーロード」と言う「遅延読み込み技術」を応用して、このコメント装飾ツールバーの負荷除外を行う訳です。

それを比較的簡単に、、、そうですねぇ、ブログ記事やテンプレートにHTMLやCSSを使って何かをカスタマイズする程度の知識がある方でしたら実現出来る方法を、相互リンク友達のmochiさんがつい最近公開して下さいましたので、下記ブログカードをクリックした先の記事をご参照下さい。

マウスで下記ブログカードに触りますとちょっと暴れます(笑)が、イヤがっている訳じゃありませんから確実にクリックして下さいね(爆)


コメント投稿欄のツールバーをlazysizesで遅延ローディングしてみました。 | 富士宮で貯蓄と資産運用

だからdocument.writeは止めなさいって言ってるでしょ… コメント投稿欄のツールバーが… 先日、個別記事ページをGTmetrixでブログ速度分析したら、【Defer parsing of JavaScript(JavaScriptの解析を延期する)】の項目でズラズラと指摘されてしまいました。...

上記記事中段にあります 『コメント投稿欄のツールバーの遅延ローディング用コードの紹介』にその方法が解説されております。

弊ブログでも早速mochiさんのテクニックを応用させて戴いたんですが、なんとまぁ、素晴らしい効果が得られました d(-_^)good!!

GTmetrix分析-2

良いですか! この分析結果からは、記事ページ表示が 4.4秒 - 2.9秒 = 1.5秒 も速くなってしまいましたよ(爆)

この意味がよく解らない人でも(笑)上図のいろいろな数値がグッと小さくなっていて、GTmetrix分析での PageSpeed Score / YSlow Score の評価スコアがアップしていることはお解り戴けることでしょうけど、それだけブログ記事表示時の負荷の軽減が出来た!と言う意味でして、この結果は、今シーズンからメジャーリーグで日々めざましい活躍を続けている二刀流・大谷翔平くんの投手での1勝に匹敵するくらいと言ったら大袈裟?でもないくらいなんですからね、ほんとなんですよ(爆)


やったね(笑)
やったぁ うははは

ですから、FC2ブロガーさんでしたらこのテクニックは利用して損はありません!  (^_-)-☆パチッ

■ 追記: 2018/05/10
「コメント装飾ツールバー」を遅延ローディングしたり、時にはツールバーそのものを削除したりと、いろいろとテストしております ^^

■ 追記: 2018/05/11
「コメント装飾ツールバー」は記事でも紹介したとおり、ブログ表示には非常に余分な負荷が掛かる要素であるため、結局弊ブログではテンプレートから削除することに致しましたが、各種装飾そのものはこのツールバーがなくても出来ますから、コメント欄の下の方の筆者のテストコメントをご参照下さい。


あなたのブログはモバイルフレンドリーですか?
Google モバイルフレンドリーテスト

あなたのブログ内分析はGTmetrixが強力です!
GTmetrix


検索からの方はトップページへもどうぞ

[ 関連記事 ]
もっと見る
ぼっちん
ぼっちん

24 COMMENTS

There are no comments yet.

mochi  

"comment.js"と"blog_res.js"について…

こんばんは。ぼっちんさん。

【Defer parsing of JavaScript】の項目で、"comment.js"と"blog_res.js"が残っていますが、
実はこのスクリプトはコメント投稿全然関係なくて、
テンプレート記述必須になっている変数<%ad><%ad2>によって展開されているものです。

僕は広告のjsも含めてコレをなんとかしたいと思って、非同期読み込みになるiframeを使って、
<iframe srcdoc='<%ad><%ad2>' height="40"></iframe>
こんな感じで、子フレームに閉じ込めてみたんですよ。

そしたら"comment.js"と"blog_res.js"も指摘されなくなってスコアアップできたんですが、
でもIEで広告表示されなくなっちゃいまして・・・
Google ChromeやFire foxはOKだったんですけどね。

僕のところは無料ブログですので、広告表示されないとマズイと思って元に戻したんですけど、
ぼっちんさんのブログだったら広告無いし効果あると思いますよ。

2018/05/08 (Tue) 18:57
ぼっちん

ぼっちん  

To mochiさん

mochiさん、こんばんは~ ^^

ご指摘くださった部分を処理したらバッチリと表示除外されました(笑) ありがとうございます ^^
何故にこうなるのか良く解っておりません(笑)が「おっ なるほどぉ」って感じです ^^
ただもう1つ「Defer parsing of JavaScript」に
------------
https://oops0011.blog.fc2.com/blog-entry-232.html (87.8KiB of inline JavaScript)
https://oops0011.blog.fc2.com/blog-entry-231.html (87.8KiB of inline JavaScript)
https://oops0011.blog.fc2.com/blog-entry-234.html (87.7KiB of inline JavaScript)
https://oops0011.blog.fc2.com/blog-entry-233.html (87.6KiB of inline JavaScript)
------------
こんなのが残ってしまっていて、これがずいぶんな容量になってしまってますから、これでスコアがちょっとも上がらないことのようですけど、果たして何処から発生してるやらなんですよね (^^ゞポリポリ
きっとたぶん同じような要因があるんだろうと思うんですけど (^^ゞポリポリ

2018/05/08 (Tue) 21:10

mochi  

トラックバック下の前後の記事表示が…

こんばんは。ぼっちんさん。(^▽^;)

ブログの一番下の方(トラックバックの下)に、
サムネイル画像付きで前後の投稿記事へのリンクがありますよね。

JavaScriptで$.ajax({type:'GET',url:'https://oops0011.blog.fc2.com/blog-entry-xxx.html'
とかやってデータを作りだしているところ。

もしかしたら、コレHTMLデータを一旦まるごと読みに行っちゃってるんじゃ…???

2018/05/08 (Tue) 22:40
ぼっちん

ぼっちん  

To mochiさん

mochiさん、おはようございます ^^

ブログの一番下の方(トラックバックの下)に、
サムネイル画像付きで前後の投稿記事へのリンクがありますよね。

ハーイ(^O^")/ ここの部分は私がカスタマイズしたものじゃなくてテンプレートのデフォルトのままなんですよね。

もしかしたら、コレHTMLデータを一旦まるごと読みに行っちゃってるんじゃ…???
(~ヘ~;)ウーン ただ、コメント装飾ツールバーの遅延読み込みを行うとこのデータの塊が生成するようになった気がするんですけど、時間を見てその当たりの動作を、遅延読み込みを組み込んでないテンプレートで確認してみますね (^^ゞポリポリ

2018/05/09 (Wed) 08:05
ぼっちん

ぼっちん  

To mochiさん

いま「コメント装飾ツールバーの遅延読み込みを組み込んでないテンプレートで確認してみますね 」を確認しましたら、やはりこのデータの塊は生成しておりませんでした。

そして、とりあえずテンプレートからご指摘部分に該当する「前記事 後記事」へのページ送り部分を削除してみたんですけど、やはり
https://blog-imgs-117.fc2.com/o/o/p/oops0011/2018-05-09-08-35-58-comp.png
このように同じデータ生成が行われておりまして、livedoor 相互RSS遅延読み込み用の「liverss-2.js」も4個分同じように残るようになりました (^^ゞポリポリ
この「4個のデータの塊」ってのがどういうルーチンで生成されているのかに何かヒントがありそうな気がしますが、時々3個っていう場面も見られて固定件数ではないんですよね(爆)

それと、個別記事ページを開いてから下にスクロールして行って、コメント欄の「コメント装飾ツールバー」が画面に入ったところでデベロッパーツールに ↓ この表示が現れるのが確認されましたが、これは問題ないですかね? (^^;; アセアセ
https://blog-imgs-117.fc2.com/o/o/p/oops0011/2018-05-09-09-08-17-comp.png

あっ それと、何やらコメント欄の名前やブログURLのキャッシュが残らなくなってしまって、コメント毎にそれを記入する必要が現れました。

2018/05/09 (Wed) 08:55

mochi  

ヾ(;´▽`A``アセアセ

こんばんは。ぼっちんさん。

僕のブログだとその塊が出てこないんですよね。
今夜テンプレートをここに合わせて、ちょっとテストしてみます。

デベロッパーツールに…の部分は、僕の記事中でもコメントしてありますが、
僕はそれほど気にしてないんですけど。(^▽^;)

コメント欄の名前やブログURLのキャッシュは、
<%ad><%ad2>をiframeで閉じ込めちゃったせいかもしれません。
そこで展開されているblog_res.jsの中を覗いてみたら、
cookieを弄ってるみたいなので。(ToT)ゞ スンマセン

2018/05/09 (Wed) 18:45
ぼっちん

ぼっちん  

To mochiさん

mochiさん、こんばんは~ お手数をお掛けしてごめんなさいね~ (^^ゞポリポリ

僕のブログだとその塊が出てこないんですよね。
今夜テンプレートをここに合わせて、ちょっとテストしてみます。

それ、私も別のテンプレでテストしてみました(笑) mochiさんビンゴです(笑)
やっぱりテンプレート構造の違いによって、コメント装飾ツールバー&livedoor相互RSSの遅延ローディング利用にいろいろとGTmetrixでの分析結果が様々に出ますねぇ (^_^; アハハ…

もしかして私が使わせて戴いてますテンプレートのAxisと相性がよくないんじゃ?って感じも (^^ゞポリポリ
Akira先生のテンプレってかなり作り込まれてて複雑さがありますからねぇ(笑)
その中でもこのAxisってけっこう特殊なテンプレート構造になってますから。

デベロッパーツールに…の部分は、僕の記事中でもコメントしてありますが、
僕はそれほど気にしてないんですけど。(^▽^;)

ハーイ(^O^")/ 解説記事中にも読ませて戴いてましたから「おっ これのことだったのね(笑)」って感じで笑ってたんですけど、私も気にしてはいないんですけど、これがもしかして「キャッシュ消えに関わってるんじゃ?」って思ったものですからね(笑)
言い方が不明確で申し訳ございませんでした m(_ _)m

コメント欄の名前やブログURLのキャッシュは、
<%ad><%ad2>をiframeで閉じ込めちゃったせいかもしれません。

ハーイ(^O^")/ フレーム閉じ込めから解放したら、キャッシュがまた戻ってきました(爆) mochiさんビンゴです (^-^)//""パチパチパチ

やっぱり「テンプレートとの相性」ってことで「コメント装飾ツールバー&livedoor相互RSSの遅延ローディング利用」を考えた方が良いのかもしれませんね (^^ゞポリポリ

2018/05/09 (Wed) 19:14

mochi  

ハッキリしたことは言えないのですが・・・

こんばんは。ぼっちんさん。

僕のブログでも暫定的にAxisテンプレにして、
GTmetrixでぼっちんさんのブログと比較してみました。

https://blog-imgs-119.fc2.com/m/o/c/mochi1999/20180509223518317.png

塊が出てくるキッカケとしては前にコメントさせていただいた
最新前後投稿記事ならびに同カテゴリー記事のサムネイル画像付リンクにあると思います。
$.ajax({type:'GET',url:'https://oops0011.blog.fc2.com/blog-entry-xxx.html'

ただこのスプリクト自体に問題があるわけではありません。
確かにHTMLを読み込んでいますが、レンダリングをしているわけではなく、
実際の表示速度への影響はほぼ皆無だと考えています。

僕の暫定AxisでもOptimize the order of…において、
前後記事htmlで複数指摘が出ておりますが、
ぼっちんさんブログと異なり、Defer parsing of JavaScriptの項目では、
前後記事htmlが指摘されてはいません。

僕の暫定Axisブログとぼっちんさんのブログとの違いは、
HTMLに含まれるinlineのJavaScriptコードの容量の差です。

GTmetrixのスコアリングにおいては、前後記事htmlのJavaScriptコード容量だけをみて、
レンダリングを阻害すると判断しているのではないか?と推測します。

実際Waterfallを確認してみると、
指摘されているjsファイルが何度もリクエストされていることはありませんし、
スコアとしてあのような数値が出てしまっているだけだと思います。

外部jsファイルもdefer属性を付けてあげることで、
Defer parsing of JavaScriptの項目で指摘されないようになります。
ファーストビューに関係ないようなものは、まとめて外部ファイル化し、
defer属性をつけて読み出した方が良いのではないかと思います。

特にAxisテンプレの場合、サムネイル画像付リンクを作り出すために、
前後記事のhtmlにアクセスしている部分もありますので、
テンプレート内のコード自体のスリム化を目指した方が効果的かと思います。

2018/05/09 (Wed) 23:24
ぼっちん

ぼっちん  

To mochiさん

mochiさん、おはようございます ^^
わざわざテンプレートをAxisに設定して、いろいろと検証してくださってありがとうございます m(_ _)m

私がGTmetrixの分析に積極的になっている意味は、そのスコアアップ云々ではなくて、現実的な「スマホでの表示高速化」を図るのが最終目的なんですよね (^^ゞポリポリ
現状で、いま弊ブログをiPhone Xから覗いた時に、表示されるまでに若干の「引っかかり」感を感じているんですね (^^ゞポリポリ
この引っかかり感を除去したくて、GTmetrix分析を注視している次第なんです (^^ゞポリポリ

僕の暫定Axisブログとぼっちんさんのブログとの違いは、
HTMLに含まれるinlineのJavaScriptコードの容量の差です。

はい、実は私の現状(笑)を見るに見かねた(笑)のでしょう、Akira先生が「FC2ブログの高速化は何ができるか」このような記事をmochiさんのコメントの直前に昨夜に書き下ろしてくださっていたんです(笑)
そうそう、その記事の中でmochiさん記事へのブログカードも張っておられますよ(笑)
その中で、mochiさんが上記ご指摘部分の回避方法もズバリ解説してくださっていて、そしてmochiさんのこのお言葉もあり「なるほどぉ!」と強く再認識致しました ^^

無理矢理inline化した複数のJavaScriptも気にはしていたんですけど、もう一度基本に戻してdefer属性付記で試してみますね、と言うか、むしろその方が確かに正解ですよね(笑)
inline化した時点ではGTmetrixの数値も「おっ 凄い」って言う結果がたまたま出ちゃった(笑)ものですから、今までそれにあぐらをかいていたんですけど、その後にいろいろと複雑化した様々な要件との絡みで逆に足かせ的な逆効果になってしまっていたようです (゜゜☆\(--メ)ポカッ

特にAxisテンプレの場合、サムネイル画像付リンクを作り出すために、
前後記事のhtmlにアクセスしている部分もありますので、
テンプレート内のコード自体のスリム化を目指した方が効果的かと思います。

そうそう、まさにmochiさんのこのご指摘とAkira先生の諸々のアイデアがピタリと合致する部分ですよね d(-_^)good!!

じっくりと腰を据えて、テンプレートの再構築と言うか、更なる改善を進めてみたいと思います ^^

私の為に大変なお時間を割いて下さってほんとにありがとうございます、感謝申し上げます m(_ _)m

2018/05/10 (Thu) 07:53
ぼっちん

ぼっちん  

コメント装飾のテスト

「コメント装飾ツールバー」をテンプレートから削除してのコメント装飾テスト

これは赤文字で(笑)
これは青文字で (^_^)ニコニコ

これは太文字で どうかな?(笑)

当然OKですね~ d(-_^)good!!

2018/05/11 (Fri) 07:21

chiemi  

こんばんは

お二人の会話まで読んで.....大変勉強になりました。
そして.....

大変疲れたぁ~~~^^
でも、楽しかったぁ

こういう疲れ...楽しくて良いですね。
面白くて、分からなくて、何度も読み直して...
でも分からなくて...でも何となく分かるところもあったりして....

大変勉強になりました。
ありがとうございました。

2018/05/14 (Mon) 23:56
ぼっちん

ぼっちん  

To chiemiさん

chiemiさん、おはようございます ^^

記事内用は「このまんま」(笑)なんですけど、私とmochiさんのコメント内容はとってもマニアックになっちゃってます(笑)
「更に突き詰める」ことをやろうとするとこうなることは必至なんですよね、Webテクニックって (^_^; アハハ…
だから「解る範囲まで」で終わらせてもいいことでもあるんです ^^

大変疲れたぁ~~~^^
でも、楽しかったぁ
こういう疲れ...楽しくて良いですね。

でしょでしょ(笑) 私は年金受給年代(笑)ですけど、こういうことが楽しくて仕方がないもんですからけっこう脳みそを活性化しているみたいで、その心地良い疲れが夜の「爆睡」の原因になっているみたいで、寝た瞬間に朝になっちゃってるような毎日でしてね(爆)

大変勉強になりました。
ありがとうございました。

いやぁ、そのように言って戴けると照れてしまいますよ (^_^; アハハ…
私がいまのように「ブログを思いっきり楽しめている」のは、chiemiさんもお使いのAkira先生の高いレベルのテンプレートのおかげでして、こういう素地がなかったらこういうマニアックな知識追究もやる気にもなってなかったと思ってます(笑)

chiemiさん、素敵なコメントをほんとにありがとうございます ^^

2018/05/15 (Tue) 08:39

chiemi  

早速使ってみました...

出張中でしたので、戴いたアドバイスともども、御礼やお返事
遅くなりました...(すっごく嬉しかったのに)

今頭の中が灰になっています。
GTmetrix 使いました....衝撃の結果に黒目が瞬時になくなりました
(実はちょっと重さは感じていました。なんとなく原因も)

テスト勉強さぼっちゃったけど、何とか答えは埋めたから
良くないだろうけど、もしかしたら偶然合っている答えもあるかも
って思っていたら、そんなに甘くないよね....って結果
その結果は、偶然はありえないよ...と突きつけられた現実であり
「やっぱり」と覚悟していた以上の結果でもあり....でした(例えが酷いですが)

一番に考えなくてはならないのが....画像ですよね。
自己満足的に思いっ切り....しちゃってますもん....

そこから考えてみます。
何とか頑張って、ステージを一つでも上を目指したいと思います。
ありがとうございました。

2018/05/18 (Fri) 01:00
ぼっちん

ぼっちん  

To chiemiさん

chiemiさん、おはようございます ^^

おやおや、出張があるお仕事なさってるんですね~ ^^
私も若い頃はよく出張仕事もしてましたけど、今はお気楽在宅ワーカーしてます、この歳で(爆)

今頭の中が灰になっています。
GTmetrix 使いました....衝撃の結果に黒目が瞬時になくなりました
(実はちょっと重さは感じていました。なんとなく原因も)

あらららら、やっぱりショック大きかったんでしょうね、私もそれをお伝えしてよいものかちょっと悩みましたけど、心を鬼にして、、、(^^ゞポリポリ
だって、とっても素敵なブログなんですから「このままじゃ勿体なさ過ぎる」と思いましてお節介させて戴きました (^^ゞポリポリ

一番に考えなくてはならないのが....画像ですよね。
自己満足的に思いっ切り....しちゃってますもん....

chiemiさんブログのメインコンテンツである「花画像」ですから、少しでも綺麗に載せたいことはじゅうぶん分かりますけど「ムダに画像ファイル容量が大きすぎる」んですね。
それは画像の横縦サイズのことではなくて「ファイル容量」のことを言います。
今までchiemiさんがブログ記事に載せてきた花画像の「ファイル容量の軽量化」を行うと、殆ど全ての画像が視覚的見映えを劣化させることなく 30%~40% くらい迄に圧縮軽量化が出来てしまいます。
例えば画像1枚 500Kb あるとすれば、軽量化することによって 160Kb くらいまで軽量化出来てしまいまして、それでもパソコンやスマホ閲覧からでも「同じように綺麗に表示出来る」訳でして、その軽量化分、ブログ表示のストレスが小さくなると言う意味なんですね (^_^)ニコニコ 
ですから「ムダに画像ファイル容量が大きすぎる」というのはそのことなんです ^^

最近のスマホ画面って、どのメーカーのものも「高解像度ディスプレイ」ですから、スマホからでも「画像が綺麗に見える」ようにするには「画像の横サイズ」も気にする必要がありまして、それには横サイズで1200px以上が必要なんですね(笑)

ですから、ブログ記事に載せる画像のより良い条件は「横サイズ 1200px 以上で、よりファイル容量を圧縮軽量化した画像」が理想的になります。

よく昔の定番的横サイズ640pxで画像を今の時代も載せているブロガーさんが多いんですけど、それはパソコンからは綺麗に見えて居てもスマホのような高解像度ディスプレイから見ますと、ややボケて表示されてしまうんです (^^ゞポリポリ

もう既にスマホからのブログ閲覧が多くなっている時代ですから、これからはスマホからの「見映え」で画像を扱う方がモバイルフレンドリーにもなると言うことなんです、chiemiさんブログの閲覧者さんの為にも (^_^)ニコニコ 

今まで掲載して来た画像を修正するのは大変な作業になってしまいますから「次の記事から」と言うことでも良いと思いますけどね ^^
ただ、いまchiemiさんがお使いのテンプレート「Axis」の場合にはエンターページ(表紙ページ)のカテゴリ欄の各画像は確実にその圧縮軽量化をすると、あっ!とびっくりするくらいにGTmetrixスコアはアップすると思います(私が経験者)

何とか頑張って、ステージを一つでも上を目指したいと思います。
ありがとうございました。

はい、是非是非ステップアップを図ってみて下さいね~、ちょっと根性は必要かもですけど e(^。^)g_ファイト!!

2018/05/18 (Fri) 08:23

chiemi  

すごく優しい説明....

ありがとうございます。

痒いところまで、気持ちよく手が届く.....ように教えてくださって
もう、やる気満々です。
聞きたかったことも、しっかり、もうお答えくださっていて....
それは、まずは、ここ

>掲載して来た画像を修正するのは大変な作業になってしまいますから「次の記事から」
>横サイズ 1200px 以上で、よりファイル容量を圧縮軽量化した画像

昨夜お邪魔して、画像を見せて頂きました。ここの画像が「横サイズ1200PX」になっていたので、
このサイズなのかな?...と
その必要性から丁寧に教えて頂いたので早速やってみます。

更新も確かに楽しいですが、個人的には、こういう挑戦、新しいことのお勉強が
好きだし面白いので(驚いても凹むわけではなくビックリ!!!驚愕...ということなので)
これからも、何かありましたら教えてください。

脱F(あ、やっぱり書くと凹む^^Fですって...F)...脱D....

2018/05/18 (Fri) 10:46
ぼっちん

ぼっちん  

To chiemiさん

またまたのコメント、お疲れ様です~ ^^

もう、やる気満々です。
いやぁ、そういうポジティブ思考な方って、私は大好きなんですよね (^_^)ニコ

そうそう、chiemiさんがコメント書いて下さってる最中に、私も自身の返信コメントに「追記」してたタイミングだったみたいですよ(笑)
恐縮ですが、もう一度前の返信コメントを読み直して戴けたら幸いです (^^ゞポリポリ

脱F(あ、やっぱり書くと凹む^^Fですって...F)...脱D....
(〃^▽^〃)oあはははっ♪ 何を隠そう、私が初めて自分のブログをGTmetrixでチェックした時もとんでもないスコアで愕然としちゃったんでした(爆)
何処かをチョコッと何かしたら一挙に A スコアになると言う性質のものでもないですから、コツコツと1歩ずつ「楽しみながら」頑張ってみて下さいね~♪

2018/05/18 (Fri) 11:11

chiemi  

ありがとうございます

早速確認します。
ありがとうございます。

あ、今新しいエントリーページだけでも、改良できないかと
画像サイズのみ小さくしてアップし、再度GTかけたところ、
プロフィール画像も引っ掛かりましたので、またまた参考させて頂き
大きさを200×200に。

サイズを小さくすると、今までの画像は重いので「700KB 超え」もありましたのに、
半分以下に...でも、さらに圧縮なんですよね。
この圧縮の仕方を今考えています。

Compressor.ioを使うか
ワードを使うか....他にあるか調べ中
縮小をしたことはあっても、圧縮したことがないので、迷い中です

2018/05/18 (Fri) 11:39

chiemi  

カテゴリーの画像....

分かりました。
画像圧縮もですが、まず、カテゴリー画像を軽量化(縮小)してみます。

しかし今までの画像を替えないと、「最近の記事」「同カテゴリーの記事」の画像などなどが
どうしても重さを出しますね。
加えて、ここで教えていただいているコメント欄も、そしてカウンターのGIF

あれもこれも付いているページって
要らないものがたくさん入って容量を無駄に使っているパソと似ているなぁと。

でも承知の無駄と知らないで使っている無駄は大きく違いますね。
どれを止めて、どれを残し、また残しながらも負担を減らすにはどうするか
楽しみながら、苦しみながら^^
時には休み、時には甘え....続けたいと思います

2018/05/18 (Fri) 11:59
ぼっちん

ぼっちん  

To chiemiさん

この圧縮の仕方を今考えています。
私の場合には
https://compressor.io/
https://tinypng.com/
この2つの無料サービスを適時使い分けておりますけど、なかなか綺麗に圧縮軽量化してくれてますよ ^^
compressor.io の場合には1枚ずつしか扱えませんから面倒さは感じますが、私としてはこちらの方がd(-_^)ナイス!!って感じです。
あと https://naifix.com/jpeg-lossy-compression/ こちらのサイトに他の圧縮ツールがいろいろと書かれていますから参考になさって下さいね。

画像は「横縦サイズの適時縮小」を行ってから「圧縮軽量化」するのが正しい順番です。

でも承知の無駄と知らないで使っている無駄は大きく違いますね。
どれを止めて、どれを残し、また残しながらも負担を減らすにはどうするか
楽しみながら、苦しみながら^^

そうなんです~(笑) ブログの中には「余分な負荷要素」がどっさりと存在しているんですよね~ (^_^; アハハ…
画像だけじゃないんです(爆) プラグインであったりもしますし、、、。
だから、それらも総合して、要らないものは捨てたりWebテクニック的な処理(LazyLoadのようなもので)したりと、あの手この手を駆使する(苦痛も楽しさに置き換えて(爆))ことも必要なんですよね ^^

時には休み、時には甘え....続けたいと思います
ハーイ(^O^")/ 見守らせていただきますね~(笑)

2018/05/18 (Fri) 12:33

chiemi  

こんばんは

「ただいま帰りました」

な、なんですか....これ
早速使ってみました。ご紹介頂いた2つのサイト。
綺麗・簡単・早い・登録要らない....などなどなど
もう、すごい....何故こんなに素敵なものを色々ご存知なんですか
大興奮です。私、何から何まで教えていただいて...
こんなに楽しちゃって良いのでしょうか?(ダメって言わないでくださいTT)

ほんとうに、ほんとうに....
ありがとうございます。

2018/05/18 (Fri) 19:29
ぼっちん

ぼっちん  

To chiemiさん

お帰りなさ~い(笑)

ねっねっ、けっこうイケてるツールでしょ(笑)
必要に駆られて粘着的(笑)にいろいろと検索すると、こんなツールというか超簡単で素晴らしい無料サービスも見つけられるもんなんです ^^

大興奮です。私、何から何まで教えていただいて...
こんなに楽しちゃって良いのでしょうか?(ダメって言わないでくださいTT)

うんうん(^-^) たまたまAkiraさんの同じテンプレートを使っているもの同士ですから、ブログ表示の高速化をGTmetrixで分析しつつ改善を進めるって、大体は同じコースを辿る(笑)ことになるんですから、ちょっと先に進めてる私の知り得てる経験値はchiemiさんに伝えてあげられますよ~♪

2018/05/18 (Fri) 21:05

chiemi  

こんばんは

教えて頂けたこと、実践する時間が楽しいです。
ブログの方も、少しずつですが、毎夜、時には仕事休憩中も、こつこつ昔画像を替えてます。

そうすると仕事関係のHPなんかも気になっちゃって....一体プロさんはどんなんだろう....
プロさんに頼んだHPってどうなんだろう...と興味が広がっちゃって大変です^^

あと....此処へ伺うと面白そうなことがたくさん書かれているので、
あっという間に時間が経ってしまいます。
やってみたいこと、やってみたかったことも.....みつかりますので楽しいです。

今夜はこれから「GIFアニメーションの作り方」を、もう一度読もうと思います。
それでは.....(わくわく)

2018/05/27 (Sun) 00:44
ぼっちん

ぼっちん  

To chiemiさん

chiemiさん、おはようございます ^^
真夜中にコメントをありがとうございました(笑)
私はそういう時間(笑)にはもう起きていられなくて爆睡タイムなんですよね~ (≧ω≦。)プププ

そうすると仕事関係のHPなんかも気になっちゃって....一体プロさんはどんなんだろう....
プロさんに頼んだHPってどうなんだろう...と興味が広がっちゃって大変です^^

いやぁ、そのお気持ちよく分かりますよ~(笑)
私もネットで法人企業さん相手の仕事をしておりますから、会社組織のサイトをよく参考にすることが多いんですけど、未だ未だレスポンシブ未対応だったりSSL未対応だったり、たまにそれらをGTmetrixしてみる(笑)ことも多いんですけど、外注に出しているプロ屋さん(笑)のWebデザインの力量を疑問視しちゃう場面がけっこう多いんですよね(爆)

そういうプロの仕事よりもAkira先生のテンプレートの技術力の方が勝ってるんだから、私が心酔しちゃってる所以でもあります d(-_^)good!!

やってみたいこと、やってみたかったことも.....みつかりますので楽しいです。
私のはほんとの我流ですからきっといい加減な部分も多いかもしれませんから、chiemiさん流にアレンジしてみて下さいね (^^ゞポリポリ

GIFアニメーションの作り方はいろいろな方法がありますから、最初は真似から始めても、きっとそのうちにchiemiさんの手法に辿り着くでしょうから、いろいろと実際にやってみて経験値を積み重ねると良いですよ~。
楽しみながら頑張ってくださいね~ ('◇')ゞ

2018/05/27 (Sun) 07:56

chiemi  

ありがとうございます

頑張ります♡
嬉しい・楽しい・面白い
頑張りますね♡

2018/05/28 (Mon) 22:18

LEAVE A REPLY