Mutter
編集

【Blogger高速化】未使用のJavascriptとCSSを削除と使えなくなる機能の対処

2024/09/09
アイキャッチ画像

Bloggerのインデックスされない問題対処方法

↑でコメントを頂きました

そこで参照したサイトとして教えてくれた

SEONeurons

見に行くとBloggerのSEOに関して色々書いてました

インドのサイトで英語なんですが翻訳機能って本当に便利、、、

そこで未使用のJavascriptとCSSを削除ってのがあったのでやってみました

JavascriptとCSSを削除

これCSSはF-Lightでも削除してました

Javascriptはそのままでしたが、これはJavascriptを削除するとレイアウト機能が動かなくなるので皆さんが使う事を考えてだと思います

F-Light-HTML

CSSはfalseでJSはtrueになってます

Javascriptを削除するにはCSSと一緒でtrueをfalseにするだけです

たったこれだけで高速化になるようです

ただ制限される機能もあります

注意
  • レイアウト機能が使えなくなる
  • ガジェットで連絡フォームを使用している場合は使えなくなる
両方共対処方法がありますが
ここだけは注意というか解ったうえでやってください
※現時点では他の不具合等は発見できておりません


レイアウト機能が使えなくなった場合の対処方法

ブログのデザインが固まれば早々触る事もないでしょうが、、、

レイアウト機能を使いたい場合はfalsetrueに書き換えれば動くようになります

たったこれだけなので問題にもならないとは思います


しかし!!


テーマのHTMLを編集でHTMLをイジルとナビメニューのページリストが一部消えてしまいます

これは前に使っていたZEROでもF-Lightでも同じです
※Bloggerのテーマ

他のテーマでも同じじゃない?

これが大問題でレアウト機能が使えないとページリストが編集できないんですよ

ページリスト
これです

このままだと表示させたいページリストが一部消えたままになります

この部分だけなんとか、、、

って事でHTMLを編集してレイアウト機能は関係ないようにしました


いつものようにふじやんさんのをパク、、、参考にさせて頂きました
m(__)m
HTML編集前にバックアップを忘れないでくださいね!!

以下、F-Lightでの編集の紹介になります
  <!-- ページリスト -->
<aside id='nav-content'>
<b:section id='NAVIGATION' maxwidgets='1' showaddelement='no'>
  <b:widget id='PageList1' locked='true' title='ナビメニュー' type='PageList' version='2' visible='true'>
    <b:widget-settings>
      <b:widget-setting name='pageListJson'><![CDATA[{"0":{"href":"https://kochimountaingo.blogspot.com/","position":0,"title":"ホーム"},"243435338413458248":{"href":"https://kochimountaingo.blogspot.com/p/privacy-policy.html","position":2,"title":"プライバシーポリシー"},"1755436990922179573":{"href":"https://kochimountaingo.blogspot.com/p/sitemap.html","position":1,"title":"サイトマップ"},"2531281366935068234":{"href":"https://kochimountaingo.blogspot.com/p/contact_31.html","position":3,"title":"お問い合わせ"}}]]></b:widget-setting>
      <b:widget-setting name='homeTitle'>ホーム</b:widget-setting>
    </b:widget-settings>
    <b:includable id='main'>
  <b:include name='content'/>
</b:includable>
    <b:includable id='content'>
    <b:include name='pageList'/>
</b:includable>
    <b:includable id='overflowButton'/>
    <b:includable id='overflowablePageList'/>
    <b:includable id='pageLink'>
  <li><a expr:href='data:link.href'><data:link.title/></a></li>
</b:includable>
    <b:includable id='pageList'>
  <ul>
    <b:loop values='data:links' var='link'>
      <b:include name='pageLink'/>
    </b:loop>
  </ul>
</b:includable>
  </b:widget>
</b:section>
</aside>
</div>
</nav>

変更前はこんな感じになってます
これを書き換えます


  <!-- ページリスト -->
<aside id='nav-content'>
<div class='section' id='NAVIGATION'><div class='widget PageList' data-version='2' id='PageList1'>
<ul>
<li><a href='/'>ホーム</a></li>
<li><a href='URL'>ページタイトル</a></li>
<li><a href='URL'>ページタイトル</a></li>
<li><a href='URL'>ページタイトル</a></li>
</ul>
</div></div>
</aside>
</div>
</nav>

