Webペヌゞの読み蟌みを高速化4぀の画像最適化戊略のテスト





サむトのペヌゞ読み蟌み速床の䜎䞋ず、コンバヌゞョンの枛少に䌎うバりンス率の増加ずの間の匷い盞関関係に぀いお、統蚈が繰り返されおいたす。 「肥倧化した」ペむロヌド最適化が䞍十分な画像ず冗長なHTMLコヌドによっおサむトの速床が䜎䞋しおいるず蚀っおも、アメリカを発芋するこずはできたせん。これにより、サヌバヌは䞍芁な䜜業を匷制されたす。この䜜業の巚倧な局は、画像の最適化の問題に関連しおいたす。 



正しく遞択された画像は、それ自䜓で泚目を集め、コンバヌゞョンを増やし、゜ヌシャルネットワヌクやその他の蚪問者ずのやり取りに関する情報を広めるのに圹立ちたす。したがっお、それらは匕き続きWebペヌゞに積極的に投皿されたす。しかし、これがこれらのペヌゞの読み蟌み速床にどのように圱響するかは興味深い質問です。それはすべお最適化戊略に䟝存したす。



画像は静的コンテンツであるずいう論文に䟝存する戊略はあたり効果的ではないず思いたす私はこのアむデアを発展させ、蚘事党䜓で議論したす。珟圚、モバむルデバむスはむンタヌネットトラフィックの倧郚分を占めおいたすが、問題がありたす。これらのデバむスは、サむズ、画面解像床、オペレヌティングシステム、およびアプリケヌション゜フトりェアブラりザなどが異なりたす。 Webペヌゞをすばやく䜜成する方法そしお、任意のプラットフォヌムに正しくロヌドし、同時に同じように芋えるようにする方法は



この蚘事では、開発段階、プロゞェクトアセンブリ、および/たたは完成したWebサむトの保守段階で、画像最適化の゜リュヌションを削枛したす。 



確かに、䞀郚の最適化戊略は、蚭蚈ず開発のプロセスを倧幅に耇雑にするだけでなく、メンテナンスの頭痛の皮を远加する可胜性がありたす。私は䞀般的に、組み立お䞭のリ゜ヌスず時間の浪費の増加に぀いお沈黙しおいたす。画像を最適化するための倚くの方法ずツヌルがありたす。しかし、それらのいく぀かは、耇雑で反埩的なプロセスを自動化せずに䜿甚するのは簡単ではありたせん。 4぀の戊略を怜蚎し、さたざたなデバむスに察しおより適切に自動化しお柔軟な動的な画像最適化を行うこずができる戊略を芋぀けたす。



4぀の戊略をテストしたす。たず、画像の最適化を行わずに、すべおのブレヌクポむントず画像オプションを含む単玔な適応コヌドをサヌバヌにフィヌドしたす。次に、ビルド段階での最適化に぀いお芋おいきたす。ここでは、特別なツヌルずサヌビスが必芁なむメヌゞのバリ゚ヌションの準備に圹立ちたす。3番目の戊略は、実行時の最適化です。ペヌゞを送信する前に、自動化されたツヌルたたはオンラむンサヌビスが、特定のテンプレヌトに埓っお、たたはブラりザヌからの情報に基づいお、画像に最適化を適甚したす。最埌の戊略は、他の専門サヌビスを通じお取埗したデバむスずブラりザヌに関する情報を䜿甚しお、最適化された画像を生成および配信するこずです蚘事の最埌でそれらに぀いお確実に説明したす。



泚意ネタバレ









デバむス固有の画像最適化戊略が最良の結果をもたらしたす。この蚘事では、各戊略を実装するこずの長所ず短所、およびそれらがWebアプリケヌション開発プロセスに䞎える圱響に぀いお説明したす。



画像最適化の最終的な目暙は、Webペヌゞの読み蟌み速床を向䞊させるこずです。 Google PageSpeedInsight を䜿甚しおペヌゞを監査しおいたす。これにより、個々の戊略の有効性を簡単に分析できたす。䞊で曞いたように、モバむルペヌゞを監査したす。



戊略1最適化なしのレスポンシブコヌド



画像の最適化を䜿甚せずに暙準のレスポンシブコヌドを䜿甚したした。ブラりザは、画面サむズに基づいお、サむズの異なる同䞀の画像のセットから倚かれ少なかれ適切なオプションを遞択するだけです。さたざたなサむズの画像のコヌドには、いく぀かのブレヌクポむントがありたす。それらは、携垯電話、タブレット、デスクトップコンピュヌタヌのディスプレむサむズによっお決たりたす。



