麻花豆星空天美糖心

鏂颁含鎶ヨ�霸繀閾堕潚鎶ラ亾

缃戠珯镐ц兘鎻愬崌绛栫暐锛屼粠链嶅姟鍣ㄤ紭鍖栧埌鍓嶇��鍔犻赌熺殑瀹屾暣鏂规��|

瀵逛簬渚濊禆娴侀噺鐨勭綉绔欒赌岃█锛岃�块棶槎臒搴︾洿鎺ュ奖鍝嶇敤鎴风暀瀛樹笌鍟嗕笟杞�鍖栥赌傝繎链熸煇鐭ュ悕骞冲彴閫氳绷绯荤粺鍖栦紭鍖栨柟妗堬紝鎴愬姛灏嗛�栧睆鍔犺浇鏃堕棿鍘嬬缉鑷�1.2绉掑唴锛岀敤鎴锋椿璺冨害鎻愬崌300%銆傛湰鏂囧皢娣卞叆瑙ｆ瀽鎻愬崌缃戠珯鍝嶅簲閫熷害鐨勪竷澶ф牳蹇幂瓥鐣ャ赌�

链嶅姟鍣ㄧ��镐ц兘璋冧紭瀹炴垬

鍦ㄧ綉绔欓�熷害浼樺寲浣撶郴涓�锛屾湇鍔″櫒閰嶇疆鏄�鍩虹��鏀�鎾戙�傞噰鐢∟GINX浣滀负鍙嶅悜浠ｇ悊鏈嶅姟鍣�锛岄厤鍚圚TTP/2鍗忚��瀹炵幇澶氳矾澶嶇敤浼犺緭銆傞�氳繃閰嶇疆GZIP鍘嬬缉鍙�灏嗘枃鏈�璧勬簮鍘嬬缉鐜囪揪70%锛屽悓鏃惰�剧疆鍚堢悊鐨勭紦瀛樼瓥鐣ワ細闈欐�佽祫婧愯�剧疆1骞撮暱鏈熺紦瀛橈紙Cache-Control: max-age=31536000锛夛紝鍔ㄦ�佸唴瀹归噰鐢�5鍒嗛挓鐭�缂撳瓨鏈哄埗銆傛煇妗堜緥鏄剧ず锛屽悎鐞嗛厤缃瓹DN鑺傜偣鍚庯紝浜氬お鍦板尯璁块棶寤惰繜浠�800ms闄嶈嚦120ms銆�

鍓嶇��宸ョ▼鍖栨敼閫犳柟妗�

鐜颁唬鍓嶇��浼樺寲宸插舰鎴愬畬鏁存妧鏈�浣撶郴銆傞噰鐢╓ebpack杩涜�屼唬鐮佸垎鍓诧紙Code Splitting锛夛紝灏嗛�栧睆蹇呰�佽祫婧愭帶鍒跺湪200KB浠ュ唴銆傚疄鏂藉浘鐗囨笎杩涘紡鍔犺浇鏂规�堬紝WebP鏍煎紡鍥剧墖浣撶Н杈働NG缂╁噺65%銆傞�氳繃Intersection Observer API瀹炵幇鏅鸿兘鎳掑姞杞斤紝褰撶敤鎴锋粴鍔ㄨ嚦鍙�瑙嗗尯鍩熸椂鎵嶅姞杞藉�瑰簲璧勬簮銆傛煇鐢靛晢骞冲彴鏀归�犲悗锛孡CP鎸囨爣锛堟渶澶у唴瀹圭粯鍒讹級浠�4.3s浼樺寲鑷�1.5s銆�

鍏抽敭娓叉煋璺�宥袖紭鍖�

閫氳繃Chrome DevTools鐨凱erformance闈㈡澘鍒嗘瀽锛屾秷闄ゆ覆鏌撻樆濉炶祫婧愩�傚皢鍏抽敭CSS鍐呰仈鑷矵TML鏂囨。澶撮儴锛岄潪鍏抽敭CSS寮傛�ュ姞杞姐�侸avaScript鑴氭湰缁熶竴娣诲姞async/defer灞炴�э紝纭�淇滵OMContentLoaded鏃堕棿鎻愬墠40%銆傛煇璧勮��绫荤珯鐐瑰疄鏂藉悗锛孎CP锛堥�栨�″唴瀹圭粯鍒讹級鎸囨爣鎻愬崌58%銆�

璧勬簮棰勫姞杞界瓥鐣�

杩愮敤Resource Hints鎶�鏈�瀹炵幇鏅鸿兘棰勫姞杞斤細瀵归�栧睆涓嬫柟鍐呭�逛娇鐢╬refetch锛屽�归噸瑕佷氦浜掕矾寰勯噰鐢╬reload銆傛煇绀句氦骞冲彴閫氳繃棰勫姞杞界敤鎴峰父鐢ㄥ姛鑳芥ā鍧楋紝浣块〉闈㈠垏鎹㈤�熷害鎻愬崌3鍊嶃��

鏁版嵁搴撴煡璇㈡繁搴︿紭鍖�

鍦∕测厂蚕尝镐ц兘璋冧紭涓�锛屽缓绔嬪�嶅悎绱㈠紩浣挎煡璇㈡晥鐜囨彁鍗�10鍊嶃赌傞赌氳绷贰齿笔尝础滨狈鍒嗘瀽鎵ц�岃�″垝锛屾秷闄ゅ叏琛ㄦ壂鎻忔搷浣溿赌傚皢棰戠箒璁块棶鐨勭敤鎴锋暟鎹�缂撳瓨鑷掣楸鸹寰辈躏紝Q笔厂锛堟疮绉掓煡璇㈢巼锛変粠1500鎻愬崌镊�8500銆傛煇璁哄潧绯荤粺浼樺寲鍚庯紝础笔滨鍝嶅簲鏃堕棿涓�浣嶆暟浠�220尘蝉闄嶈嚦35尘蝉銆�

绯荤粺鍖栫殑閫熷害浼樺寲闇�璐�绌挎妧鏈�鏋舵瀯鍚勫眰绾с�傛煇瑙嗛�戝钩鍙扮粡杩囦笁涓�鏈堢殑鍏ㄩ摼璺�鏀归�狅紝璺冲嚭鐜囦粠62%闄嶈嚦18%锛孏oogle绉诲姩浼樺厛绱㈠紩璇勫垎杈惧埌98鍒嗐�傛妧鏈�鍥㈤槦寤鸿��姣忓�ｅ害杩涜�孋ore Web Vitals妫�娴嬶紝鎸佺画浼樺寲LCP銆丗ID銆丆LS涓夊ぇ鏍稿績鎸囨爣锛岀‘淇濇寔缁�鎻愪緵娴佺晠璁块棶浣撻獙銆�-