遅延ロード

savanna.io の日報からの転載。ちゃんと整形したり説明詳しく入れてメインのブログで公開しようと思ってたんだけど時間がなさすぎた palkan/n_plus_one_control: RSpec and Minitest matchers to prevent N+1 queries problem N+1をテストで検出できて便利 実際に同じテストを、DBレコード数だけ変えて複数回実行して発行したクエリ数を比較する クエリ数が違うとN+1では？となりテストを失敗させることができる N+1が起きるのは実際のユーザがアクセスしたときなので、システムスペックでは、と思いそうしていた しかしsy…

2021年6月9日に、はてなブログでとても嬉しい変更がありました！ その変更とは、 ・はてなフォトライフの画像をはてなブログに張り付けたとき、画像表示時に画面にズレ（レイアウトシフト）が生じない ・画像の遅延読み込み（lazyload）の対応 です。 ≫ はてなフォトライフの画像を表示する際に、画面にズレが生じないよう変更しました - はてなブログ開発ブログ 「それって何がすごいの？」と思われる方がいるかもしれません。 なんと今回の変更は、はてなブログを利用している人に恩恵があるのです。 それでは、どんな変更やメリットがあるのか、具体的に紹介します。 ◆この記事はこんな人におすすめ◆ ✔ 今回…

はてなブログでブログ運営をしていると立ちはだかる大きな壁があります。 それは速度！表示速度の遅さ！ そのため自力でLazy loadを導入するための記事がたくさんあって、みなさんとても努力されているのだなぁと感じていました。 私はやろうかと思ったけど面倒でやめた人間です。 しかしそんな方々に朗報！ 画像の遅延読み込み（lazy load） 貼り付けした画像のサイズ情報の書き込み（レイアウトシフトの回避） が2021年6月9日、公式に実装されました！ この記事では Lazy loadとレイアウトシフト 利用の仕方 はてなブログアプリからの投稿にも対応しているのか検証した結果 Lazy load非…

Google I/O 2021 で発表されたコンテンツから、日本のデベロッパーへ向けて特にお届けしたいテーマに焦点を当て紹介をするウェビナーを拝見した developersonair.withgoogle.com その中でCWV（Core Web Vitals）に関する話の個人的メモ 指標のアップデートについて紹介されていた LCP（Largetst Contentful Paing） background imageの除外とカルーセルの判定改善 CLS（Cumulative Layout Shift） 滞在時間の長いページでより公平に計測を行うため、セッションウィンドウを用いてCLSを計測す…

昨年はmikutterをほとんど触っていなかったのだが、この頃また大きめの機能開発を行っているので、生存報告を兼ねて現状何をどこまで作っているかを書いておく。 今はプロトタイピングの段階で、まだそれをまとめて動かせるような状態にはなっていない。できてもいない話を書き残すのは嫌なのだが、一応コードはあるから……という言い訳をしつつ、往生際の悪いことにまだmikutterに機能追加する意欲があるということを伝えるとともに、自分の頭の整理も兼ねてこの記事を書いている。 （書いてる最中に2013年から存在していたバグを見つけてしまってリリースを打つ羽目になったので、この記事から生存報告の意味はほとんど…

ubuntu18.04におけるneovimのインストールと初期設定について インストール パッケージをインストールする sudo add-apt-repository ppa:neovim-ppa/unstable sudo apt update sudo apt install neovim pythonのモジュールをインストール pip3 install neovim nvimで起動し，echo has('python3')で1が出力されれば成功． 設定 設定ファイルを以下のように分割している lsd -T . ├── dein.toml ├── deinlazy.toml ├── ini…

■ はじめに https://dk521123.hatenablog.com/entry/2020/04/30/000000 の続き。 目次 【１】関連用語 １）コンポーネント (Component) ２）マウント (Mount) ３）Nuxt(ナクスト) ４）Babel (バベル) 【２】ページの基本的な構成 【３】Vue のライフサイクル 【１】関連用語 １）コンポーネント (Component) * Vue の機能の１つで、 Webページを部品（e.g. ヘッダー、フッター）にして再利用できる ⇒ この部品を、コンポーネント になる。 ２）マウント (Mount) * コンポーネントがD…

遅くなる理由 プログラムの問題 コンピューティングリソースの不足 コールドスタート Lambdaファンクション実行時に起きていること コールドスタートが起こる条件 コールドスタートを速くする アーキテクチャの問題 同時実行数 Limit Increaseについて アンチパターン AWS LambdaでRDBMS使いがち問題 IP固定したがり問題 サーバレスに夢見がち問題 監視しなくていいと思ってる問題 その他 参考文献 Lambdaのコールドスタート対策の調査をする中で、「AWS Summit Tokyo 2017の全部教えます！サーバレスアプリのアンチパターンとチューニング」というセッション…

フロントエンドエキスパートチーム内でスピードハッカソンを行いました。通常のスピードハッカソンは共通の題材に対してチームごとにスコアを競うというイメージですが、今回はランダムに決めたチームでそれぞれのチームごとに題材を探すところからはじめ、計測方法も自由としました。 今回のハッカソンは、チームのコミュニケーション促進を主な目的として開催しましたが、結果としてプロダクトの改善につながる成果、とっかかりとなる知見などが得られました。 今回取り組んだ内容などを紹介します。

×57 New plant-based plastics can be chemically recycled with near-perfect efficiency - The Academic Times ×51 GitHub - qeeqbox/social-analyzer: API, CLI & Web App for analyzing & finding a person's profile across 350+ social media websites (Detections are updated regularly) ×44 A dishonest, indiffer…

Next.jsは画像を自動で最適化する 静的ファイルはpublicディレクトリへ格納 imgタグは使う意味はない Imageコンポーネントを使う その他Imageコンポーネントのメリットまとめ 最後に Next.jsは画像を自動で最適化する Next.jsのチュートリアルを続けていきます。 今回は静的ファイル、画像の扱いです。 Next.jsはブラウザに合わせて自動で 最適化された状態でレンダリングします。 静的ファイルはpublicディレクトリへ格納 まず表示させる画像をルートのpublicディレクトリに格納します。 今回はpublicの中にimagesディレクトリを作りました。 またpub…

こちらの記事で2021年におけるfront-end のパフォーマスに関するチェックリストを紹介している www.smashingmagazine.com かなり詳しく、大量のチェックリストになっているため、一読の価値ありと思われる そんな中で、個人的に覚えておきたいと思ったものをメモしておく アセッツの最適化 プレーンテキストの圧縮にはBrotliを使用 現在IE以外のすべてのモダンブラウザでサポートされている サイトがすでにGzipで最適化されている場合は、サイズの縮小とFCPのタイミングで少なくとも 1桁の改善、せいぜい2桁の改善が期待できる ブラウザは、ユーザーがHTTPS経由でWebサ…