ピクセル単位での調整作業中ブラウザ上に反映されるまで時間がかかってしまう

しょーごさんのコーディング課題【中級編】も、ついに最終段階まで到達しました。

無事にサーバーへのアップデートも終えて、ピクセル単位で余白やサイズの調整をしていますが、ここで困ったことが一つ発生しました。

VSCodeで編集してから、ブラウザ上に反映されてかつデザインカンプが透過されるまでの時間がものすごく長い。。。

今のところ最長で10秒かかっています。

1つ1つの微調整にここまで時間かかるとなると、作業の効率が格段に悪くなってしまいます。

今までと違うのは、動的サイトを生成しているので、ブラウザの読み込みでjQueryやJavaScriptの読み込みがあること、preprosでSassのコンパイルを行っていること、です。

そしてpreprosは現在フリープランで使用しているので、一定時間おきにポップアップ表示がされてしまい、それも作業効率を下げる一つの要因になっています。

パソコンの調子が良ければ5秒くらいで反映されますが、それでも遅いです。

ブラウザの画面で見ているセクションによっても多少違っていますが、全体的に遅くなり、確認に時間がかかってしまっています。

朝活していて、まだ1つのセクションも直せていないのに子供たちが起きてきてしまい、なかなか作業が進まないという事態にもなっています。

今回はなんとかこれで乗り切るとして、これが複数ページを対応したり、実案件で対応するとなると、このタイムラグ問題は看過できそうにありません。

PC側のスペックの問題もあるかもしれませんが、もっと効率的にサクサク作業ができる方法を探す必要がありそうです。

次の課題に取り組む前に、そういった環境を整えようと思います。

この記事を書いた人