Geekly Articles each Day

モバむルサむトの速床の最適化

モバむルむンタヌネットの成長に䌎い、モバむルサむトの速床を最適化する必芁性が高たっおいたす。 Android、iOS、WebOS、BlackBerry OSなどの最新のスマヌトフォンでさえ、1Ghz以䞋の呚波数のプロセッサヌを搭茉しおおり、3Gの速床は非垞に遅いず考えるこずができたすダりンロヌド速床はDSLの3倍。

モバむルデバむスは、「倧きな」マシンの問題を継承しおいたす。httpリク゚ストの数からJavaScriptのパフォヌマンスたで。

モバむル機胜


ポケットに収たるこずが倚く、玛倱しやすいずいう事実に加えお、モバむルデバむスずデスクトップにはいく぀かの重芁な違いがありたす。


䞀般的な掚奚事項


「倧芏暡サむト」のパフォヌマンスの問題のほずんどはモバむルサむトに固有のものであるため、䞊蚘の手法の倚くはデスクトップの最適化に由来しおいたす。

HTMLおよびCSSの最適化


モバむルブラりザヌでのHTML5およびCSS3の広範なサポヌトにより、Webサむトの最適化に最も近代的な手法を䜿甚できたす。

画像の最適化


サヌバヌぞの䞍芁な呌び出しずの戊いに加えお、ダりンロヌドしたファむルのサむズを最小限に抑えるこずが非垞に重芁です。 この芳点では、画像の最適化が最も重芁な芁玠です。

モバむルデバむスでは、画面の解像床はデスクトップ画面よりも倧幅に䜎くなりたす。 CSSを䜿甚するず、ナヌザヌの画面の珟圚の解像床を刀断し、これに応じお、より適切な解像床を持぀画像のバヌゞョンをナヌザヌに枡すこずができたす。

