スポンサーリンク

WordPress,css外部ファイル化方法Stinger

更新日:

本日の人気記事BEST10

所要時間目安: 約 2

記事上に人気記事表示

Stinger6 WordPress カスタマイズ

昨今…。
といっても、
ここ数年ページ表示速度SEO対策のひとつにもなります。

また、
検索してくれた方がそのサイトが表示されるのになかなか表示されないと離脱率どころではなく、
サイトにすら訪れてくれない場合があり得ます。

そんな中で、

cssファイルの外部化やJavaScriptの外部化は知られていると思います。

今回はWordPressを始めてまだ大した記事数もないので、
アクセスなどはほぼない状況ですが備忘録とともに今後の為に…。

と思います。

(参考サイト)

Bloggerブログ CSS外部化する方法。ページ表示速度を高速化 | せきらら白書~備忘録~ JavaScriptの読み込みを最適化してページの表示速度を高速化する6つの方法 | 海外SEO情報ブログ



スポンサーリンク

テーマによってheader内のcssやJavaScriptの数などは違いがあると思います。

また、製作者様がfooter部分に初めから記載されていたりasync、非同期化されていたりするものもあります。

そういうテーマは非常にありがたいですね!!

Stinger6もいくつか既に非同期化されているJavaScriptがありました。

まだWordPressはじめて間もないのでphp言語?とにらめっこしながらcssファイルを外部化してみました。

具体的方法

まずは、
自分のブログ・サイトが表示されてソースの表示をしてみます。

するとheader内にいくつか

<link rel="stylesheet" href=

という部分があります。

こんな感じのところです。

header内のcss読み込み部分

 

この部分をまとまられるものは1つにまとめて外部ファイルに1つのcssファイルを作ります。

無料サービスでいうと、

  • GoogleDrive
  • Googleサイト
  • Github

などがあると思います。

上記中でも速度が早いのはGithubかと思われます。

今回は親テーマのstyle.css内すべてと小テーマの自分でカスタマイズに使ったcss内容を一括して外部ファイル化します。

また、
ただ外部ファイル化するだけではファイル容量に違いがないのでcssファイルを圧縮します。

以下のようなwebツールがあります。

Refresh-SF - Online JavaScript and CSS Compressor
こちらに、
親テーマのcss内すべてと小テーマの自分でカスタマイズに使用したcssの順でコピペして圧縮してもらいます。

すると不要な部分(コメントアウトなど)が削除されて結構な削減率になります。

その圧縮された内容のcssをコピーして外部ファイル化したいサーバー内に任意の.cssファイルを作ります。

とりあえず、

これで下準備は完成です。

あとは、
テーマのどの部分がスタイルシート(.css)を読み込ませにいっているかを確認します。
(概ねheader.php内に記述されていると思います。)

その部分に、
外部ファイル化したURLを記載します。

あとは、
表示の確認をしてみて今まで通り表示されていれば完成です。

それと、
Googleのデベロッパーサービスですが、
pagespeed/insights
で、
レンダリングブロックされているものの数が減っているかどうかを確認してみてください。

今回の方法で複数のcssファイルを1つにしたのであれば、
例えば3つのcssファイルがあったものを外部ファイルに1つにしたとしたらレンダリングブロックされている数は2つ減っているはずです。

あとは、
javascriptも複数ある場合は1つにまとめて外部ファイル化した方がレンダリングブロックする数は減らせます。

さらに、
javascriptの場合は非同期にすればその外部ファイルに1つにしたものはレンダリングブロックされることはなくなります。

次回は、

スポンサーリンク

javascriptの外部ファイル化+非同期にできるものがあればその方法も記載したいと思っています。

 

ただ、
いつになることやら…。(汗)

最後に注意として、
テーマの更新などがあった際や今後cssを追加してカスタマイズしていく上ではちょっとめんどい面もあります。

なので、
外部ファイル化はカスタマイズがほぼ終わってしばらくはカスタマイズしないなぁ。
という時にした方がいいと思われます。

-Stinger6, WordPress, カスタマイズ
-, , , ,

おすすめ記事一部広告

スポンサーリンク


  • この記事を書いた人
  • 最新記事

izu

プロフィールページ詳細

はじめまして、izuと申します。医療ミスにより長胸神経麻痺になってしまい若干の障害がありブログをさせていただいています。旦那との共同運営になりつつありますがよろしくお願いいたします。

Follow Me !

よろしかったらシェアよろしくお願いします。

+ クリックで展開します

おすすめ!!

加圧シェイプで24時間無意識運動状態が可能!! 引き締め効果で魅力的なシルエットをサポート!! 運動している時だけでなく、仕事やプライベート就寝中にも!! 通気性がよく、体の動かしやすい伸縮性のある素材です!! 常に体が引き締まって、着心地いい!! 毎日着たい方用にセットも充実!!

女性必見のバストアップにおすすめ!!

マンガでの商品説明を販売ページに採用しています。 商品のメリットや良さが伝わりやすいです。 ★知名度と信頼度!ニュースアプリや芸能人ブログでも話題! (インスタグラム SmartNews yahoo アメーバ crooz 楽天) ●知名度が高く購入率の高い商品です。 ●ニュースサイトの紹介でも話題となり、有名タレント、モデル等にも使用して頂きブログなどでも紹介されている信頼度の高い商品です。 ●まとめ買いが多いのが特徴です。



この記事が良かったら
いいね!お願いします(#^.^#)

WordPressデビュー津々浦々の
最新情報をお届けします

言えないことはTwitterで!!




Copyright© WordPressデビュー津々浦々 , 2017 AllRights Reserved Powered by AFFINGER4.