1ミリ秒でも早く届けたい! HTMLで画像読込を高速化するために取り組んでいること - ICS MEDIA
ウェブサイトの表示スピードはサイトの健全性における重要な観点の一つです。Googleが提唱するCore Web Vitalsコア・ウェブ・バイタルズと呼ばれる指標の中にもサイト表示スピードに関する項目があり、表示されるまでの時間が単なるユーザー体験だけでなく、SEOでも無視できない存在です。表示スピード低下の要因はネットワークやサーバーサイド、そしてフロントエンドまで広範囲におよびます。本記事ではその中でも画像の読み込みについて改善できるテクニックを改善前と改善後を比べながら紹介します。 改善前サンプルを別ウインドウで開く 改善後サンプルを別ウインドウで開く 画像読み込みBefore / Afeter 上図はLighthouseによるチェックの結果です。Lighthouseはウェブサイト検査ツールで、ウェブページのパフォーマンス、アクセシビリティ、SEOなどの状態を計測できます。Googl
無料で簡単にサイト全体の表示速度を劇的にアップさせる「CloudFlare HTTP/2」
Web負荷分散システムを提供するCloudFlareが2015年6月に発表された通信プロトコルHTTPの新バージョン「HTTP/2」のサポートを開始しました。HTTP/2はSPDYを改良しパフォーマンスを上げたものですが、CloudFlareを利用すればさらに高速でウェブサイトの表示が可能になります。 CloudFlare HTTP/2 | CloudFlare | The web performance & security company https://www.cloudflare.com/http2/ 各地に分散されたキャッシュサーバーを介してアクセスすることでウェブサーバーの負担を軽減させるCloudFlareは、サービスが無料であることと、「CloudFlareアカウント作成」「DNSレコード入力」「CloudFlareのネームサーバー名をウェブサーバーに登録」というステップで
Accelerated Mobile Pages - モバイルのWeb体験を加速化する
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました スマートフォンの世界ではとにかく表示の高速さが問われています。少し詰まっただけでもユーザは嫌がってしまうでしょう。そのためにはレスポンスを高速に返すのは基本として、他にもできることが幾つかあります。 GoogleやTwitterが考え出したのがAccelerated Mobile Pages（AMP）です。外部サイトのコンテンツをキャッシュして表示する技術で、これによって高速表示を可能にしようというのです。 Accelerated Mobile Pagesの使い方 Accelerated Mobile PagesではAdSenseやGoogle Analyticsのような仕組みはそのまま使えるようです。他にもYouTubeやPinterestのようなところも提供しています。 例えば
JPEG画像の約半分のファイルサイズで同品質のものを表示できる画像形式「BPG」が誕生、実際に使ってみるとこんな感じ
同品質のJPEG画像と比較するとファイルサイズを約半分以下に縮小できる新しい画像形式が「BPG」で、FFmpegやJavaScriptだけで動くLinux「JSLinux」などを開発したFabrice Bellard氏が開発した画像形式です。ただサイズが軽いというだけではなく、グレイスケール・YCbCr＝4:2:0・4:2:2・4:4:4・RGB・YCgCo・CMYKなどの色空間をサポートし、アルファチャンネルや可逆圧縮にも対応しています。 BPG Image format http://bellard.org/bpg/ BPGが他の画像形式と比べてどれくらい優れているのかを比較できるのが以下のページ。2種類の画像形式で同程度のファイルサイズの画像を表示させており、「mozjpeg」とBPGとで同じ画像を比較すると、BPG画像の鮮明さが際立ちます。 BPG Image Comparison
[JS]通知パネルをアニメーションで表示する超軽量のスクリプト -Humane JS
jQueryなど他のスクリプトに依存せずに動作する、アニメーションで表示する通知パネルを実装するスクリプトを紹介します。 Humane JS デモページ [ad#ad-2] 上記デモの「Welcome Back」の通知パネルは、下記のスクリプトで実装されています。 JavaScript humane("Welcome Back"); 通知パネル内のテキストにはHTMLも使用可能で、スタイルシートを利用することも可能です。 JavaScript humane("<p style='color:red'>Invalid Username and/or Password</p>"); [ad#ad-2] スクリプトのオプション スクリプトのオプションでは下記を設定できます。 通知パネルの表示時間 表示時間終了後、マウス・キーボード操作があるまで表示 新しい通知パネルがすぐに表示されるかどうか 対
GPUの性能をフル活用したエフェクトが美しいフリーの画像ビューア「SuperSlide」
Windows環境で動作するスライドショービューア「SuperSlide」はスライドの切り替わりに「GPU」の性能をフル活用を用いた美しいエフェクトが堪能できます。ハードウェアアクセラレーションを用いているため、画像の拡大縮小や回転が非常にスムーズに行えます。 また、バックグラウンドで画像を先読みすることによって次の画像の表示を素早く行う機能、画像を見ながらあらかじめ指定したフォルダへコピーや移動が可能、実行ファイルのみで起動可能で他のファイルは不要、キーボードでほとんどの操作が可能であるなどシンプルながらもしっかりとした作りになっています。 詳細は以下から。 実際のスライドショー表示やぬるぬる動く拡大縮小回転の表示などのデモ動画はこちら。 YouTube - 「SuperSlide」でのスライドショー表示 YouTube - 「SuperSlide」での画像の回転拡大縮小 SUPERSL
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
