FC2ブログでCSS非同期"preload"を設定したら壊れた!!

By




スポンサードリンク


こんにちは。FC2ブログ管理人のMです。今回は「ブログ運営」の話しで申し訳ないのですか…。専門用語をビシバシ使って書きますので、興味のない方はこの記事をスルーして下さいね(^_^;)


この方法なら出来るよ、と紹介してるサイトを発見し、信用してブログのカスタマイズした結果、バカを見て後悔した胸の内を吐露します(単なる愚痴)。



code-3385504_640.jpg


FC2ブログでCSSを非同期で読み込む"preload"設定に挑戦

Webのプログミングで自分がやりたいと思った「link rel="preload"」によるCSSを非同期で読み込む設定。


その実装方法について説明するサイトをいろいろ調べてみたところ、もの凄い数のブログが乱立してました。しかも内容はみんな同じだし(汗)


どれもこれもコピペ記事ばかりです。ワードプレスを使った設定で結局、できるのかできないのかが明確に結論付けされてないのです。


ただでさえボクのブログはFC2でカスタマイズの自由さにも限界を感じている時。このぶんだと、今回のカスタマイズ方法は無理かな?と思いました。


ところが、最後の最後でたまたま、設定方法をしっかりと紹介してるサイトを発見。そこで冒頭に書いたとおり信用してカスタマイズを施したのでした。



スポンサードリンク


"preload"& 「loadCSS」でChrome以外にも対応?

実は先日、Google様からレンダリングをブロックするCSSを改善して読み込み速度を上げるべしというお達しを受けまして、「link rel="preload"」を使って非同期の読み込みに挑戦してみたんです。


しかし、この機能はまだChromeしか対応してないとのこと。ボク的にはいつもChromeオンリーなんで差支えないのですが、そういう訳にもいかないので何とか良い方法がないものかと延々と調べていたんです。


すると、「loadCSS」をあわせ使いすることで全ブラウザに対応できると紹介するブログを発見したのです。


しかし、そのブログの構成を見てみると何故か使ってない。おかしいなぁ?と思いつつ、きっと必要性がないくらいのWeb知識で別の対応をしてるのだろうと勝手に納得してさっそく導入してみることにしました。


その前に、ファーストビューの読み込み速度を上げるためにCSSの「インライン化」を実装したのだけれど、これが簡単に見えてなかなか大変な作業でした(汗)


CSSを非同期に設定したらアクセス激減!!原因は??

少しずつ微調整しつつ何とかインライン化が済んだのでいよいよCSSを非同期に設定。こちらの作業は用意されたコードをコピペするだけなので簡単でした。


すべてが終わり、Google様の評価もUP。若干の不具合を直しつつ、良かった良かったと一件落着の気持ちでいたんです。


ところが、翌日あたりからブログのアクセスが一気に激減してビックリ!!


おかしいなぁ…。Webページの読み込みも早くなり、ブログが読みやすくなったはずなのに(汗)


FC2ブログだけ??紹介された設定方法が機能せず

数日間いろいろ悩んだけど原因がわからず。しかし、ふとした思いつきで普段は使ったことがないInternet Explorerでネットを開いてみたんです。


自分のブログ名を入力してサイトを見てみる。すると…


あれ!?画面がまったく動かない(゚o゚;;


パソコンが壊れてるのか??


いや、違う。他のサイトを見てみると問題なく閲覧できた。まさか、カスタマイズに問題があったのか!?


とりあえず、インライン化したCSSはそのままに、実装した「link rel="preload"」と「loadCSS」を元に戻してみた。すると、普通に閲覧できるように回復したんです。


ということは、カスタマイズしてからアクセス数が激減したのはChrome以外で閲覧不能になっていたからだったんですね…。


何十と同じコピペ記事が乱立したなかで、一つだけ設定方法が書いてある記事が存在すること自体がおかしい。


しかも、書いているサイト自体が自ら実装してないのだから。ここをしっかりと疑ってかからなきゃいけなかったんです。


お詫び

ブログ運営の管理人が自らブログを閲覧できない状態に設定してたなんて…。笑い話にもならない(~_~;)


結局、この方法によるカスタマイズは諦めました。代替策をいろいろ調べてみましたが、FC2ブログではこれ以上は限界のようです。何しろ、未だhtpps化もされてない(有料ブログの場合)のですから(汗)


ただし、これ以外の方法で何とかこれからもめげずに閲覧環境を改善し、読者の利便性は改善していく所存です。


なお、アクセス数の方はカスタマイズをやめた直後からすぐ元に戻りました。ブログの閲覧が出来ず困惑された皆さまにお詫びいたしますm(__)m

関連記事