しかし、ここでも問題がありたす。そのような構成は䜕千もあり、毎日さらに倚くの構成がありたす。ブレヌクポむントをどんどん远加する必芁がありたす。ただし、これにはより倚くの開発時間が必芁であり、コヌドベヌスの過成長に぀ながり、将来的には混乱や゚ラヌに぀ながりたす。 



srcset属性に4぀のブレヌクポむントがある䟋を次に瀺したす。



<img srcset = "image-1920.jpg 1920w、



  image-1280.jpg 1280w、image-640.jpg 640w、image-480.jpg 480w"サむズ= "最小幅36em50vw、100vw" src = " image-320.jpg "alt ="レスポンシブ画像構文 "/>

次に、プロゞェクトに含める こずができるこのコヌドの量に぀いお考えたす... 



さらに、リストされおいる各サむズの画像を個別に䜜成する必芁がありたす。これには時間がかかり、远加のストレヌゞスペヌスも必芁です。



CSSメディアク゚リを䜿甚しお応答性を実装するこずもできたす。たたは、newずelementsを䜿甚するこずもできたす <source>



。ここで、<picture>は、1぀以䞊の<sourcegt芁玠ず1぀の<imggt芁玠のコンテナです。ただし、これらのアプロヌチのすべおがスケヌラブルな゜リュヌションを可胜にするわけではありたせん。



最埌に、これらのアプロヌチでは、デバむスの詳现は考慮されおいたせん。このようなコヌドを曞くたびに、䜿甚するブレヌクポむントず必芁な画像サむズを掚枬しようずしおいるだけです。さらに、今日うたく遞択したオプションが明日機胜するずいう保蚌はありたせん。



利点



  • ゜フトりェアを賌入したり、远加の゜フトりェアやサヌビスのサブスクリプションにお金を払ったりする必芁はありたせん。
  • 十分に文曞化された暙準に基づいおレスポンシブコヌドを曞くのは比范的簡単です。 


短所



  • さたざたなサむズの画像を保存するには、远加のスペヌスが必芁です。
  • このような「適応型倚分散」を実装するには、远加の時間ず劎力が必芁です。
  • コヌドの成長ずそのメンテナンスの耇雑さ。
  • このコヌドは、すべおのブラりザで同じように機胜するわけではありたせん。
  • デバむスコンテキストに䟝存したせん。
  • スケヌリングには、個別のCDNコンテンツ配信ネットワヌクが必芁です。
  • 新しいデバむスや画像圢匏などの完成には長い時間がかかりたす。


詊隓結果





テストでは、圧瞮なしでも、最適な圢匏を遞択しなかったこずが瀺されおいたす。そしお、私の画像は倧きすぎたす。





戊略2ビルド時の最適化 



画像バリ゚ヌションの䜜成を容易にする1぀の方法は、Kraken、 Compressor.io、mozjpeg、squoosh などの特殊な画像線集たたは圧瞮サヌビスを䜿甚するこず です。



画像ずサヌビスプロセスをアップロヌドし、サヌバヌ䞊の画像を最適化したす。次に、プロゞェクトで最適化された画像を䜿甚できたす。非可逆たたは可逆圧瞮、サむズ倉曎、ダりンスケヌリングなど、暙準たたはカスタムの最適化蚭定を蚭定できたす。䞀郚のサヌビスでは、必芁なサむズに応じお、同じ画像の耇数のバヌゞョンを䞀床に提䟛できたす。



壊れたものを探しお、GruntたたはGulpビルダヌを䜿甚しお画像を最適化した堎合はどうなり たすかこれを行うには、ビルド䞭に実行する適切なタスクを割り圓おるだけで十分です。画像凊理自䜓は、imageminjsパッケヌゞで凊理できたす 。



npmを介しおむンストヌルするこずも、コマンドラむンむンタヌフェむスを介しお䜿甚するこずもできたす。これは、さたざたな画像フォヌマットを圧瞮するためのプラグむンずモゞュラヌ゜リュヌションである䟋えば、imageminの甚途は mozjpeg JPEGずするために pngquantのPNG圧瞮のため。画像最適化オプションの蚭定は、倚くのSaaSツヌルに䌌おいたす。



この戊略を実装する堎合、最倧の負担は開発者にありたす。たず、サヌドパヌティのツヌルを調敎しお画像のバッチ凊理を自動化し、次に定期的にコヌドを曎新しお新しい画像圢匏をサポヌトする必芁がありたす。



利点



  • 画像の最適化は倖郚サヌバヌで実行されたす。
  • サヌビスは画像を十分迅速に凊理したす。
  • 最適化制埡は、開発および展開ワヌクフロヌに組み蟌むこずができたす。
  • サヌビスには、最適化パラメヌタヌを蚭定するための䟿利なむンタヌフェヌスがありたす。
  • かなり豊富な機胜を備えた倚くの無料ツヌルたたは無料プラン。


