タグ

web制作とパフォーマンスに関するmsakamoto-sfのブックマーク (2)

  • ブラウザレンダリング入門〜知ることで見える世界〜 - Qiita

    はじめに 『レンダリングの仕組みなんて知らなくても、ブラウザが勝手にやってくれるじゃん!』 当時駆け出しのエンジニアだった私はそう思っていました。 実際、当時の私はレンダリングの『レ』の字も知りませんでしたが、特に業務上で問題はありませんでした。 しかし、その時は突然訪れました。 クライアントの要望でアニメーションを多彩に取り入れた案件を実装した際に、テスト段階で一部ブラウザ(S○f○ri、E○ge)でアニメーションがひどい状況になっていることが発覚しました。 (開発中はChromeで確認を行っており、Chromeでは特に問題はなかったので発覚が遅れました。) それからは、狂ったようにパフォーマンスの改善方法をググり、修正する日々が続きました。(最終的には、なんとかマルチブラウザでの動作も担保し、納品まで完了しました。) その案件が落ち着いた後、改めて自分の調べたことを振り返ると、局所的な

    ブラウザレンダリング入門〜知ることで見える世界〜 - Qiita
  • ウェブページを1秒台で表示させる原理と方法 | Philosophy Guides

    可能な限り最新の情報を反映していますが、追いつけていないこともあります。サイトに採用していても、記事に反映できていない設定もあります。ページのソースを読んでいただくと、参考になる箇所があるかもしれません。 ウェブページの高速化に関するテクニックは、ネットで検索すれば簡単に見つけることができます。優れた情報も数多くありますが、「CSSJavaScriptはminify(ミニファイ)しておけばOK!」のような都市伝説も少なくありません。 そこで、ここではサイトのデザインリニューアル時に施した対策をもとに、一歩進んだウェブページの高速化の方法と、それを支える原理について、できる限り分かりやすく説明したいと思います。フロントエンジニアやデザイナーの方からすれば「んなもん知っとるわ!」な情報なのかもしれませんが、都市伝説を駆逐すべく、私なりの仕方で解説(≒加勢)したいと思います。 初めに結果を

    ウェブページを1秒台で表示させる原理と方法 | Philosophy Guides
  • 1