単体のアニメーションだとそれほど気にならない場合でも、表示範囲の中で複数のアニメーションが同時に走ったりする場合、負荷が増大して処理落ちなどを起こすことがあります。 最近レンダリング負荷を軽減するため試行錯誤をしたので、備忘録もかねて実施した内容をまとめました。

ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、第11代黒帯（ヤフー内のスキル任命制度／Webフロントエンド領域）の浜田（@narirow）です。今回はヤフー全社で実施してきた、「Webパフォーマンス改善プロジェクト」についてお話ししたいと思います。 長期に渡る活動の結果、多くのサービスのWebパフォーマンスが徐々に向上しています。この記事では、取り組みの経緯や、多くのサービス分析を通してわかったコスパの良い施策（比較的簡単に実施できてスコアも上がりやすい施策）などをご紹介します。 全社横断でWebパフォーマンス改善を実施する経緯 さかのぼること2021年、Googleから以下のような案内がありました。 「Core Web VitalsがGoogle検索の検索順位に

概要 画像のデコードは、ブラウザのメインスレッドをブロックします。こちらの記事では、例としてブラウザのメインスレッドが800ミリ秒を超えてブロックされています。 decoding="async" は、その解決策として使うことができます。 loading属性との違い loading属性は、loading="lazy"と使うことによって画像の遅延読み込み化ができます。 loading属性は「画像をいつ読み込むか？」という画像の読み込みのタイミングを担当しますが、decoding属性は「画像をいつデコードするか？」という画像のデコードのタイミングを担当します。 loading=lazyとdecoding="async"の併記 loading="lazy"とdecoding="async"は併用することができます。 注意点としては、デコードのタイミングが遅れることによって、スクロール時に画像が表示

ベストプラクティスや「高速化につながる！」と紹介されている記事では、逆効果、もしくは効果があるシチュエーションがあまりに限定的な手法が紹介されていることが多いので、アンチパターンとして紹介します。 本記事は「Webパフォーマンス Advent Calendar 2019」2日目の記事です。 https://qiita.com/advent-calendar/2019/web_performance 本記事はWebパフォーマンス高速化の専門家である株式会社Spelldataの竹洞 陽一郎氏にアドバイスをもらいました。HTTP/2の伝送の画像など一部資料のご提供もいただいております。誠にありがとうございます。 https://spelldata.co.jp/ ほとんどの場合で間違い 1. すべての画像をCSSスプライトその昔、画像をすべて1枚にまとめて、DOMのbackground-image

このオンラインイメージ最適化ツールは、画像最適化とファイル圧縮アルゴリズムを組み合わせて、画質を保ったままに、JPEG、GIFやPNGイメージを最小サイズに圧縮する賢いツールです。Optimizillaは、可能な限りの画像圧縮率かつ画質維持を実現。他のサービスやソフトウェアを凌ぐパフォーマンスです。 一度に最大20個までファイルをアップロードできます。アップロードが完了したら、サムネイルをクリックして、各イメージのクオリティ設定をして下さい。イメージ横のサイドバーで圧縮レベルを調節できます。調節後は、イメージを拡大縮小・移動させて画質を確認して下さい。

スマホからウェブにアクセスするユーザが増え、ウェブサイトの表示速度の高速化がより重要な制作の課題になっています。1ページもののサイトなら、フロントエンド・エンジニアが一人で実装できるかもしれませんが、ある程度の規模のウェブサイトではワークフローやサイト全体の設計にも関わってきます。また、表示速度の高速化の方法を知らなければ、最適化しやすい、より高度なデザインは実現できないでしょう。エンジニアだけでなく、デザイナーやディレクターがこういった情報を知っていれば、よりスムーズに結果を出せるウェブサイト制作ができるはずです。 ページ表示速度の改善にはいろいろな方法がありますが、この記事では一番効果がありそうなところから攻めていきたいと思います。自分もまだまだ勉強中なので、まずはfilament groupのScottさんの記事 やClearleftのJeremyさんの記事 を参考に、フロントエンド

第三回DeNAゲーム開発勉強会の資料です。 https://atnd.org/events/59594Read less

ナレッジグラフ推論チャレンジ2021「技術勉強会」 ～ナレッジグラフ利用技術の基礎と推論/説明への活用例～：https://kgrc2021ws.peatix.com/ 資料：https://github.com/KnowledgeGraphJapan/KGRC-ws-2021/tree/main/Section2

