非常に細かいところが変わってますね。エロジンも日々細かいところが変わっています。今日は一日中サイト軽量化作業に悪戦苦闘していました。例えばHTMLに<img>タグを差し込んだ状態ならブラウザキャッシュが有効になるんですが、CSSでbackgroundで読み込んだ背景画像がキャッシュされません。Erozineロゴやその右の美少女オッドアイなどが無意味に更新されてしまいます。ヘッダー部分にあるので0.01秒くらいの差ですが大きいです。
原因としてはキャッシュが有効になる条件は erozine.jp/~*.(jpg|png|gif)$ だけです。CSSから排出される場合、リファラがerozine.jp/style.cssとなるからだったんですね。そこで画像というファイルをBase64エンコード可(文字列可)という方法を考えたんですが、0.04秒くらい重くなってしまったので本末転倒でした。
それならCSS化をやめてHeaderに<img>タグでタイトルロゴを表示する方法も考えたんですが、エロジンポリシーに反していました。エロジンポリシーというのはGoogle HTML/CSS Styke Guideと同じです。 それは例えばcssを記述する際 ブロックの手前に1つスペースを置く、
ダメな例
body{
}
良い例
body {
}
複数を同一にする際はエレメントごとに改行する
ダメな例
.list, .list a {
}
良い例
.list,
.list a {
}
インデントには必ずスペース2つを置く
ダメな例
.articles {
line-height: 30px;
} 良い例
.articles {
line-height: 30px;
}
他にもコロンの次に必ず1つスペースを置くやbackgroundなどURIを指定する時はhttp:を省くことなど、尋常じゃないくらいの細かいことが書いてあります。

5年位前からこれを知って以来ずっとこの方法で書いています。潔癖症になってしまうのはたぶんそれら全般が好きだからだと思うんですね。自動車好きの走り屋がエンジンの回転数などに拘るように、人間は好きなものにはそれだけ小さな隙間を埋めていきたくなるのが本能です。 そういうわけで思いついたのがHTMLにインライン化でした。直書きすればCSSから読み込まないのでキャッシュが有効になりました。
最後までお読みいただき有難うございました
Thank you for watching until the end
似たような記事





新着
相互リンク

新着
相互リンク

新着
相互リンク




今回のあらすじ