短所



  • ここでも、適応型倚分散を実装するには倚くの時間がかかりたす。
  • デバむスのコンテキストサむズ、画面解像床などにはただ䟝存しおいたせん。
  • 倚くの画像を保存するためのスペヌスがただ必芁です。
  • ただCDNが必芁です。
  • APIを介しおサヌドパヌティ補品ずの統合をさらに実装するには、さらに倚くの工数が必芁です。
  • 画像の新しいバリアントが衚瀺されるたびに、既存のバリアントに察しお最適化プロセス党䜓を実行する必芁もありたす。





詊隓結果





ポむントに関しおは、最初の戊略よりもわずかに優れおいたす。圧瞮に関する苊情は萜ち着きたしたが、フォヌマットず倧きすぎるサむズに぀いおの苊情は残っおいたす。





総ペむロヌドが1.4MBに枛少したこずに泚意するこずが重芁です。これは、戊略のない゜リュヌションよりも80少なく、アダプティブコヌドのある戊略よりも50少なくなりたす。 



戊略3実行時の最適化



特定のデバむスからペヌゞにアクセスするず、ブラりザはHTTPヘッダヌ付きのリク゚ストをサヌバヌに送信したす。ヘッダヌには、アクセスコンテキストず画像圢匏に関する情報が栌玍されたす。



ランタむム最適化は、応答コンテンツがブラりザヌに送信される盎前にサヌバヌ䞊で実行されたす。この最適化の目暙は、送信されるデヌタ量を枛らしおWebペヌゞの読み蟌みを高速化するこずです。 



たずえば、Chromeブラりザのヘッダヌは次のようになりたす



。image/ avif、image / webp、image / apng、image / *、* / *; q = 0.8



クラむアントヒントの登堎により、さらに倚くの情報を転送できたす。たずえば、DPRデバむスのピクセル比、「ピクセル密床」、解像床ず同様の倀およびビュヌポヌト幅画面幅などのフィヌルド。



クラむアントヒントは、ブラりザがHTTPリク゚ストヘッダヌで、受信するコンテンツの皮類をサヌバヌに通知するためのプロトコルです。クラむアントヒントは、ブラりザに関する情報を含むHTTPリク゚ストヘッダヌにフィヌルドを远加したす。このプロトコルの重芁な機胜の1぀は、ペヌゞに必芁な画像のサむズに぀いおサヌバヌに通知するこずです。



ランタむムオプティマむザは、このデヌタを䜿甚しお、画像を圧瞮する方法ず、画像を出力する圢匏を決定したす。ただし、柔軟なサむズ倉曎を行うには、ブレヌクポむントに基づいお適応ロゞックを手動で実装する必芁がありたす。



これらのタスクは、CloudinaryやimgixなどのSaaSオプティマむザヌによっお実行されたす。これらのプラットフォヌムには通垞、むメヌゞサヌバヌたたはプロキシがコンテンツを最適化する最適な方法を決定するずきに自動最適化オプションがありたす。ただし、APIを䜿甚しお通垞は単玔なURLパラメヌタヌを䜿甚しお最適化パラメヌタヌを自分でカスタマむズするこずもできたす。



ImgIxは、キャッシュに远加する前にリアルタむムの画像凊理を可胜にするCDNAmazon CloudFrontアドオンです。 ImgIxは、画像凊理に必芁なすべおの機胜に加えお、モノクロ、ブラヌ、ハヌフトヌンなどの倚くの远加機胜を提䟛したす。



倚くの堎合、このようなサヌビスはCDNずしおも機胜したす。たた、Cloudinaryには独自のDAMデゞタル資産管理システムがありたす。



すべおが正垞ですが、そのようなオプティマむザはただデバむスコンテキストを分析できたせん。HTTPヘッダヌは、ナヌザヌ゚ヌゞェントのデヌタを䌝達し、たずえばAndroidデバむスのChromeブラりザからペヌゞが開かれたこずを通知するこずができたす。しかし、これだけでは十分ではありたせん。それが電話であるかタブレットであるか、そしおその察角線の画面解像床は䜕であるかに぀いおは䜕も蚀われおいたせん。 



画像は、独自のリ゜ヌスではなく、プラットフォヌムのサヌバヌにも保存されたす。ただし、通垞、新しいむメヌゞの堎合に備えお、ある皋床の䜙裕を持っおディスク容量の割り圓おが固定されおいたす。



利点



  • 画像を最適化するために必芁な劎力はごくわずかです。
  • run-time CDN ;
  • , , DAM ;
  • URL;
  • , /
  • , ;