ニコニコ超会議で開催された「超チューニング祭り」に恋人である武藤スナイパーカスタムからお誘いされて参加しました。 投票してくださった方々のおかげで最優秀賞！ ありがとうございます！ ニコ動モバイル版のトップページのhtml,css,jsを軽量化するお祭りでして、にぎやかな会場、狭いブースの中で詰め込まれておもしろかったです。 チーム：ウルフギャングの紹介 エンジニア、デザイナーのバランスチーム。 武藤さんが狼が好きなのでそれっぽい名前にしました。ギャングらしくふたりとも革ジャン装備。 武藤スナイパーカスタム Twitter : tai2 コンピューターグラフィックスとPythonをこよなく愛すマッチ棒エンジニア。 イシジマミキ Twitter : woopsdez 写真をアップするたびにおおつねさんに「太った？」と言われる番付上昇中のデザイナー 他はエンジニアふたり、個人での参加などが

FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ

実は WordPress サイトを静的 HTML に変換するプラグイン StaticPress をリリースしていました。 ダウンロードは、WordPress 公式プラグインディレクトリからお願いします。 WordPress › StaticPress « WordPress Plugins このプラグインを使用することで WordPress で作成されたサイトを丸ごと静的ファイルに変換することができます。 また、変換時にサイトのパーマリンク構造を変換することができるため、http://wp.example.com/ というオリジナルサイトを http://www.example.com/static/ というサイトとして公開するための html を作成することも可能です。 完全に静的ファイルを作成するため、コメントやサイト内検索・コンタクトフォームの設置などはできません。 それらについては

対象読者 スマートフォンWebサービス開発者 特に、フロントエンド周りの開発に従事する方 スマートフォン向けWebサイト高速化のテクニック スマートフォンはOS／デバイスの進化が激しく、要求される最適化の内容も半年で別物になることがあります。そのため最適化に際しては、案件ごとの状況や目的、デバイス／OSのシェアに応じて、まずターゲット端末を選定し、問題の検出を行います。 この記事では「iPhone 4＋iOS 5」を想定して話を進めます。実際に「iPhone 4＋iOS 5」はよく現場でも最も動作が重い組み合わせとしてターゲット端末に挙がります。これはiPhone 4がRetinaディスプレイを採用したことで960×460ピクセルの高解像度を備えながら、CPUなどのデバイス性能が潤沢とはいえず、ボトルネックが生まれやすいためです。iOS 4ではなくiOS 5をターゲット端末として扱うのは、

8月1日から、このサイトの WordPress を置いているサーバーを Amazon Web Services（以下 AWS）の Elastic Compute Cloud（以下 EC2）に移してみました。 ちょっぱやになってるけど、でも導入難しいんでしょう？なんてぼくが半年前に思っていたような声が聞こえてきそうですが、AWS の導入自体はさして難しいものではありません。 この記事では、ぼくでもできる、あなたでもできる AWS + 網元の導入についてご紹介します。 Table of Contents AWS って何？ 網元って？ AWS のアカウントを作成する AWS コンソールにログインする EC2 のリージョンを選ぶ Key Pairs を作成する Security Groups を作成する サーバーインスタンスを立ち上げる Elastic IPs を設定する WordPress のセ

ゴールデンウィークは、ディズニーランドに連れていくと娘に約束してしまった ishida です。いったいどのくらい混雑するんだろう、どうせオイラはパレードの席取りでひたすら待つのさ。 さてさてweb高速化においてサーバー側ではなくフロントエンド側で対応できることもかなりあります。 CSSのセレクタ構文の最適化やCSSスプライトによる画像リクエスト数の削減であったり。 今回は、ファイル容量を削減に焦点を当てて圧縮ツール・サービスをまとめてみます。 Javascriptの圧縮 /packer/ http://dean.edwards.name/packer/ とってもシンプルな圧縮サービス。オプションで難読化することもできます。 JavascriptとCSSの圧縮 Compress javascript and css http://compressor.ebiene.de/ こちらもシンプルな

WordPress を日本語などのマルチバイトで利用していると、表示が遅くなってしまうので様々な高速化テクニックが公開されています。 キャッシュを上手く利用するのが高速化の鍵ですが、翻訳ファイル（xxx.mo）の読み込みにかなりの負荷がかかっているのだそうです。それで MO Cahce というプラグインを使うと大幅な高速化が期待できます。 プラグイン作者さんのサイトを引用すると、 最初はバージョンアップで速くなったのかと思ったのですが、すぐに翻訳ファイルの読込みに時間がかかっていることが判りました。Xdebug のプロファイラで計測したところ実に全体の70%近くが翻訳ファイルである .mo ファイルの読込みのために費やされていました*1。メインの開発者達が英語版しか使ってないからこんなことになるんだ！と愚痴っていてもしょうがないので、なんとかしようと思い、できたのが MO Cache です