fiiney と絵本で英語れんしゅう

たのしい英語、旅行、お庭のことなど

はてなブログ 表示速度を改善するために初心者ができる2つのこと

こんにちは。フィーニィです。

 

今日は英語ではなくて、ブログのスマホでの表示速度改善について。

 CSSコードの囲み方と、画像圧縮です。

 

サーチコンソールやアナリティクスで「表示速度改善のための提案」を見ると、まったくわからない文ばかりなのですが、ひとつ気になったのが「HTML のずれ」というもの。

 

私と同じ悩みを抱えてるいる方がいらっしゃるのではないかな。( いや、いないかぁ…)

ということで、2点を書きます。

 

 

 

スマホ版のコードは1つの場所では一括で囲む

 

スマホ版には、コードを< style> </style> で囲むこと

とよくありますよね、私はその囲み方を勘違いをしていました。

 

ブログの文字を大きくしたり、見出しに色を付けたりするための CSS コードです。

私は他にヘッタやフッタをすっきりさせるコードもつけています。

 

それらのコードを貼り付ける場所は「デザイン→スマホ→ ヘッダ」を開いてその中ですね。

 

そこまではOK なのですが、私はいくつかの CSSコードを加えるたびに<style></style> で囲んでいました。

 

「ヘッダ」のHTML 欄の中にいくつも ( 実際3つも!)  「style」の文字がある状態。

 

これは表示速度を遅くさせる一つの要因だそうです。

Oh, my!  

 

「ヘッダ」でも「フッタ」でも、<style></style> は1回だけ、が正しい書き方ということです。

 

あらあらあら。

 

そういえば私の余計な </style> は、よく四角い囲み線が反転していましたっけ。

 

また、改行が大きすぎるのもよくないと読んだので、無駄に取っていたスペースを詰めてみました。

 

こういう作業は恐ろしいことですが、写メを映したり、メモをとったりして、いつでも元に戻せるようしながら、挑戦しましたよ。

 

幸い、スマホ版の画面はその後も正常に表示されているので、大丈夫だと思います。

では次に画像の圧縮です。

 

Tinypng とはてなフォトの設定で画像圧縮

 

これは Luna さんに教えていただいた方法です。初心者でも安心してできるやり方を教えてくださって、とても感謝しています。

 

tinypng はインストールなどしなくていいんですよ!初心者の味方ですよね。

はてなフォトも、設定ができることなど知りませんでした。

 

このダブル使用で、見た目の大きさは変わらないのに「重さ」が軽くなります。

この画像も、95KB ありましたが、2つを使って 30KB まで落としたものです。

 

f:id:fiineytoeigo:20200728120515j:plain

白い花 taken by fiiney

 

Tinypng の使い方

Tinypng で検索し、パンダの横の長四角の中に、圧縮したい画像をドラッグインさせるだけで、圧縮が始まります。

 

圧縮率は、パンダに (?) おまかせです。

すごく小さくしてくれるものもあるので、見ていると楽しいですよ。

 

「お!ここまでできた!」と声に出るほど、圧縮してくれることもあります。

* パンダの気分ということではありません。元の画像によるそうです。

 

パンダが万歳したら、完了。 

「down load 」を押せば、「ファイル」の「ダウンロード」の項に入っていますので、あとは自分の分かりやすいファイルに移すことができます。

 

ちなみに「tinypng」はオランダとスウェーデンにある会社で、大手企業も使用している信用できるサイト、ということです。

初心者はこういうことも、心配ですよね。

 

上の花の画像は、まずTinypng でここまで落とせました。

330 × 381 ピクセル 95.1KB

             ↓

同じ大きさ    71.9KB

 

はてなフォトの設定を変えて小さくする

はてなフォトは画像の質のパーセンテージを変えて小さくすることができます。投稿の仕方も少し違いますので順番に書きます。3ステップです。

 

①はてなフォトの設定を変える

右上の「設定」を開くと「質」という項がありますので、好みの数字に変える。

これで「これからはてなフォトにアップデートする画像の質」が設定されます。

 

私は 70 %にしましたが、80 %くらいに設定するといい、とよく読みます。

 

②先にフォトライフにアップデートしておく 

小さい写真をブログに貼るためには、画像をあらかじめ「アップデート」しておきます。

 

ダッシュボードの右上のルービックキューブのようなアイコンから

「はてなフォトライフ」

「アップデートする」

 

ここに、先ほど Tinypng で小さくした画像をドラッグイン。

 

③アップデートした小さい画像を投稿する

 「写真を投稿」のアイコンをクリックすると、さきほどアップデートしておいた画像が右端に並んでいますので、そこから選んでいつものように「選択した写真を貼り付け」します。

 

 

注意しなければならないのは、設定を変えても過去に貼った写真が小さくなるわけではない、ということ。

 

そうね、そんなに甘くない。

なので私は、目がしょぼしょぼして記事の更新が途絶えるくらい、貼り換えの作業をしているところです…

 

速度が速くなりました!

 

たくさんの大きな画像を貼ってしまった私は「パソコンの前に座る=画像を圧縮する」という毎日を送っていました。

それでも問題が解決に向かっているというのは嬉しいものですね。

 

今回書いた2つのことをして、アナリティクスで赤い棒線がでていたページも、緑色に変わりました!

 

表示速度が速くなったようです!

 

速度を確かめるにはアナリティクスか、サーチコンソールでできますが、「pagespeed insights」は、あまり頻繁に押すとサーバーに負担がかかるのでお勧めしない、と書いてあるのを読みました。

 

ああ、なんてこと。いったい何回押しちゃっただろう、私…。

 

こういうことは、初心者には大変ですよね。調べたページに書いてあることがよくわからない…とかね。

 

しかし画像を軽くしておく、というのは私にもできて、効果もあったと感じます。

旅行の記事などで、大きな( 素敵な )写真をたくさん貼っている方がいらしたら

 

Tinypng と「はてなフォト設定」のダブル使用を、私もお勧めします。

 

最後にもう一度、Luna さん、ありがとうございます。

 

読んでくださったみなさん、ありがとうございます。

それではまた。次は英語のこと、書けますように。

 Bye for now.