TREVOのホームページの改良点について

前回ブログでTREVOホームページのヘッダーとフッターのデザインを変更した記事を書きましたが、改良したのはデザインだけでなく制作方法も実験的ですが変更しています。

JavaScriptを減らす

依然のホームページはJavaScriptを結構を使用していました。
そのためJavaScripを読み込むのに時間がかかりホームページを表示スピードが落ちていました。
また、ホームページのチェックツールを使うとJavaScripのエラーが出たりして評価点数が下がっていたので出来る限りJavaScriptを使わずに制作する方針にしました。
JavaScriptを完全に無くすことはできませんが、減らすことはできると思いCSS（スタイルシート）で代替えできることをしました。

CSSでの改良点

変更点はこれまでメインメニューはPC、スマートフォン両方でJavaScriptで制御していました。
以下の今回以下の3点を変更しています。

プルダウンメニュー

マウスをリンクボタンを乗せた時に下にサブメニューが表示する仕組みですが、下に開くアニメーションを含めCSSで制御で制御しています。

バーガーメニュー

スマートフォン表示の時に右上に表示される三本線のバーガーメニューですが、いつもはJavaScripで制御していましたがCSSで制御するようにしました。

アコーディン

スマートフォン表示の時にサブメニューをクリックすると表示するようになる機能ですが、こちらもがCSSで制御しています。

まとめ

今まで改良した3点の制御を4つのJavaScriptで制御していましたがそれを、CSSで全てまかなうことによって表示スピードも速くなりチェックツールでの点数も上がりました。
評価が高いとSEOにも少しながら影響はあると思います。
まだまだ実験段階ですが、少しでもいい効果があれば今後制作するお客様のサイトにも取り入れたいと考えています。