[810] 読み込み時間との格闘その1／共有ボタン

～スマホが変えたHTML文【ピクニックを始めたコンテンツたち】～

これからしばらくは、「ページの読み込み時間」について書いていきます。
いままでの流れを整理すると・・・
ホームページの閲覧はスマホ比率が高く、デザインを根本から見直す必要があった。
ところが、メディアクエリなら、PC用とスマホ用のCSSを併用できる。
その結果、ページの読み込み時間が遅くなってしまった。
じゃあ、どうすんの・・・という話です。

改善点は、グ嬢が提供している「PageSpeed Insights」というサービスでわかります。
それによると、特定のコードが邪魔をしているというんですね。
いくつかあるうちの一つは、共有ボタンに関するものでした。
当時、「忍者おまとめボタン」を使っていたのですが、この表示に時間を取られるらしい。
いろいろと調べてみたら、自己完結型のボタンと、他人の土俵を借りて演算処理するタイプがあるようなのです。
そして忍者は、後者のボタンでした・・・たぶん。
いわば、共有ボタンを表示する際、いちいち忍者屋敷に行って、手続きして帰ってくる。
それが、待っていられないんだと。


自己完結ボタンを設定することもできるが、かなりめんどい

試しに「忍者おまとめボタン」を取っ払い、FC2のツールを使ったところ、結果は同じでした。
今度は、FC屋敷ってわけです。
ただ、読み込み速度の負担がかなり減ったので、FC2をイキにしています。
ちなみに、この時点で、モバイルPCともに「Needs Work」のお墨付きを得られました。
「役に立ってるよ」って、相変わらず上からですけどね。

余談として、「async属性」というウラ技も試してみました。
これは、特殊な暗号を付けておくと、その部分の読み込みを後回しにしてくれるというものです。
ボタンの処理をパスすることで、主要なテキストや画像が優先される・・・まあ、ページ全体の読み込み速度は変わらないわけです。

それにしても、「読み込みが遅い」って、スマホがチャチ造りってことじゃないですか。
レベルの下合わせというか、そこまでしてスマホに合わせる必要があるんでしょうか。
なので、「async属性」を使いこなそうという努力は、途中であきらめました。