サイト&ブログの高速化メモ

2020年09月28日
6
0
更新案内以外
歴史の話ではありません。
書いておかないと後々分からなくなるので自分メモです…

サイト

※画像圧縮:
squoosh(google)
複数圧縮不可。トップレベルで圧縮率が高い模様。
あっしゅくま
squooshと同じアルゴリズムで圧縮、1-2%の誤差で30枚一括処理可。pngも可。

※テキスト圧縮:gzip圧縮実行
fc2ホームページは可能だったみたい。.htaccessで実行。
FC2ホームページサンプルサイトを参照。

※高速化対応「.htaccessでできるウェブサイト高速化対応
・.htaccessで設定しているがkeep-aliveの設定がきいてないっぽい。なぜかよく分からない。リクエストヘッダーは問題なし、レスポンスヘッダーがclose。ここが問題か?でもサーバーはhttp/1.1なのでデフォルトで有効になっている筈。わからん。
fc2ホムペオフィシャルでは有効になってる。無料サイトはダメなのかも。
HTTP Headers

※ファビコン、バナー画像
ファビコン:icooon-mono
バナー:シルエットデザイン

※CSS
・box-sizing、border-radius(gototop)、transform: translateY(トップ画面の水色●)ベンダープレフィックス削除、@-ms-viewport削除。今の所特に問題認められず。
object-fit周りはトラブルが起きそうなのでそのまま。本文のfont-family変更
・CSS圧縮実施(CSS compressor

※レイアウトシフトが3桁単位で良好と要改善を行き来(CLS に関する問題: 0.1 超(モバイル))
01-ohsyuはほぼOK、01-modern他が主に×。
ヘッダー内やトップ・フッター・サイドの呼び出しは統一しているので差異はない筈。
広告が原因?何が悪いのかよく分からない。というか広告が原因だと触れないよなあ…
画面上部はメニュー用にサイズ取ってあるし、違うのではという気もする。
画像サイズ入れるべきかとも思うけれど今からだとちょっとムリゲーに近い。既存のファイルどれだけあると思うwww
というか平安の方にもサイズなんて入れていない。

→CSSで何とかならんかと思ったけど、ならんっぽい。笑
【2020年夏】imgタグにはwidthとheight属性を書くのがいいらしい
画像による Layout Shift が無くなる Web がやって来るこの章あたり
Googleの新しいUX指標、CLSエラーを解消するimgタグの書き方
HTMLで絶対値を指定、CSSで相対値を指定が鉄板みたい。あああ…
→下URLが分かりやすい。
再確認:画像imgタグにサイズ指定をする事はSEO上重要です

・Bracketsでは画像サイズを自動挿入できる拡張機能がないみたい。
算出はImage dimension extractorで可能(導入)

※スマホでサイトを表示した際のグローバルメニューの表示が遅い。バナー表示までが中々長い。Time to Interactiveの数値が悪い原因はここだと思う。
Keep-Aliveの設定で何となるのではと思ったけれど、それは難しいので他の方法を探す必要がある。
jQueryの場所を変えた方が良いのか、何か解決方法あるのか分からん。

→jQueryのload関数は処理が遅いらしい。これが原因?
ページ内の全リソース(画像やCSSなど)が読み込まれた時点で実行されるとの事。

→load記述3系に。今迄無事に動いてたのが不思議ぞ。笑(①ここ②ここ参照)。10/1
→3系に代えて計測したらパフォーマンスの数値良くなっている。
ちょっとまってもしかしてこれが原因だったのでは(笑)
ページによりばらつきはあれどスマホでの体感も若干早くなっている感じはする。
負荷の高い東京駅と熊本城ページでモバイル99、97が出ているので一旦ここで終了で問題ないと思う。
ただ無料レンタル、アナリティクス、アク解析入れた状態だともうこの辺りが頭打ちという気がする。

JQueryのload関数は遅いので他の案を探しています。
参考① 参考② 参考③ 残念だけど、jQueryでは使えないっぽい

※10/13追記
・アナリティクス外す
・画像サイズ記入完了
共通パーツの呼び出しが遅いのは、恐らくとある会社の広告の処理が遅い為。document.write()で広告を吐き出しているからだと思われる。こちらではどうしようもないなあ

ブログ

・表示速度はアナリティクスがボトルネックになっている感じ。これ以上は恐らくどうしようもないと思う。
 →9/25アナリティクス外す

・コメント入力欄でラベルの関連付けがないとエラーが出る
 →Form elements do not have associated labels

・サムネイルでalt=””のエラー
 →ランキングバナーやアフィリエイトバナーを好きな位置に表示するには
!ブログ設定「関連記事リスト 表示場所」→「テンプレート変数のみ」に指定!
上URLのHTMLコピペの上、リンクやサムネイル部分は触っているので注意

・fc2拍手のjavascriptにalt属性を吐き出すよう記述追加
setAttribute()メソッドの JavaScriptでの使用例

関連記事
ヒジハラ
Posted by ヒジハラ
近代史と広瀬武夫が大好き
歴史サイトやってます
月に叢雲花に風

Comment 6

There are no comments yet.

-

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2020/10/01 (Thu) 10:44
ヒジハラ

ヒジハラ

>鍵コメでお邪魔致しますさん

きゃあああすいません!そしてありがとうございます、出張授業だ…(笑
そうなんです、You may also like下のサムネイルです。
教えて頂いた通りalt属性を入れてみたのですが、ちょっとうまくいかず…

----------------------
<a href="<%topentry_link>" class="list-a">
<%topentry_image_72>
<div class="search-noimage">No image</div>
</a>
----------------------

元はこういった形でaタグに<%topentry_image_72>が挟まれていただけでしたので(コメントアウト部分抜きました)、
<img src="<%topentry_image_72>" alt="">
<img src="<%topentry_relate_thumbnail>" alt="">
と、置き換えてもみたのですが、微動だにしません(笑)
探せば他に方法があるのかなとググっていますが、うーん…

しかしサムネイルへのalt属性追加、随分昔から上がっているリクエストなんですね。
fc2ブログは自由度が高くて面白い反面、もう少し何とかして~と思う所も結構ありますね^^;

2020/10/01 (Thu) 21:18

-

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2020/10/02 (Fri) 07:21
ヒジハラ

ヒジハラ

>鍵コメでお邪魔致しますさん

引き続きありがとうございます。
またわざわざ再現していただき、お手を煩わせてしまってすいません(汗)
現在教えて頂いた通りのタグを張り付けている状態なのですが、サムネイル部分は以下の通りです。
https://blog-imgs-135.fc2.com/m/u/r/murakumo1868/20201002.png

alt="<%topentry_title">/<img src="<%topentry_image_72>" alt="">を入れても、また今朝教えて頂いた通りコピペをしても、手を加える前とソースに変化がなく同じ状態です。
サムネイル周りが変わるような所は触っていない筈、大文字のスペース等も無い筈なんだけどなあ…と首を傾げながら…

別ブログでalias-Janeを新規DLして同様の作業をしてみましたが、こちらも同じ状態でした(こちらはソース部分は全く触っていません)。本当に何故だろう…^^;
このテンプレ内ですと<%topentry_image_72>は1か所で、入れる場所を間違えているという事もなさそうですし…
https://blog-imgs-135.fc2.com/m/u/r/murakumo1868/20201002-2.png

何だかもやもやしますが…(笑)
とりあえずは教えて頂いた通り、コピペして張り付けた状態で様子を見てみようと思います。

2020/10/02 (Fri) 21:44

-

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2020/10/03 (Sat) 09:57
ヒジハラ

ヒジハラ

>鍵コメでお邪魔致しますさん

関連記事リストの表示場所!完全に抜け落ちていました!
張り付けて頂いたソースとこのブログのソースがあまりに違っていたので、何か根本的に間違っているのではと感じたのですが、そこだったのですね…!
Akiraさんブログも読み漁ってどうにかこうにかカスタマイズしました。流石に疲れました。笑
まだいくらか自分で修正できる余地があると思いますが、Lighthouseで全項目青信号というのは初めて見たので、これは流石に嬉しいです。笑
根気よく丁寧にご教示頂きまして本当にありがとうございました。
自分だけでは中々ここ迄できなかったと思います。重ねてお礼申し上げます!

2020/10/03 (Sat) 17:56