CSSが適用されない、読み込めない場合がある事象について

昨日まで正常に表示されていた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ファイルは設置しておいた方が良いかもしれませんね。

 

関連タグ: 

この記事をシェアする

Author
この記事を書いた人:阿部 正幸

モチヤ株式会社 阿部正幸

KDDIウェブコミュニケーションズに入社後、CPIブランドのACE01をプロダクトマネージャーとしてローンチし、エバンジェリストとしてイベント登壇を行う。
現在は、KDDIウェブコミュニケーションズを退職し、モチヤ株式会社で、Web制作、受託開発、コンサルティングを行なっている。