ページの読み込み不能に陥った時はJSファイルを調べましょう

機能していないJSはページの描画を阻害します

JS (ジャバスクリプト, JavaScript)がhtmlの どこに 書かれているかにもよりますが、JSというのは複数を一度に処理することができません。つまり並行処理ができない仕組みです。

• aaa.js --- 処理完了
• bbb.js --- エラー, 処理が終了しない
• ccc.js --- 先行のbbb.jsが終了しない限り処理できない

こういう感じです。またJS同士だけでなくhtmlのレンダリングも止まってしまいます。

• html前半 --- 描画済み
• htmlの中途に bbb.js --- エラー, 処理が完了しない
• html後半 --- bbb.jsが止まっているため描画できない

何らかのエラーで動かない・処理できないJSがhtmlの途中にあると、それ以降のhtmlの描画も止まってしまいます。JSが レンダリングブロック要因 と呼ばれるのはこういう性質を指します。

JSがhtmlの後半(body終了タグ直前)にまとめられている場合はまだマシというか、それ以前にあるhtmlはとりあえずレンダリングされます。でも処理は終わらないのでいつまでもローディング未完了の状態が続きます。別のページに移動できなかったり、スクロールできなかったり、という症状で気づけるかと思います。

JSはどこに書かれているか

テンプレート内JSの場合は製作者によってまちまちです。また、ユーザーによっては記事内にJSを記載している方もいらっしゃるかもしれません。テンプレートの場合、JSがhtmlの前半にあるとページの描画速度が落ちますのでたいていは </body> の直前が多いかと思いますが、後半に書けば良いってもんでもないので(JSの実行順序の問題もあります)一概には言えません。

他にJSが多く使われる可能性があるのが FC2プラグイン です。プラグインは多くの場合サイドメニュー部に表示されます。テンプレートのhtml内容とプラグインのそれは完全に分離していますので、プラグインにJSが用いられる場合にはプラグインhtml内にJSコードも記されているはずです。ということは、プラグイン用JSの記述位置を全体htmlで言うと「htmlの途中に存在する」ことになります。

要するに プラグインのJSにエラーがあるとページの描画が止まるよ ってことです。

JSエラーの原因

• プラグインに追加した 外部ウィジェット
• テンプレートのhead要素内に追加した 外部サービスアクセス解析
• (主に)共有プラグインに含まれる 古いjQueryファイル

たいていはこのどれかです。

外部ウィジェットやアクセス解析

外部ウィジェットというのは例えばRSSを表示するものであったり、アルバムのように写真を表示させるサービスであったり。またアクセス解析は読んで時の如くFC2が提供している以外のものですね。
第三サービスの場合 サーバーが停止している可能性 があります。つまりサービス自体が閉鎖されているのに気づいていないのかもしれません。アクセス解析などはページ上ではっきりと目視できるとは限りませんので(FC2の場合はアイコンが数秒表示されます)、気がつかない、実際に気がついていない方が結構いらっしゃいますよ。

jQueryファイル

FC2プラグインでもほとんどのものがjQuery依存なし、vanilla JS(ネイティブJS)で構成されていますが、中にはjQuery依存あり・jQueryファイル込み というのがあるんですね。これとっても困るパターンなんですけども、公式プラグイン「アルバム」 がそうなんですよ。プラグインでjQueryファイル添付とか頭どうかしてるだろ、って思っているのは内緒にしておきます。

現在のjQuery最新はバージョン3系です。アルバムプラグインのバージョンは1系で、リリースされたのは2007年とかそのあたり、実に12年もの歳月が経過しています。ところがこのバージョンは上げることができないんですね。何故ならjQueryの3系は 古いIEのサポートをしていない からです。

いまさらie8を気にすること自体どうなんだって話ではあるんですが、ともかくまぁそういう事情です。で、困るのは テンプレートの方にjQueryが含まれている場合が多い という事実です。バージョンが異なれば衝突しますし、バージョンが同一でも無駄な読み込みですから不利益でしかない。

ただ、アルバムの場合は別のdocumentという形で掲載されますのでよほど悪さすることはありません。ページの表示が遅くなるとしても。他のプラグインの場合は… そこまで考えられているものは無さそうな気が ^^;

テンプレートにjQueryが含まれている、というのはまぁ妥当かな、と思います。というのはテンプレート内にはいくつかのJSが含まれているでしょうから、それらをjQueryでまとめて書くというのは普通ですよね。ところがプラグインというのは単体ですから、ページ全体の中のごく一部分であり単なる補足情報でしかないアルバムのためだけに100KBもあるjQueryを入れている。これってすげぇ無駄だと思ふ (´・ω・｀)
ネイティブで書いてくれ、と(笑)

まとめ

ページ表示がめちゃくちゃおっせー！
という方の原因はまぁたいてい自分で追加したJSですわ。それは (´・ω・｀)
心当たりの有る方はテンプレート内にデフォルトで含まれているもの「以外」のJSファイル及び実行コードを一旦削除してみてください。あるいは怪しいと思われるプラグインを非表示化。
自分でチェックしないことにはいつまで悩んでも勝手に改善されることはありませんので頑張ってください (o'ω')ﾉ