Googleフォトがあああああああああああああああ
復活したああああ
以下、下書き保存をしていた本文。
最近ひっそりとGoogleのアップデートでもあったんですかね？なんか前より検索数がウネウネしているのですが気のせいかな？
さて、検索といえば、検索から入ってくる人はそのサイトの表示が遅いとすぐ出ていくとかなんとか言いますよね。まあその気持ちはすごく分かるのですが、どうも色々置いてしまう。そうでしょ？
僕のブログでも先日ちょっとした画像を連打しておいたら10秒くらい読み込みが終わらなくて、はてなスターがなかなか出てこない状態になっています。ま、そのままにしてますけど。
何度か記事で話したことがあるのですが、ブログの表示が遅い問題を解決しようとする手段に誤りがある方々がいます。
日本語がおかしいのはいつもの事です。
display:none
ヤツことdisplay:noneは対象物を非表示にしてくれる。大変ありがたい効果ではあるのですが、ヤツは非表示にしてくれるだけであって、存在を亡き者にするわけではない。
僕も最初はこのdisplay:noneに関しては表示したくないものを読み込ませない、存在そのものを消してくれているとばかり思っていました。ただ、ちょっと調べたらなんとなく分かったのですが、こやつは嫌いなものは目を背けると同様、僕たちに都合の良いようなマスクをするだけで存在を消してくれるわけではない。
らしい。
まあ、なんですか、いつも速度を計るサイトでも、はてなスターにdisplay:noneを当てているのにしっかりと皆さんのアイコンを読み込んでいます。
ぼくのはてなスターのアイコンはおよそ3kb。みなさんの中のはてなスターで大きいものは8kbくらいかな。
それよりも、もっともっと小さい容量。そんな小さな容量を持つ存在も、身を寄せ合うと色んな意味でひとつの大きなアイキャッチ以上の巨人になることが出来る。
ちょっと試しにブログのトップページに「a」を100万個置いてみた
置くと言ってもdisplay:noneで隠すのですが、テーマが読み込んでいるCSSも消してまっさらな状態にしました。
aを100万個設置。そのサイズ1メガ
サイドバーのHTMLにaを横に100個。更にそのa100個を1万行、10000桁、いちまんけた。そのサイズ約1メガだ（実際は1メガに届かないので少し足しましたが）
画像を見るとたいした数には見えないけれど、このaの集合体が普通の記事ではありえないくらい下に続いている。
そしてaの集合体をぐるっとクラスで囲んでdisplay:noneで非表示。目の前の在るものを無いものと見せかける。
a100万個を設置する前のPageSpeed Insightsでのモバイル数値。はてなブログでモバイル数値が48だったら上々ですよ。これ以上は求められない。
更に下はa100万個を設置した後のPageSpeed Insightsでのモバイル数値。20回くらい計測してフリ幅が大きくない数値が39あたりだった。
結構重い
実は最初のまっさらな画像。あれはaの表示が終わった画像で、その次のaが沢山ある画像は100万個のaを設置した後にブログを開いた最初の画像。
つまり、普段画像を使っていて表示にラグがあり、画像が表示されない→画像が表示されるの逆のパターンで、display:noneで囲んだaが大きすぎて表示されてしまう→なんとか頑張って非表示になるといったパターン。
まとめ
軽くする対応で置かない、設置しない、使わない。がベストなんだと思う。そして、しっかりと容量を圧縮することがベターだと思う。
着痩せしたって中身は変わらない。
良いこと言った。着痩せしたって中身は変わらない。
表示にラグがあるからdisplay:noneで非表示にしてしまえば軽くなる。そうじゃない。試しにブログのbody丸ごとdisplay:noneで非表示にしても軽くはならない。初期数値が50前後でベストなのだから。快適に利用してもらうにはしっかりとブログ構成を見直すことが重要なんだと理解していただきたい。
つまり、トップーページからしょーもないところでdisplay:noneなんかを使わせる運営が全部悪い。
