タグ

2020年9月30日のブックマーク (3件)

  • Modern Web Development on the JAMstack を読んでまとめた - console.lealog();

    https://www.netlify.com/pdf/oreilly-modern-web-development-on-the-jamstack.pdf Netlify社が2019年に公開したPDFです。 せっかくJamstackの会社に入ったので、読んでおかないといけない気がして。 あとJamstackは人によって解釈が違ったりするとし、Jamstackの真髄について知っておきたいですよね?と思い。 ただこれなんと127ページもあるんですよね〜。 全編もちろん英語なので、読むのも中々に大変ですよね〜。 てなわけで、ざっくり訳してまとめまておきました。(それでも長いけど) はじめに ここ最近のWebの進化はすさまじい ブラウザもJavaScriptもパワフルになった その分ユーザーの要求も増える やることが増えると処理は遅くなる 遅いページは見向きもされないモバイル当たり前の世界だ

    Modern Web Development on the JAMstack を読んでまとめた - console.lealog();
    Keisuke69
    Keisuke69 2020/09/30
    Gitとか開発者フレンドリーな分、普通の人には難しいところある。重要なのはビルド、Jamstackはビルド9割。だからこそ普通の人には難しい。あとはやはり生成時間。この辺りIncremental Static Regenarationに期待。SWRも
  • Next.js の Incremental Static Regeneration を理解する

    Next.js 9.4 から Incremental Static Regeneration という機能が実装されました。 段階的な静的サイト生成と訳されていて、SSG のビルドを最適化するものだろうなって認識しか無かったのですが自身のブログを ISR に対応させたので紹介していきます。 Next.js のビルドパターン紹介 Next.js のビルドにはいくつかパターンがあり、pages/ コンポーネントの処理に応じて適した出力をしてくれます。 どのパターンでビルドされてるかはログに書かれており、参考までにブログを yarn build した結果下記のように表示されました。 Page Size First Load JS ┌ ● / (ISR: 1 Seconds) AMP AMP ├ /_app 0 B 58.4 kB ├ ○ /404 0 B 58.4 kB ├ ○ /about AM

    Next.js の Incremental Static Regeneration を理解する
    Keisuke69
    Keisuke69 2020/09/30
    一部で話題のIncremental Static Regenerationに関して。これサーバーレスでやろうとするとどうなるのかな。SSR以上に難しい気がするが果たして…
  • CSSを最適化してページの読み込み時間を高速化する方法

    CSSを最適化して、ページの読み込み時間を高速化する方法を紹介します。 シンプルなCSSのファイルをはじめ、大規模プロジェクトで使用されるCSSまで、すべてのCSSに効果があるテクニックです。 Optimizing CSS for faster page loads by Tomas Pustelnik 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 読み込みに時間がかかるのはなぜか? スタイルシートのファイルサイズを制限する クリティカルCSSを使用する 遅延読み込みのスタイルシート スタイルシートにコード分割を使用する まとめ はじめに 先日、私は自分のWebサイトの読み込み時間を改善することにしました。すでにかなり高速にロードされていましたが、まだ改善の余地があり、CSSの読み込みがその原因の1つであることが分か

    CSSを最適化してページの読み込み時間を高速化する方法
    Keisuke69
    Keisuke69 2020/09/30
    Lighthouseスコア向上のために後で読もうとチラ見したところ、ブラウザがHTMLをどうレンダリングしてるかから解説されている良記事だった。スタイルの遅延ロードとかこのあたりあんまり明るくないので為になるな