タグ #performance
「performance」タグの記事一覧です。
「通販サイトスピード改善、結局いくら儲かる？」無料診断
通販サイトのスピード改善で実際いくら儲かるのかを短期集中の解析で示す無料診断です。改善率5%・10%・20%それぞれの収益増を、売上予測モデルで試算します。
通販主要80サイトのスピード研究「本当に速いECサイトはどこ？」(スマホ編)
通販主要80サイトのスマホでの実感スピードを調べました。総合トップ20とワースト20、LCPやFIDといった部門別の順位も公開しています。
Webの速度と収益の関係がこれで明らかに！目的特化型の無料アクセス解析 Speed Is Money リリース
表示速度と収益の関係を明らかにする無料アクセス解析「Speed Is Money」を公開しました。利用者ごとの体感速度を計測し、直帰やPVの機会損失を数字で示します。
SEOにも配慮したHTML遅延読み込み Hybrid Include で Core Web Vitals を改善する試み
HTMLの遅延読み込み「Hybrid Include」で Core Web Vitals を改善する試みです。HTMLが大きいとレイアウト計算が繰り返し発生する点に着目しています。
Lighthouse 8.0.0でPageSpeed Insightsの配点が変わりました
PageSpeed Insights の配点が変わりました。採点エンジンが Lighthouse 8.0.0 になり、6つの指標の重みが Core Web Vitals との相関を強める方向に調整されています。
透過=即PNGはもう古い。写真っぽい透過PNGを劇的に軽量化する無料ツールと3つのテクニック
透過が必要ならPNG、という判断はもう古いという話です。写真のような透過画像を劇的に軽くする3つの手法と、無料で試せるツールを紹介します。
Core Web Vitalsで計測した表示速度とコンバージョン率の密接な関係。リアルなデータを紹介するよ！
このブログで計測した Core Web Vitals とコンバージョン率の関係を公開します。表示が遅いとコンバージョン率が下がるという通説を、自社の実データで確かめました。
Core Web Vitalsを意識したスライダーのライブラリ選定と指標改善のためのチューニング
スライダー（カルーセル）のライブラリを Core Web Vitals の観点で比較しました。特にCLSが大きく悪化しやすく、選び方とチューニングの勘所を実測値で示します。
PageSpeed Insightsの点数の公式と、高得点をとれない理由
PageSpeed Insights のスコアはブラックボックスではありません。点数を決める5つの指標と計算式を明かし、改善提案に従っても点数が上がらない理由を説明します。
通販サイトのPageSpeed Insightsスコア80は偏差値70相当だった
国内の通販サイトを対象に、PageSpeed Insights のスコアを偏差値に換算した表を作りました。スコア80なら偏差値70相当。自社の立ち位置を測る目安になります。
通販サイト上位300のスマホトップは平均4.15MB、画質を落とさず41%削減できる
通販上位300サイトのスマホトップページを調べたところ、画像だけで平均4.15MBありました。画質を落とさず41%削減できるという試算と、個別レポートを公開します。
新人にもわかる！WebPのブラウザ振り分けの仕組みを図解。picture要素と.htaccessのどっちでやるべき？
WebP 対応・非対応のブラウザに画像を振り分ける仕組みを図解します。picture 要素とWebサーバー設定のどちらを使うべきか、理由がなければサーバー側を勧めます。
Webの表示高速化はファーストビューが早くなればそれでOK！ 課題を整理して着実に進めるためのポイント
表示高速化を進めるとき、施策は「サーバーの応答」「ダウンロード量」「読み込みの優先順位」の3つに分けると整理できます。どこから着手すべきかの判断材料を示します。
画像軽量化の可能性を無料レポート！ LightFile/WebPシミュレーター v3をリリース
画像をどこまで軽くできるかを無料でレポートする LightFile/WebP シミュレーター v3 を公開しました。削減後の画質をスライダーや差分で確かめられます。
Webの表示が〇秒遅くなると××まとめ。Webパフォーマンスの重要性を示すフレーズ集
「表示が0.5秒遅れると検索数が20%減る」など、表示速度と成果に関するよく見かけるフレーズを、大元の出典とセットでまとめました。国内の事例も収録しています。
WebPに関する10の誤解~5分で正しく理解するWebP
WebP について誤解されがちな10項目を、正しい内容と並べて説明します。読み方、ライセンス、対応ブラウザ、SEOとの関係など、5分で全体像がつかめます。
サイトのWebP対応は気楽にやろう！ 心が軽くなる4つの事実
サイトの WebP 対応は気楽に始めて大丈夫だ、という4つの理由を挙げます。一気にやらなくてよく、既存のデータを壊さず、困ったらすぐ元に戻せます。
画像フォーマットのチートシート日本語版を公開しました
画像フォーマットの特徴が1枚でわかるチートシート「SMUSH PRO Guide to Image Formats」を、著者の許可を得て日本語に翻訳しました。PDFでダウンロードできます。
新聞ニュース系158サイトでWebP利用中は23サイト・WebPで平均-1.6秒待ち時間短縮と試算・レポート無料公開
新聞・ニュース系158サイトのモバイルトップページを調査しました。1ページ平均4.43MBで画像はその42%。WebP に変換すると平均1.6秒短縮できると試算しています。
WebPと従来の画像を正しく振り分ける.htaccessファイル
WebP と従来の画像を、ブラウザの対応状況に応じて振り分ける .htaccess の書き方を説明します。非対応ブラウザには元の画像を返すため、既存の画像はそのまま残せます。
WebP画像を目立たせるChrome拡張機能 WebP Highlighter
ページ内で WebP として配信されている画像を蛍光色の枠で目立たせる Chrome拡張機能 WebP Highlighter を紹介します。Developer Tools を開かずに確認できます。
iPhoneの非対応でシェア劣勢でも、いまWebPに対応する意味
日本では iPhone が多く WebP 対応シェアは35%程度にとどまります。それでも今 WebP に対応する意味を、PageSpeed Insights のスコアと実際の恩恵の面から説明します。
ページの画像をまるごとWebP変換してPageSpeed Insightsスコアを今すぐ改善するチュートリアル
ページの画像をまるごと WebP に変換して PageSpeed Insights のスコアを改善する手順を、変換からアップロードまで通しで説明します。既存画像は置き換えません。
通販上位300サイト中32サイトがWebPを配信・楽天市場は積極利用
ネット販売企業上位300社のスマホトップページを調べたところ、32サイトが WebP を配信していました。楽天市場は店舗ページを自動で WebP 化しています。
WebP、JPEG、4K8K。2019年も画像にこだわろう
2019年の画像まわりで押さえておきたい話題を3つ挙げます。WebP への対応、JPEGの品質設定、そして4K8K時代に向けた画像サイズの考え方です。
Googleスピードアップデートがもたらした画像転送量の大幅な削減
Google のスピードアップデート後、画像の軽量化と転送量の削減がどれだけ進んだのかを振り返ります。SEOが絡むと対応が一気に進む、という傾向が数字にも表れています。
![[限定3社] Movable Type事例キャンペーンで LightFile をお得に](https://blog.ideamans.com/assets/mt-casestudy-ogp.jpg)
[限定3社] Movable Type事例キャンペーンで LightFile をお得に
Movable Type で構築されたサイトを対象に、画像軽量化ツール LightFile を優待価格で導入いただけるキャンペーンを、3社限定で実施します。条件と申込方法をご案内します。
表示高速化の第一歩に画像の軽量化を勧める6つの理由
表示高速化に何から手を付けるか迷ったら、画像の軽量化から始めることを勧めます。範囲が限られ、既存の作りを壊さず、効果が数字で見えるなど、6つの理由を挙げて説明します。
実際にWebPを利用するとどうなる？WebPの試験導入で画像ファイルサイズを-62.38%も削減という結果に！
自社サイトで WebP を試験導入した結果、画像のファイルサイズが62.38%削減されました。Googleデータスタジオで作ったレポートをもとに、実際の削減幅を共有します。
Webサイト全体をWebP対応する最低限の方法
サイト全体を WebP 対応する最低限の方法を、3ファイルのシェルスクリプトで実現しました。既存の画像を残したまま、対応ブラウザにだけ WebP を返す仕組みです。
美容ブランドのECサイトが収益を倍増させた６つの変革にある「ページの表示」について考えてみよう
美容ブランドのECサイトが収益を倍増させた6つの変革のうち、ページ表示に関する部分を取り上げて考えます。表示速度が売上にどう効くのかを、事例から読み解きます。
正式版になった日本語Google Fontsは表示の高速化を期待できる
正式版になった日本語 Google Fonts が、表示の高速化を期待できる仕様になりました。自社サーバー配信や早期アクセス版を使っているサイトが乗り換えを検討すべき理由を説明します。
「Jpegの品質は85がおすすめ」をデータで検証する
JPEGの品質は85が推奨、という定説をデータで検証しました。85を超えると容量が急に増える一方で画質はほとんど改善しない、という性質を実測値で確かめます。
7,866サイトのトップページを調べたら、モバイル向けの平均は2.43MBだった
Lighthouse で7,866サイトのトップページの総データ量を測りました。モバイル向けの平均は2.43MBで、Googleが推奨する1.6MBを大きく上回っています。
11種類のロスレスPNGサイズ削減ツールの比較ベンチマークレポート
PNGのファイルサイズを削減するロスレスツール11種類を比較したベンチマークを紹介します。OptiPNG や pngquant 以外にも選択肢があり、削減率と処理時間には差があります。
Google Speed Updateで遅いサイトが「検索順位に影響がでた」について思う「２つ」のこと
Google のスピードアップデートで検索順位が実際に下がった、という海外の報告を読んで考えたことを2点にまとめました。速度と順位の関係をどう捉えるべきかを整理します。
Webページのダウンロード開始までの時間(TTFB)は推奨0.6秒未満。7,688サイトの約92%がクリア
ダウンロードが始まるまでの時間 TTFB は0.6秒未満が推奨です。7,688サイトを調べたところ約92%がこれをクリアしていました。TTFB が何を含む時間なのかも説明します。
Optimizillaは後から画質調整ができる、きめ細かく確認したい人向けのツール
画質を後から細かく調整できる海外の軽量化サービス Optimizilla と LightFile Core を比べました。削減率と画質、そしてアップロード先がわからない点にも触れます。
Google Speed Updateで表示高速化しようと思ったら、まずは画像軽量化からはじめましょう
Google の Speed Update が表示速度を検索順位に反映します。本当に遅いページだけが対象で段階的に適用されるという補足も踏まえ、まず何から着手すべきかを説明します。
Retinaディスプレイに合わせるには、解像度はいくつがいい？画像最適化するなら解像度も理解しよう！
Retinaディスプレイ向けの画像は解像度をいくつにすべきかを検証しました。結論は72dpiで問題なく、調整すべきなのは解像度ではなく画像の表示サイズのほうです。
競合サイトを分析できるサービス・ツールまとめ（2018年6月版）
競合サイトを分析できるサービスやツールを、2018年6月時点でまとめました。SimilarWeb をはじめ、無料の範囲でどこまで調べられるかを実際に触って整理しています。
レスポンシブ・ウェブ・デザインにおいて画像最適化が意味するもの
レスポンシブ・ウェブ・デザインにおける画像最適化の意味を説明します。同じソースで全端末に配るぶん、高速回線でない環境に不要な容量を送らない工夫が要ります。
LightFileチャレンジ「軽量化前のきれいな元画像はどれ？」の答え合わせ
MTDDC Meetup HOKKAIDO 2018 のブースで出題した「軽量化する前の元画像はどれ？」クイズの答え合わせです。正解は25人、見分けられた人は42%でした。
JPEG2000について相談されたので、使われていない理由を調べてみた
ECサイトで JPEG2000 を使えないかと相談を受けたので、なぜ普及していないのかを調べました。対応ブラウザが Safari のみであることと、再生の負荷が理由です。
無料でチェックしてみよう！異なる4つのウェブサイトでみる、トップページ表示に利用されているファイル種類の割合。
業種の異なる4つのサイトのトップページについて、表示に使われているファイルの種類と割合を調べました。自分のサイトで同じことを確かめる手順も紹介します。
どれもこれも使いやすい！外部サービスのウェブパフォーマンス計測ツールまとめ
外部サービスとして使えるWebパフォーマンス計測ツールを3つ紹介します。いずれも導入が簡単で、有料版にも試用期間があるため、まず測ってみたいときに向いています。
MT東京-47で「あなたのサイトは何秒？」というLTをしてきました
MT東京とオウンドメディア勉強会のコラボイベントで「あなたのサイトは何秒？」というライトニングトークをしました。表示速度の測り方と、当日の会場の様子をお伝えします。
ウェブパフォーマンスをモニタリングするCalibreは、ファーストビューの様子を動画でキャプチャしてくれるのがイイ！
Webパフォーマンスを継続的に計測するツール Calibre を紹介します。設定はサイト側に何も埋め込まず数分で済み、ファーストビューが表示される様子を動画で確認できます。
スマホでアクセスした時に、ファーストビューの表示までどのくらいかかる？WebPagetestですぐに調べてみよう！
WebPagetest を使って、スマホでアクセスしたときにファーストビューが出るまで何秒かかるかを調べる手順です。回線や端末を指定して、実際に近い条件で測れます。
合成モニタリングツール New Relic を試してみる
Webパフォーマンスの定点観測に New Relic を使う方法を紹介します。サーバー監視で知られるツールですが、フロントエンドの表示性能も視覚的にわかりやすく追えます。
Webパフォーマンスは、RAILモデルで計測する。ユーザーファーストで考える最適化。
表示速度を体感ではなく数値で捉えるための RAIL モデルを説明します。Response・Animation・Idle・Load の4つの観点で、ユーザー中心に性能を見る考え方です。
LightFile Simulatorに、最適化後のページを実際に見られる体験機能を追加
LightFile シミュレータに体験機能を追加しました。数値のレポートだけでなく、最適化したあとのページを実際に開いて、表示の速さと画質をその場で確かめられます。
スマホ表示の高速化とダイエットは似ている。続けるにはサポートが要る
表示高速化が進まない理由を、ダイエットになぞらえて考えました。やり方は公開されているのに手が付かない。続けるために何が要るのかを、技術の話抜きで整理します。
Googleのスピード スコアカードでECサイトの機会損失を算出する
Google が公開した Speed Scorecard と Impact Calculator を使い、読み込み速度の遅れがECサイトの売上にどれだけの機会損失を生むかを試算しました。
LightFileをCDNと併用してサイト表示高速化（画像最適化）の相乗効果を！
CDNを入れているから表示速度は大丈夫、という誤解について説明します。CDNは配信を速くしますが画像そのものは軽くならないため、画像最適化と併用すると効果が重なります。
画像が24%〜92%を占めるという事実。日本の鉄道会社Webサイトのトップページをチェックしてみた。
日本の鉄道会社11社のトップページを調べたところ、ダウンロード容量に占める画像の割合は24%から92%でした。画像の重さがページ全体をどれだけ左右するかがわかります。
WebPってなに？Googleが作った軽くて透過も使える画像フォーマット
Google が作った画像フォーマット WebP を説明します。JPGより軽く、PNGのように透過も扱えます。対応ブラウザの状況と、導入すると容量がどう変わるかを確かめる方法も紹介します。
画像最適化処理はシステムにまかせて自動化！作業フローを変えずに確実に最適化しましょう。
画像最適化を人の作業に頼ると、担当者が忙しいときに漏れます。作業フローを変えずにシステム側で自動的に最適化する考え方と、現場でよくある悩みを整理しました。
画像処理（画像軽量化）を行う３つのメリット。ファイルサイズ削減で、表示高速からコストダウンまで！
画像を軽量化すると得られる3つのメリットを順に説明します。表示が速くなること、転送量が減ること、そして転送量が減った結果クラウドの費用が下がることです。
画像最適化ツールLightFileのご紹介
画像最適化ツール「LightFile」の紹介です。画質をきれいなまま軽量化することで、表示の高速化とクラウドの転送量削減を両立します。サービスの基本情報をまとめました。
モバイルファーストインデックス開始。スマホの読み込み速度をどう改善するか
Google のモバイルファーストインデックスが始まりました。読み込み速度がモバイル検索の順位に影響するとされる中で、スマホ向けにまず何をすべきかを整理します。
LightFileシミュレータβ版を公開。画像がどこまで軽くなるかひと目で分かる
ページで使われている画像がどこまで軽くなるかを試せる「LightFile シミュレータ」β版を公開しました。画像単体でもページ全体でも、削減できる容量と画質を確かめられます。
スマホ表示最速王決定戦！CMSプロレスvol.03に参加してきました！
「第3回CMSプロレス ウェブサイト表示速度 最速王者決定戦」の参加レポートです。Test My Site での計測結果と、当日その場で行った高速化の実装について報告します。
スマホ表示の最速王決定戦！CMSプロレス vol.03は、とにかく速い人が勝つ！
ロフトワーク主催「第3回CMSプロレス ウェブサイト表示速度 最速王者決定戦」に参加します。Google の Test My Site で計測して速い方が勝ちという、シンプルな対戦のルールを紹介します。
たった5分でスマホ表示を速くする。画像が軽くなれば表示は速くなる
スマホの表示を速くしたいけれど何から手を付けるか、という方に向けて、画像の軽量化を5分で始める方法を説明します。LightFile なら導入後は自動で処理し続けます。
Chrome DevToolsのPerformanceパネルで3G回線の表示時間を測る
Chrome DevTools の Performance パネルで回線速度を擬似的に落とし、3G回線ではページが何秒で表示されるかを確かめる方法です。高速回線では気づけない遅さを再現できます。
Chrome拡張「Page Load Time」で表示時間を手軽に計測する
今見ているページの表示時間を、クリックひとつで確かめられる Chrome拡張「Page Load Time」を紹介します。DevTools ほどの情報は要らないときに手軽に使えます。
PC向けとスマホ向けでこんなにファイルサイズがかわる？！トップページのスライダー画像を調べてみた
トップページのスライダー画像が、PC向けとスマホ向けでどれだけ容量が違うかを実測しました。PC向け240KBに対しスマホ向けは35KBと、約85%も軽くできる余地があります。
Chrome デベロッパーツールのNetworkパネルで読み込み画像を調べる
Google Chrome のデベロッパーツールの Network パネルで、開いているページがどんな画像を何KB読み込んでいるかを調べる手順を説明します。表示が重い原因を特定する最初の一歩です。
PageSpeed Insightsで分かるのは表示サイズの適否まで
Google PageSpeed Insights の使い方と、レポートの読み方を説明します。このツールでわかるのは画像の表示サイズが適切かどうかで、画質の軽量化はさらに別の余地として残ります。
パフォーマンスをあげよう！デジタル時代におけるWebパフォーマンスが速いことのメリット
Webの表示が速いと何が得なのかを、Akamai のリテールレポートなどの調査データから整理しました。スマホが当たり前になった今、表示速度が売上や離脱にどう効くのかを説明します。
速いは正義！dev.toにみるウェブページ表示高速化の画像最適化手法をみてみた
表示の速さで話題になったエンジニア向けサービス dev.to が、どんな画像最適化をしているのかを調べました。実際に配信されている画像の形式やサイズから、高速化の手口を読み解きます。