
実現したいこと
document.writeを使わずに早くCSSを読み込みたい
前提
PCの時はPC用CSS、スマホの時はスマホ用CSSを2つずつ読み込むようにしています。
ただ昔からの記述で
1つ目の読み込みはdocument.write
2つ目の読み込みはdocument.head.insertAdjacentHTML
でしてますが、ページスピードインサイトでdocument.writeはダメと言われるので
1つ目もdocument.head.insertAdjacentHTMLで読み込むと
読み込みスピードが遅くてページ崩れが起きます。
document.writeの代替でinsertAdjacentHTMLよりも早くCSSを差し込むことができる記述はありますか?
該当のソースコード
(function ($) {
if ( !navigator.userAgent.match(/(iPhone|iPod|Android)/) || document.URL.match("ismodesmartphone=off") ) {
document.write('<link rel="stylesheet" href="PC用CSS1">');
document.head.insertAdjacentHTML('beforeend', '<link rel="stylesheet" href="PC用CSS2">');
} else if ( navigator.userAgent.match(/(iPhone|iPod|Android)/) || document.URL.match("ismodesmartphone=on") ) {
document.write('<link rel="stylesheet" href="スマホ用CSS1">');
document.head.insertAdjacentHTML('beforeend', '<link rel="stylesheet" href="スマホ用CSS2">');
setTimeout(function(){
$('body').addClass('sp');
$('body').removeClass('pc');
},1000);
}
})(jQuery);
0 コメント