:



  • , ;
  • src , , -;
  • - ;
  • 通垞、最初のリク゚ストでは動䜜が遅くなりたす。これは、サヌビスがサヌドパヌティの゜ヌスからむメヌゞを取埗しおから、キャッシュをたったく䜿甚せずに最適化する必芁があるためです。


詊隓結果





圧瞮ずフォヌマットに関する苊情はほずんどなくなりたしたが、それでも

サむズに問題がありたす。





前の2぀の戊略ず比范するず、ペむロヌドは88枛少しおいたす。今ではわずか897KBです。



戊略4デバむスコンテキストに合わせお最適化



前の戊略ず同様に、むメヌゞサヌバヌを備えたサヌビスが必芁です。動的な状況䟝存の最適化には、リク゚ストヘッダヌを䜿甚する必芁がありたす。たずえば、ブラりザはHTTPリク゚ストでAcceptを介しおAVIFのサポヌトを宣蚀できたす。次に、サヌビスは、AVIF圢匏でどのような画像を衚瀺するかを怜蚎したす。そしお、ここから「魔法」が始たりたす。



たずえば、ImageEngineサヌビスに぀いお考えおみたす 。WURFL jsラむブラリを䜿甚しお、アクセスコンテキストからデバむスに関する完党な情報を取埗できたす。 ..。ブラりザずOSに加えお、デバむスの正確なメヌカヌずモデル、および画面の特性解像床、PPI、その他倚数を刀別できたす。たた、すべおのサヌビスが機胜するずは限らない、save-dataヘッダヌを含むクラむアントヒントもサポヌトしたす。



これにより、このようなオプティマむザヌは、ペむロヌドず画質の最適なバランスを確保しながら、あらゆる堎面でより適切な画像オプションを提䟛できたす。



これらのサヌビスは、CDNを䜿甚しお、画像配信を高速化し、キャッシュヒット率を向䞊させたす。このアプロヌチは、画面パラメヌタが異なるデバむスが非垞に倚いため、むンタヌネットのモバむルセグメントで倧きな利点がありたす。



この戊略では、コヌドを完成させる必芁はほずんどありたせん。imgタグのsrc属性倀を最適化サヌビスにリンクするこずで、それらを曎新するのは簡単です。そしおそれがすべおです。 



利点



  • 開発ずメンテナンスに最小限の劎力を必芁ずしたす。
  • 効果的に構成しお忘れるこずができたす自動最適化蚭定を䜿甚する堎合。
  • URLのディレクティブを䜿甚した画像の自動および手動最適化。
  • 最高の品質を維持しながら、画像ペむロヌドを最倧限に節玄できたす。
  • この戊略を実装しお、ほんの数分で䜿い始めるこずができたす。
  • 最適化サヌビスは通垞、最高の䟡栌/垯域幅比を提䟛したす。
  • コヌドベヌスの過成長はありたせん。適応コヌドもブレヌクポむントもありたせん。


短所



  • src , , - ( ); 
  • ;
  • , , .






これで、Google PageSpeedInsightsは満足しおいたす。 



ほずんどの指暙は倧幅に改善されたした。サヌビスは、新しい画像圢匏たずえば、アクセスコンテキストに応じお最適に圧瞮されたAVIFを䜿甚しお自動的に開始 されたした。さらに、画面サむズが異なるず、画像の長さず幅が自動的に倉曎され、拡倧瞮小されたす。



総ペむロヌドは玄95枛少したした。







そしお、あなたは幞せになりたす



ご芧のずおり、すべおの戊略には長所ず短所がありたす。画像最適化サヌビス、特にデバむスコンテキストに基づくサヌビスには、確かに優䜍性がありたす。



3番目ず4番目の戊略では、むメヌゞの䜜成、保守、保存の段階で、問題を最小限に抑えお開発プロセスを合理的に構築できたす。さらに、耇雑でスケヌラブルでないレスポンシブコヌドを曞く必芁はありたせん。画像の最適化は、新しいビゞネス芁件ずニヌズを満たすために確実か぀柔軟に機胜したす。



APIたたは単玔なURLパラメヌタを䜿甚しお調敎を行うこずができるため、画像最適化蚭定を制埡できなくなる心配はありたせん。



もちろん、あなたはそのような喜びのためにお金を払わなければならないでしょう。しかし、サヌビスの代衚者は、個人だけでなく䞭小䌁業にも安䟡な料金プランが提䟛されるこずを保蚌したす。






Macleodのクラりド VDSは、りェブサむトのホスティングに最適です。



䞊蚘のリンクを䜿甚するか、バナヌをクリックしお登録するず、任意の構成のサヌバヌをレンタルした最初の月が10割匕になりたす。






All Articles