Googleスプレッドシートからコピペした表コードを軽量化してみた

こんばんは。
tanayasu99(たなやす)です。

4列×41行の表をGoogleスプレッドシートからコピペした表を含めている記事があるのですが、Microsoftが提供するBing検索サイトでヒットしなくなったことに偶然気が付いてしまい、どうしたことかと。

インデックス登録(Bing検索でヒットするようにするもの)や検索順位には関係ないと思いますが、以前から気になっていた膨大な表コードを改善してみたいと思います。

前にも似たようなことやったなぁ

以前も「Htmlのサイズが長すぎます」ということで、改善を目論んだことがあります。
参考：2020/08/07 先日投稿した記事の表示速度スコアが最低だったので改善してみた

この時は...画像編集ソフトからのコピペが出来て超便利！！とか思ってたモノが、実は画像に関するHTMLコード(画像URL)がめちゃくちゃ長くなってしまい、記事一覧表示に支障をきたしていたので改善させてみた～...という内容でした。

表示速度のモバイルスコア(PageSpeed Insights)が7点だった重量級な記事が、48点まで増やせたのでした(うちではこれが平均的)。

今回、修繕する記事は、当時も懸念していた記事「2020/07/25 国指定天然記念物となっている桜の樹齢をざっくり一覧化してみた。」です。

41行もある表としてピックアップしていましたが、列数と行数で見ないとダメですね。まぁ、「41行」だけでも見過ごせないかもしれませんが。
4列×41行なので、164セルもあります。各セルに無駄なコードが叩き込まれていると思うと、吐き気がします。

修繕に向けて

がむらしゃらに修繕するのも微妙だなぁっと。無駄なコード...っていうのは、今までもチラ見してきて、当たりは付けていますが...Bing Webmasterの判定を基準にしつつ、PageSpeed Insightsの結果は参考程度に見ておこうと思います。

(修繕前)Bing Webmasterの判定

前回も確認していますが、「Htmlのサイズが長すぎます」と出てます。あの表コードが長いんだろうなぁと...。今回は、この通知が出なくなればOKとしよう...というのも...。


Bing Webmasterにて、SEOレポートから「HTML の評価サイズが 125 KB を超えるものと予想されるため、完全にキャッシュされない可能性があります。」という文言を見つけました。軽量化の目標にしたい共います。
(この部分がインデックス登録や検索順位で不利な状況になっているのではと、妄想してしまいます。)


今後も、表作成はしていくだろうし、ちょっと面倒でも、やっておくか。

該当記事は153KBあり、確かに125KBを超過している。125KB未満または、安全率を適当に見繕って100KB未満を目指したいと思います。

(修繕前)PageSpeed Insightsの結果

今回の軽量化とは関係ありませんし、この程度の軽量化では速くならないと思いますが、参考程度に計測しておこうかと。はい、モバイル46、パソコン93でした。前述のとおり、うちではこれぐらい平均的です。

修繕(軽量化)作業開始

なんとなく関数を駆使して、無駄なコードを排除してやろうかと。Googleスプレッドシートでも、Excelでも出来そうなところ、これまたなんとなくGoogleスプレッドシートで関数を組んでみました。

セルの幅を決める<col>は閉じなくても良いみたいなので、</col>は削除します。
各セル(tdタグ)にあったdata-sheets-valueも恩恵を感じないので削除します。

結果、153KBが140KBになりました。

減量不足！？失敗！！
各セル(164セル)に「data-sheets-value="{"1":2,"2":"盛岡石割ザクラ"}"」みたいな感じで入っているので、相当削れたと思ったのですが。。。

引き続き、無駄なコードや、各セル(tdタグ)で指定せず、tableタグで一括指定出来るモノを探しては改善してみた。

tableタグ内に居たcellpaddingとcellspacing..."0"指定なら不要なので、削除します(tableタグは1つしかないので、効果はあんまり無いですが)。

やっぱり、セルの数だけあるtdタグ内を掃除しなくては...。再度よく見直してみたら、次の属性を削除することにしました。
border-color、border-style、border-width、color、font-family、font-size、font-weight、overflow-wrap、overflow、white-space

これらの項目名(属性)に、値(設定値)がくっつくので相当なサイズになるのです。さきほどの「data-sheets-value」の文字列よりも多い。特に、線の色を司る「border-color」の値は、「rgb(204, 204, 204) rgb(0, 0, 0) rgb(0, 0, 0)」と4辺(上,左右,下)にある線の色を個別に指定しており、同じ色なら無駄であろう。red:204, green:204, blue:204という値(灰色相当)も意図したものではないし、黒(無指定)で良い。


これらが、各セルに...今回は164個...。セル個別に特別な配色や文字を使っている訳では無いので、代表的なtableタグ内で指定すれば良かったりします。
(こんな風にGoogle先生から教えてもらうことも出来るんですねー。)

...。
結果、99KBになりました。

目標にしていた100KB未満を達成した！！変なカウントされても125KBにはならなければと良いなぁ。

修繕(軽量化) まとめ

さて、目標の100KB未満は達成できたので、Bing Webmasterに再判定してもらいます。かなり減量したので、やる前から目に見えていますが。

あんまり期待していませんが、PageSpeed Insightsも再判定(再分析)してみました。

(修繕後)Bing Webmasterの判定

「Htmlのサイズが長すぎます」が消えました。

「画像がない場合のAlt属性」(画像説明や画像表示出来なかった場合の説明のこと)が無いよ～とも問題視されていたので、こちらも改善させました。

この時点で、今回の目標は達成。インデックス登録はされているようなので、単に記事の質が悪く、内容的にも需要が無いのでしょう(笑)。

(修繕後)PageSpeed Insightsの結果

モバイル46→51...少しだけ良くなりました(笑)。誤差の範囲かなぁっと思いましたが、後日再分析しても、モバイル53だったので、こんなもんなのかなぁと...。


約50KB削減したら、モバイルのスコア5点...あがったということか。遅いよりは速い方が、素直に嬉しいものです。

ちなみに、パソコンのスコアは93→94という変わり映えのない結果でした。

後記

インデックス登録に不利かというと、登録自体はされていたので、正確には「検索順位」に影響するかもしれないってことですかね。

今まで検索3ページ目ぐらいに居たのに、数日経ったら10ページぐらい追っても居ないとか。HTMLのサイズは変えていないのだから、登録してから数日後に再判定して「こいつ長くね？はい検索結果から除外(笑)」みたいな感じで処理されているのか。...ぬか喜びさせんなよ。

...GoogleスプレッドシートからBloggerへコピペ後に、排除しても良いコードがだいたい分かったし、関数処理で半自動化も出来たので、やってみて良かったです。むしろ目的としては、こっちの方がメインだったりする。

おわり。
↓これをクリックすると、私のやる気が出ます。ブログ村が開かれるようになっていますが閉じて良いみたいです。よろしくお願いします。