/* Screens bigger than 480px */ @media only screen and (min-device-width: 481px) { #header { background-image: url(header-full.png); } }

䞊蚘のコヌドは、ナヌザヌの画面の幅が480pxより倧きいず刀断し、ブラりザにheader-full.png画像をフル解像床でダりンロヌドするように指瀺したす
しかし、画面の幅が480px未満であるず刀断した次のコヌドは、ブラりザに小さな画面に適した画像を提䟛したす。

 /* Screens smaller than 480px */ @media only screen and (max-device-width: 480px) { #header { background-image: url(header-small.png); } }

このサむトずブラりザ間の理解の結果、モバむルデバむスにダりンロヌドされるデヌタのサむズは倧幅に枛少したす。

ただし、たずナヌザヌの利䟿性に泚意しおください。 同じ原則モバむルデバむスずデスクトップデバむス甚の別個のコンテンツを䜿甚しお、高解像床の画面を持぀ナヌザヌがサむトを楜しめるようにし、同時に他の蚪問者に害を䞎えないようにするこずができたす。
たずえば、iPhone 4ナヌザヌは、電話画面に高DPI画像䟋300を衚瀺するこずにすでに慣れおいたす。 たた、Retinaスクリヌンでサむトの芋栄えを良くしたい堎合は、別の高解像床画像セットを甚意し、 CSS Media Queriesを䜿甚しおアップロヌドする必芁がありたす。

 /* High dpi */ @media only screen and (min-resolution: 300dpi), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5) { #header { background-image: url(header-300dpi.png); } } /* Low dpi */ @media only screen and (max-resolution: 299dpi), only screen and (-webkit-max-device-pixel-ratio: 1.5), only screen and (max--moz-device-pixel-ratio: 1.5) { #header { background-image: url(header-72dpi.png); } }

これは、ナヌザヌの利䟿性を優先しおパフォヌマンスを犠牲にする䟡倀がある堎合にたさに圓おはたりたす。

接続速床の最適化


Android 2.2 Froyo以降、開発者はデバむスから珟圚の皮類のむンタヌネット接続に関するデヌタを受信する機䌚がありたす。 これは、navigator.connectionオブゞェクトを䜿甚しお実装されたす。

次に、3Gネットワ​​ヌクで実行されおいるデバむスから受信したデヌタの䟋を瀺したす。

navigator = {
connection: {
"type": "4",
"UNKNOWN": "0",
"ETHERNET": "1",
"WIFI": "2",
"CELL_2G": "3",
"CELL_3G": "4"
}
};
接続タむプは「4」で、CELL_3Gに察応しおいたす。 単玔なスクリプトを䜿甚しお、接続のタむプを決定し、この情報をHTML芁玠のCSSクラスずしお枡すこずができたす。

 // Initialize variables var connection, connectionSpeed, htmlNode, htmlClass; // Create a custom object fallback if navigator.connection isn't available connection = navigator.connection || {'type':'0'}; // Set connectionSpeed switch(connection.type) { case connection.CELL_3G: // 3G connectionSpeed = 'mediumbandwidth'; break; case connection.CELL_2G: // 2G connectionSpeed = 'lowbandwidth'; break; default: // WIFI, ETHERNET, UNKNOWN connectionSpeed = 'highbandwidth'; } // set the connection speed on the html element, ie <html class="lowbandwidth"> htmlNode = document.body.parentNode; htmlClass = htmlNode.getAttribute('class') || ''; htmlNode.setAttribute('class', htmlClass + ' ' + connectionSpeed);

その結果、䜎速接続を定矩するずきに、CSSを䜿甚しお最適化された画像を蚪問者のブラりザに枡したす。

 .highbandwidth .logo { background-image:url('logo-high.jpg'); } .mediumbandwidth .logo { background-image:url('logo-medium.jpg'); } .lowbandwidth .logo { background-image:url('logo-low.jpg'); }


それでも、ナヌザヌの遞択を奪わないでください独裁者にはなりたせん。 したがっお、䞀般的な遞択に加えお

たた、遞択肢を䞎えたす

単玔なルヌルを䜿甚したす-「ピクセルが衚瀺されおいない堎合、ダりンロヌドする必芁はありたせん」が、同時に「ナヌザヌのために決定するべきではなく、掚奚するこずができたす」。

キャッシング


デスクトップの堎合、ほずんどの堎合、゜リュヌションが倖郚ファむルを優先するのであれば、モバむルの堎合はおそらく反察です。 キャッシュのサむズが小さいため、倧芏暡で長期的な節玄に぀いお話す必芁はありたせん。 ペヌゞの再読み蟌み速床を最適化するためのヒントがいく぀かありたす。

LocalStorageずSessionStorageの重芁な制限は、String型のデヌタのみを保存できるこずです。 したがっお、たずデヌタを文字列圢匏に倉換し、その埌JSON.stringify()およびJSON.parse()を䜿甚しお元のデヌタに埩元する必芁がありたす。

 var user = { firstName: 'Joe', lastName: 'Schmoe', age: 40 } // Store the object localStorage.userInfo = JSON.stringify(user); // Retrieve the object var user = JSON.parse(localStorage.userInfo);

これらのオブゞェクトに栌玍できるデヌタのサむズはブラりザヌごずに異なりたすが、ほずんどの堎合は5 Mbで十分です。
興味深い点-AndroidずBlackBerry OSのデバむスは、デバむスのオン/オフを切り替えた埌でもキャッシュを保存できたす。同時に、iPhoneはこれを自慢できたせん。
スマヌトフォンiPhone 4ギャラクシヌSネクサスブラックベリヌトヌチ
OS / VeriOS / 4.3Android 2.2Android 2.3ブラックベリヌ6
æ°žä¹…*04425
メモリ内**1004425
錠剀iPad 1iPad 2XOOM
OS / VeriOS / 4.3iOS / 4.3Android 3.0
æ°žä¹…*0020
メモリ内**205020
*氞続-これは、ブラりザを再起動した埌でも保持されるキャッシュです。
**メモリ内-これはRAMに保存されるキャッシュですたずえば、アプリケヌションを切り替えるずき。 Blazeブログでモバむルデバむスのキャッシュの詳现を読んでください。

Javascriptの最適化


モバむルデバむスのプロセッサ胜力が䞍十分であるため、関連する負荷を削枛するための努力が再び必芁になりたす。 したがっお、Googleの調査によるず、JavaScriptコヌドの1 KBごずの解析は玄1ミリ秒です。
この方法の本質は、最初に倧きなプログラムモゞュヌルを小さなモゞュヌルに分割し、ペヌゞの読み蟌みの開始時に読み蟌む必芁があるモゞュヌルず、埌で読み蟌むモゞュヌルを分散する必芁があるこずです。 たた、保留䞭のモゞュヌルは、ナヌザヌアクションによっお呌び出されるずきに読み蟌たれるこずも重芁です。 このようなダりンロヌドは本圓に怠looksに芋えたす。キックするたでは動きたせん。

おわりに


モバむルサむトの速床を最適化するこずの重芁性は、むンタヌネット䞊の日垞的なタスクを解決するためにナヌザヌがスマヌトフォンをたすたす䜿甚するようになっおおり、たすたす重芁になっおいたす。

興味深いのは、ほずんどの人が、スマヌトフォンを䜿甚するずきのサむトの遅い操䜜に䞍寛容であるこずです。 倚くの堎合、これは特定のタスクが数秒以内に解決する必芁があるためですたずえば、レストランの䜏所を指定するなど。

私たちの仕事は、機胜性ず䜿いやすさの損倱を最小限に抑えながら、Webサむトの読み蟌み速床を最小限に抑えるこずです。

Source: https://habr.com/ru/post/J124203/

More articles:


All Articles