前回ブログでTREVOホームページのヘッダーとフッターのデザインを変更した記事を書きましたが、改良したのはデザインだけでなく制作方法も実験的ですが変更しています。
JavaScriptを減らす
依然のホームページはJavaScriptを結構を使用していました。
そのためJavaScripを読み込むのに時間がかかりホームページを表示スピードが落ちていました。
また、ホームページのチェックツールを使うとJavaScripのエラーが出たりして評価点数が下がっていたので出来る限りJavaScriptを使わずに制作する方針にしました。
JavaScriptを完全に無くすことはできませんが、減らすことはできると思いCSS(スタイルシート)で代替えできることをしました。
CSSでの改良点
変更点はこれまでメインメニューはPC、スマートフォン両方でJavaScriptで制御していました。
以下の今回以下の3点を変更しています。
プルダウンメニュー
マウスをリンクボタンを乗せた時に下にサブメニューが表示する仕組みですが、下に開くアニメーションを含めCSSで制御で制御しています。
バーガーメニュー
スマートフォン表示の時に右上に表示される三本線のバーガーメニューですが、いつもはJavaScripで制御していましたがCSSで制御するようにしました。
アコーディン
スマートフォン表示の時にサブメニューをクリックすると表示するようになる機能ですが、こちらもがCSSで制御しています。
まとめ
今まで改良した3点の制御を4つのJavaScriptで制御していましたがそれを、CSSで全てまかなうことによって表示スピードも速くなりチェックツールでの点数も上がりました。
評価が高いとSEOにも少しながら影響はあると思います。
まだまだ実験段階ですが、少しでもいい効果があれば今後制作するお客様のサイトにも取り入れたいと考えています。
大阪のホームページ制作会社TREVOでは、ホームページ制作に関する情報を掲載しています。最短2日で仮サイトを公開するサービスやSEO対策に特化したホームページ制作、オリジナルホームページデザイン、ライティング、リスティング広告、WEBマーケティングなどのサービスをご紹介しています。
関連の記事
- TREVOWP
- TREVOWP