こんにちは。フィーニィです。
今日は英語ではなくて、ブログのスマホでの表示速度改善について。
CSSコードの囲み方と、画像圧縮です。
サーチコンソールやアナリティクスで「表示速度改善のための提案」を見ると、まったくわからない文ばかりなのですが、ひとつ気になったのが「HTML のずれ」というもの。
私と同じ悩みを抱えてるいる方がいらっしゃるのではないかな。( いや、いないかぁ…)
ということで、２点を書きます。
スマホ版のコードは１つの場所では一括で囲む
「スマホ版には、コードを< style> </style> で囲むこと」
とよくありますよね、私はその囲み方を勘違いをしていました。
ブログの文字を大きくしたり、見出しに色を付けたりするための CSS コードです。
私は他にヘッタやフッタをすっきりさせるコードもつけています。
それらのコードを貼り付ける場所は「デザイン→スマホ→ ヘッダ」を開いてその中ですね。
そこまではOK なのですが、私はいくつかの CSSコードを加えるたびに<style></style> で囲んでいました。
「ヘッダ」のHTML 欄の中にいくつも ( 実際３つも！) 「style」の文字がある状態。
これは表示速度を遅くさせる一つの要因だそうです。
Oh, my!
「ヘッダ」でも「フッタ」でも、<style></style> は１回だけ、が正しい書き方ということです。
あらあらあら。
そういえば私の余計な </style> は、よく四角い囲み線が反転していましたっけ。
また、改行が大きすぎるのもよくないと読んだので、無駄に取っていたスペースを詰めてみました。
こういう作業は恐ろしいことですが、写メを映したり、メモをとったりして、いつでも元に戻せるようしながら、挑戦しましたよ。
幸い、スマホ版の画面はその後も正常に表示されているので、大丈夫だと思います。
では次に画像の圧縮です。
Tinypng とはてなフォトの設定で画像圧縮
これは Luna さんに教えていただいた方法です。初心者でも安心してできるやり方を教えてくださって、とても感謝しています。
tinypng はインストールなどしなくていいんですよ！初心者の味方ですよね。
はてなフォトも、設定ができることなど知りませんでした。
このダブル使用で、見た目の大きさは変わらないのに「重さ」が軽くなります。
この画像も、95KB ありましたが、２つを使って 30KB まで落としたものです。
Tinypng の使い方
Tinypng で検索し、パンダの横の長四角の中に、圧縮したい画像をドラッグインさせるだけで、圧縮が始まります。
圧縮率は、パンダに (?) おまかせです。
すごく小さくしてくれるものもあるので、見ていると楽しいですよ。
「お！ここまでできた！」と声に出るほど、圧縮してくれることもあります。
* パンダの気分ということではありません。元の画像によるそうです。
パンダが万歳したら、完了。
「down load 」を押せば、「ファイル」の「ダウンロード」の項に入っていますので、あとは自分の分かりやすいファイルに移すことができます。
ちなみに「tinypng」はオランダとスウェーデンにある会社で、大手企業も使用している信用できるサイト、ということです。
初心者はこういうことも、心配ですよね。
上の花の画像は、まずTinypng でここまで落とせました。
330 × 381 ピクセル 95.1KB
↓
同じ大きさ 71.9KB
はてなフォトの設定を変えて小さくする
はてなフォトは画像の質のパーセンテージを変えて小さくすることができます。投稿の仕方も少し違いますので順番に書きます。３ステップです。
①はてなフォトの設定を変える
右上の「設定」を開くと「質」という項がありますので、好みの数字に変える。
これで「これからはてなフォトにアップデートする画像の質」が設定されます。
私は 70 ％にしましたが、80 ％くらいに設定するといい、とよく読みます。
②先にフォトライフにアップデートしておく
小さい写真をブログに貼るためには、画像をあらかじめ「アップデート」しておきます。
ダッシュボードの右上のルービックキューブのようなアイコンから
「はてなフォトライフ」
「アップデートする」
ここに、先ほど Tinypng で小さくした画像をドラッグイン。
③アップデートした小さい画像を投稿する
「写真を投稿」のアイコンをクリックすると、さきほどアップデートしておいた画像が右端に並んでいますので、そこから選んでいつものように「選択した写真を貼り付け」します。
注意しなければならないのは、設定を変えても過去に貼った写真が小さくなるわけではない、ということ。
そうね、そんなに甘くない。
なので私は、目がしょぼしょぼして記事の更新が途絶えるくらい、貼り換えの作業をしているところです…
速度が速くなりました！
たくさんの大きな画像を貼ってしまった私は「パソコンの前に座る＝画像を圧縮する」という毎日を送っていました。
それでも問題が解決に向かっているというのは嬉しいものですね。
今回書いた２つのことをして、アナリティクスで赤い棒線がでていたページも、緑色に変わりました！
表示速度が速くなったようです！
速度を確かめるにはアナリティクスか、サーチコンソールでできますが、「pagespeed insights」は、あまり頻繁に押すとサーバーに負担がかかるのでお勧めしない、と書いてあるのを読みました。
ああ、なんてこと。いったい何回押しちゃっただろう、私…。
こういうことは、初心者には大変ですよね。調べたページに書いてあることがよくわからない…とかね。
しかし画像を軽くしておく、というのは私にもできて、効果もあったと感じます。
旅行の記事などで、大きな( 素敵な )写真をたくさん貼っている方がいらしたら
Tinypng と「はてなフォト設定」のダブル使用を、私もお勧めします。
最後にもう一度、Luna さん、ありがとうございます。
読んでくださったみなさん、ありがとうございます。
それではまた。次は英語のこと、書けますように。
Bye for now.