お問い合わせ

SEO-STRATEGY

seo for wordpress

初回30分無料相談窓口

お問い合わせ

CSS最適化

CSSは、後から書いたほうが優先され、より強いセレクターの書き方をすれば、上書きができる。

例えば、important を記述すれば、それが優先されるし、インラインで記述すれば、それが優先される。

タグに直接書く事や、javascriptで変更してしまう。

などの事も含めれば、乱立してしまう事も考えておかなければならない。

カスタムに次ぐカスタムをしていると 最下部にどんどんcssを記述していくようになって、どこに何が記述されているのかも整理しづらい。

まずは、サイトの構成とファイルの計画をしっかりと整理する事が重要である。

メンテナンスを容易にするし なによりも無駄なセレクターの記述が、必要なくなる。

大別すると

1、デフォルトで どのページでも使用しているCSS

2、個別のページでしか使用しないCSS

になるだろう。

2、は個別にインラインで出力させるようにhead~/head内に直接記述する事になるが、CMSなどを活用していれば、インクルードファイルでまとめるなどもよいかも知れない。

wordpressであれば、カスタムフィールドなどを使用して、出力する場所を指定する事と各々のページ編集画面でこれを設定するというような方法が考えられる。

1は、もう少し細分化する必要があって、デフォルトのHタグのfont-sizeや メインのカラー、バックグラウンドのカラーなどの他にヘッダーやフッター、サイドバーなどのcssファイルが個別にあってもいい。

また、ワードプレスの場合、header、footer、sidebar、のほかに front-page、page、single、archiveというように使用するcssをページ毎のテンプレートファイルによる条件分岐で読み込めばいいという事になる。

この場合は、推奨されたアクションフックでの出力ができないという事がデメリットになるだろうか?

実は、これらをすべて解決する方法がある。

前述したように 無駄なCSSを読み込むことは、レンダリングスピードにいくばくかの影響があるのだから、これらの無駄をなくしていく為に最適化する事は、これからのサイト運営にとって、有用な事と言っていい。

SASSのパーシャル(ファイル分割)

sAssのパーシャルファイルを使用すれば、style.scssの中に各ファイルを読み込み、管理もしやすい。

「@use ‘header’;」

などの記述で パーシャルファイル「_header.scss」を読み込み、 style.scssをコンパイルする事で すべての要素が順番に出力された
style.cssファイルが完成する。

こうすれば、管理もしやすいし、ワードプレスでは、アクションフックでの出力になるから、すべてが解決する

下図のように 
sassパーシャルの仕組み

Copyright © 2022 seo-storategy Inc. All Rights Reserved.

single