[開発] トップページの軽量化を行いました!

こんにちは、えとーです!

今回は完全にプログラミングの話題なので、分からない方はブラウザバックでOKです。(適当すぎる)

今回はトップページと一部SPA対応ページの軽量化を行いましたので、利用したモジュール等を紹介していきたいと思います!

今回の主な軽量化のターゲットはモバイルの表示です。

トップページはコンテンツが多くDOMの数が増えがちで、改善前は1,500nodesを超えていました。


やったこと

nodeの削減

まず行ったのはnodeの削減ですが、主にnodeを増やしているのがカテゴリ一覧

今までモバイルでのカテゴリの非表示はCSSで display: none; をしているだけでしたが、今回Angularのモジュールを新しく追加し、UAからモバイルか否かの判定を行うようにしたことで、ngIf等を利用して項目が生成される前に処理をストップすることが出来るようになりました。

その方法を利用してPC版はサイドバーとNavbarの両方にカテゴリを描画、モバイル版はサイドバーのみ描画することでnodeを減らしたり、モバイル版には不要なhttpリクエスト等を削減することによって、大幅に処理速度(主にDOM)が改善できました。

また、今までのトップページは項目が多すぎて視認性が悪かったので、ザンポンさんの提案でモバイル版のトップページはガッツリ項目を減らす事になりました。

スカスカになるかと少し心配しましたが、意外とスマホだとあの位の項目数の方が見やすくて、視認性と軽量化が同時に行えたアップデートになりました。

画像読み込みの最適化

画像の読み込みも一部変更を行っており、NavbarのカテゴリバーはmouseenterされるまでDOMの描画を行わず、mouseenter後も画像はngx-lazy-load-imagesを利用して項目が表示されるまでは読み込まないように変更しました。

また今まで利用していたng-lazyload-imageでは出来なかった仮想スクロール時の画像読み込みについても、新しいngx-lazy-load-imagesで遅延読み込みに対応させ、オフセットを再調節する事で違和感を極力減らして画像の読み込みが出来るようになりました。


利用したプラグイン

ngx-device-detector

ngx-lazy-load-images

最初はUAを取得するモジュールを利用して自分でモバイルデバイスの判定を書こうと思っていましたが、ngx-device-detectorには isMobile() という機能があったので、そのまま利用しました。

また、HttpClientで項目をリクエストする際にもモバイルデバイスの表示には必要ない項目を削減できるようになったため、通信量の削減も行えて一石二鳥でした(もっと早く気付けばよかった)


そういえば、先日 Angular7 がリリースされたので早速アップデートしてみようと思ったのですが・・・

DO-MUのサイトはBootstrapをAngularで動かすために ng-bootstrap を使っているのですが、どうやらそのモジュールがまだAngular7で利用されているTypeScript 3.1に対応していないようで、ng serveやnpm run testなどは通りますが、npm run buildが通らないので残念ながらまだアップグレードすることができません。

モジュールの更新が入るのを楽しみにしながらAngular7の予習をしておくことにします。

ではでは〜

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください