CSSのテクニックを使えばJavascriptなしで実現できて速度もUP
#11 CSSのテクニックを使えばJavascriptなしで実現できて速度もUP【主張】 - YouTube
今回はCSSの話をしたいと思います。普段はあまり重要でないと思われているcssですが、ベストプラクティスを知らないとネットワークリソースを浪費したり、無駄なコーディングをすることにつながるのでとても重要です。
javascriptよりcss
CSSでできるならできる限りCSSを使うべきです。
例えばバリデーションのCSSの擬似クラスを使用すればjavascriptでわざわざコーディングしなくてもいい事はあります。
まずはじめはcssで数値のみ且つ1文字以上５文字未満というバリデーションを作成します。
次にvuejsでバリデーションを作成します。
computedもしくはwatchを使えばリアルタイムでバリデーションできると思いますが、さらに時間がかかるためチェックボタンを用意してmethodsを使うことにしました。
ソースコードを見ても分かる通りjavascriptでバリデーションするとCSSに比べると複雑になっている事がわかります。
なのでJavascriptよりCSSの方が簡単に時間をかけずに作成することができます。
これらの理由で本来はJavascriptよりもCSSを使うべきなのですが、多くのエンジニアが故意にJavascriptを使いたがります。
その理由は先程も述べたようにJavasciptは応用が効いてより柔軟に作成できるので確実に作りたい機能を作成できます。
そのためCSSで実現できるかどうかを確認する前にJavascriptで作成してしまう理由があります。
それ以外にはJavascriptの方がCSSよりもはるかに需要が多いので経歴書に「CSSでバリデーションを実現」と記載するより、「Vuejsでバリデーションを実現」と記載したほうが経歴書の見栄えがよくなってしまいます。
そうなると、できる限り多くJavascriptで書きたくなってしまうエンジニアが多くなってしまいます、しかし、本質的にはCSSで実現出来たほうがいいので、CSSでできる限り使用することをおすすめします。
CSSスプライト
アイコンはCSSスプライトを使うとネットワークの通信のやり取りを10数回から1回にできるのでネットワークリソースの節約ができ、スピードも早くなります。CSSスプライトとは使用する複数のアイコンを一つの画像に合成して、その画像をCSSでバックグランドイメージと扱う事です。
画像を合成しないといけない事とposition,画像の幅、高さを調整しないといけないため、時間がかかりますが、WEBのユーザー体験の観点からミリセカンドでも早くしたほうがいいので、このCSSスプライトを多用してスピードアップを向上させたほうがいいかと思います。
この動画では元々アイコンが３つそれぞれ違うアイコンとして画像取得していた所をCSSスプライトを利用して、１つの画像として取得してネットワークのやりとりを３回から１回に減らしています。本番のページではもっとより多くのアイコンを利用されると思いますのでこのネットワークの減らせる量も増えるかと思います。
scssは不要
最後にscss,sassについてですが、コンパイルが必要で元々CSSは簡単に書けて書いてすぐに確認、リリースできるのがいい点なのですが、そんな所をコード量を少なくするためにあえて環境を用意して、別ファイルにするのは面倒です。
さらにコンパイルしないといけないのでページ確認のために毎回コンパイルしないといけないのは時間がかかるのと本番と開発のCSSコードが違ってきて本番のデバッグを難しくさせるので「コード量を少なくする」に対してのデメリットの方が大きく上回っているのでおすすめはしません。
javascriptの最適化の動画でも実証しましたが、google のページインサイトではキャッシュを考慮しないためインラインの方が速いと証明しています。
SEOもキャッシュを考慮しないのでSEOが必要なページはインラインを多用したほうがいいのですが、SCSSではそもそもインラインでコーディングすることはできません。
マイページなどSEOとは関係ないページではキャッシュの効果が大きいですが、CSSを一つのファイルにしてキャッシュさせたとしても訪れることのないページのCSSまでキャッシュさせることはその分パフォーマンスが下がってしまいます。
なので、全てブラウザキャッシュありきというわけではなくユーザーのアクセス回遊具合によって決める事がいいのではと思います。
登録日：
更新日：