昨日まで正常に表示されていたWebサイトが、突然CSSが適用されなくなり、何度かブラウザをリロードすると正常に表示される。
このような事象にお困りの方はいないでしょうか。
実はCPIスタッフブログも、先日なりました。
ある端末では正常に表示され、ある端末では正常に表示がされない....... 現象が再現したり、しなかったり........
しかも適用されないのは一部のCSSという、本当に謎現象が起こりました。
CSSが読み込めない解決策
キャッシュが壊れていないかや、Viewportの設定が悪いのかなど、色々試したのですが改善できませんでした。
色々考えているうちに、もしや！？と気がつきました。
それはCDN経由（クラウドから）で取得しているBootstrap CSSの取得が、不安定だったためでした。
CDN経由からの取得（改修前）
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
CSSファイルを自社のWebサーバーに設置し、コードをサーバーからの取得に変更し解決です。
<link rel="stylesheet" href="/css/bootstrap.min.css">
さいごに
CDN経由のCSS読み込みは、手軽なことや、読み込み速度も早いことなどから、多用されるようになりました。（私も使っていました）
しかし、今回のように読み込みが不安定になることも考えると、自社のWebサーバーにCSSや、JSファイルは設置しておいた方が良いかもしれませんね。
関連タグ: