読者です 読者をやめる 読者になる 読者になる

炊きたてのご飯が食べたい

定時に帰れるっていいね。自宅勤務できるっていいね。子どもと炊きたてのご飯が食べられる。アクトインディでは積極的にエンジニアを募集中です。

WordPress(Page Speed対応) – CSS をドキュメント ヘッドに含める

パフォーマンスチューニング

難易度

★すごく簡単

概要

CSS(外部CSS、インラインスタイル両方とも)はheadの中で読み込んでね。ということです。CSSが一番最初に読み込まれることで、ブラウザのプログレッシブレンダリング(Javascritpの処理の実行より、デザインなど、視覚的な部分をなるべく早く読み込ませ、表示を優先することで体感速度を速くすること)が可能になります。

[html]</head> <body> <link rel="stylesheet" type="text/css" href="css/home.css" /> <style> .menu{ font-size:1em; width:100%; }

.sub{ font-size:0.8em; width:80%; } </style>[/html]

[html]<link rel="stylesheet" type="text/css" href="css/home.css" /> <style> .menu{ font-size:1em; width:100%; }

.sub{ font-size:0.8em; width:80%; } </style> </head> <body>[/html]

注意点

複数CSSを読み込んでいる場合は、記述の順序に要注意。idやclass名が重複している場合は、一番最後に読み込んだCSSが優先される為、CSSを読み込む順番を変更すると、思わぬレイアウト崩れが起きる可能性があります。変更後はレイアウト確認をしましょう。

確認方法

各種ブラウザで確認

参考サイト

CSS をドキュメントヘッドに含める