こんにちわ、ジーニアスウェブの石野です。
唐突ですが、こちらのサイトをご存知でしょうか？
阿部 寛のホームページ
本をめくるより表示速度が速いと一時期話題になった阿部さんのホームページです。
こちらの記事では画像やコードの圧縮等について書かれていますが
今回は私なりのページの表示速度についてお話していきたいと思います。
GoogleはSEOについて何も教えてくれない？
SEOで何をしたら順位が上がるのか。
これを教えてしまうとGoogleでの検索順位の正当性がなくなってしまい、
知ってる人は上位に表示されるし、逆はされない事になってしまいます。
しかし、だからといってまったく何も教えてくれていないわけではありません。
公表してくれている情報もいくつかあるのです。
その内の一つが「ページの表示速度」です。
スマホで4k画質の映像が取れてしまうご時世
※4k画質＝フルハイビジョンの4倍の綺麗さ
通信回線の技術も年々上がっており、早くたくさんのデータをやりとり出来るようになっているとは言え
扱うデータの量が増加していってるのも事実です。
綺麗だけど遅いのはイヤ、早いけど見た目のクオリティが低いのはイヤ。
どちらも両立できたらいいですよね。
ページを作っているHTML・CSS・JSの進化
WEBページは日本語・英語・中国語といった感じで、大まかに3つの言葉で作られており、それぞれ役割があります。
| HTML | 骨組みのようなもので、下の二つはここにくっつけるものです。 画像やテキスト、そしてそれらを置くスペースなどを作ります。 |
|---|---|
| CSS | 外側の見た目をになう部分です。 色や大きさなど、HTMLで書いたものを調節します。 |
| JavaScript | 動きを付ける筋肉のようなもの。 便利だけど、使い方次第では不具合の原因にもなります。 |
大まかな用途としては変わっていないのですが、それぞれの言葉はバージョンアップを繰り返しており
以前ではCSSを使わないといけなかったものがHTMLだけで出来たり、
JavaScriptでやっていた事がCSSだけで出来てしまったりするのです。
CSS今昔
簡単な例を挙げるとこんな感じです。
下の「RunPen」というボタンを押して、左右の箱にマウスをのせてみて下さい。
See the Pen CSS今昔 by ジーニアスウェブ (@genius-web) on CodePen.dark
以前はJavaScriptを使わないとできなかったような動きを、今ではCSSだけで書くことができます。
こういった工夫をすることで、綺麗かつ軽量なサイトを作る事が出来ます。
もちろんそれぞれの限界はあるのですが、常に進化し続けているものなので今後どうなるかが楽しみですね。
お客様やGoogleに評価される、数ある施策の内の一つではありますが、
こういった事の積み重ねで「良いサイト」は出来ています。
新しく作成する場合や、今あるサイトの改善案としていかがでしょうか。
では。