こんな感じ
ホームはURL入れなくてもコレでOKでした
素人には仕組みが解りません
他のテーマの事も解らないので基本はURLとタイトル入れてください


これでJavascriptをfalseにしてレイアウト機能が使えなくなっても問題なしです

た~だ~

これをやるとJavascriptをtrueにしてもレイアウト機能でガジェット追加できなくなります
※NAVIGATION以外は普通に編集できます

レイアウト編集画面通常
通常はこういう画面でNAVIGATIONが有り編集できます

しかしHTML書き換えると、、、

レイアウト編集画面変更後
Javascriptをtrueにしてもガジェット追加も編集も出来なくなります
今後はページリストを変更する場合はHTMLの編集でしか出来なくなります

以上をご理解の上でやってください

HTML編集の度にページが消えてしまうページリスト
これの編集をする手間が省けるのは結構デカいメリットです
ニュースティッカーガジェット~Blogger・F-lightカスタマイズ | Trekking from Kochi

ニュースティッカーガジェット~Blogger・F-lightカスタマイズ | Trekking from Kochi

ニュースティッカーを呟き専用にしてみました

こんな事もしているから、、、
HTMLの編集は毎日に近いくらいやってたりします


連絡フォームを使用している方はGoogleフォームに変更

連絡フォームを使っている方は、、、

Googleフォームでお問い合わせを作ってください

Googleフォームをカスタマイズ | ふじろじっく

Googleフォームをカスタマイズ | ふじろじっく

Googleフォームのデザインをカスタマイズしてみた


更に高速化

F-Lightは、ふじやんさんが高速化の処理をしているので更に高速化をしなくても良いような気もしますが、、、やってみました

参考にしたサイトは

Bloggerの表示速度を高速化する

Bloggerの表示速度を高速化する

忘却録です。Bloggerの高速化です。 結果 次の結果になりました。画像が古いため、現在は更に高速化しているはずです。 PageSpeed Insights GTmetrix Lighthouse (Audits) ウェブページ共通の高速化 長くなったため、記事を分割しました。...

この中から出来そうなのをやってみました

Blogger高速化
  • 標準のJS/CSSを削除する ~ 上で紹介している内容から更に削除
  • 記事ページとそれ以外の分離 ~ F-Lightはすでにタグがありました
  • 記事一覧の本文を省略表示 ~ これやると記事の内容全部表示されなくなった
  • 自作のシェアボタンを設置する ~ これはすでに作っている
  • スクリプトの読込みを遅延する ~ GoogleAdSenseの遅延読込み

JS/CSS削除は全てやってみましたが、、、
</head>&lt;/head&gt;&lt;!--</head>--&gt; に変更すると

編集ボタン
編集ボタンが消えたのでやめました
あっ!!と思った時にすぐ編集できるから便利なのよ。。。

</body>の変更はやりましたが
コメントも出来るし、レイアウトが崩れる事もなかったです

記事一覧の本文を省略表示をやると記事本文全て消えてしまいました
これはテーマの違いとか処理の違いじゃないかな、、、
すでにやっているのかどうかも素人には解りません

自作シェアボタンはすでに作っていたのでなにもせず
自作してないかたはやりましょう
ウチはいいねボタンも作ってます

GoogleAdSenseの遅延読込みはすでにやってましたが、こちらのコードに変更しました
以前より早く表示されるようになりました
前は全く表示されなかったり異常に遅かったりもした、、、
Google先生に聞いてChatGPTに聞いて作ったコードが駄目だった気がする。。。


F-Lightは以外のテーマではどうなるかわかりません

必ずバックアップをとってからやりましょう!!


その他カスタマイズ

ZEROからF-lightへBloggerテーマ変更 | Trekking from Kochi

ZEROからF-lightへBloggerテーマ変更 | Trekking from Kochi

BloggerのテーマをZEROからF-liteへ変更、カスタマイズの記事もここにまとめてます

こちらにまとめてリンク貼ってます