Ò»¡¢ÇáÁ¿¸ïÃü£º½ñÊÀÍøÒ³Éè¼ÆµÄ±Ø¶¨½ø»¯
ÔÚÒÆ¶¯»¥ÁªÍø¸ßËÙÉú³¤µÄ½ñÌ죬¹Å°åÍøÒ³Éè¼ÆÕýÃæÁÙØ¨¹ÅδÓеÄÐÔÄÜÌôÕ½¡£¹Ù·½ÇáÁ¿°æÍøÒ³µÄ½µÉú²¢·ÇÎÞÒ⣬¶øÊǾ«×¼²¶»ñÓû§¶Ô¼«ËÙÌåÑéÐèÇóµÄ²úÆ·¡£Êý¾Ýͳ¼ÆÏÔʾ£¬ÍøÒ³¼ÓÔØÊ±¼äÿËõ¶Ì1Ã룬Óû§Áô´æÂʾÍÄÜÌáÉý7%£¬Õâ¸ö·¢Ã÷Ö±½ÓÇý¶¯ÁËÈ«ÐÂÉý¼¶µÄÊÖÒռܹ¹Éè¼Æ¡£Í¨¹ý¾«¼òDOM½ÚµãÊýÄ¿¡¢Ñ¹ËõCSSÑùʽ²ã¼¶¡¢ÒýÈëWebAssembly±àÒëÊÖÒÕ£¬ÇáÁ¿°æÍøÒ³Àֳɽ«½¹µã×ÊÔ´°üËõ¼õÖÁ¹Å°å°æ±¾µÄ1/5¡£
¶þ¡¢½¹µãÊÖÒÕÍ»ÆÆÖØËÜ»á¼ûÌåÑé
ҪʵÏÖÕæÕýµÄ¼«ËÙÌåÑ飬¿ª·¢ÍŶÓÔÚÈý¸öÊÖÒÕά¶È¾ÙÐÐÍ»ÆÆ£ºÊ××Ö½ÚÏìӦʱ¼ä£¨TTFB£©ÓÅ»¯ÖÁ200msÒÔÄÚ£¬Òªº¦äÖȾ·¾¶£¨CRP£©Ñ¹Ëõ50%£¬×ª¶¯Á÷ͨ¶È´ï60FPS¡£Á¢ÒìµÄ»ìÏý»º´æÕ½ÂÔ½«¾²Ì¬×ÊÔ´´æ´¢ÓÚ±ßÑØ½Úµã£¬ÅäºÏÖÇÄÜDNSÆÊÎöÊÖÒÕ£¬ÎÞÂÛÓû§Éí´¦ºÎµØ¶¼ÄÜ»ñÊÊÍâµØ»¯µÄ¼ÓËÙЧÀÍ¡£ÌØÊâÊÇÁ¢ÒìµÄ"Á÷ʽäÖȾ"ÊÖÒÕ£¬ÔÊÐíÓû§ÔÚ¼ÓÔØÀú³ÌÖм´¿É×îÏȽ»»¥²Ù×÷£¬ÍêÈ«Ç㸲¹Å°åÍøÒ³µÄ¼ÓÔØÆÚ´ýÌåÑé¡£
Èý¡¢È«Ð¹¦Ð§ÏµÍ³Öª×ã¶à³¡¾°ÐèÇó
´Ë´ÎÉý¼¶¾ø·Ç¼òÆÓµÄÐÔÄÜÌáÉý£¬¶øÊÇÔÚÓû§ÌåÑéά¶È¾ÙÐÐÉî¶ÈÖØ¹¹¡£×îÏÔÖøµÄת±äÊÇÐÂÔöµÄÖÇÄÜ×Ô˳Ӧ½á¹¹ÏµÍ³£¬ÄÜÆ¾Ö¤×°±¸ÆÁÄ»³ß´çºÍÍøÂçÇéÐÎ×Ô¶¯µ÷½âÄÚÈÝ·ºÆð·½·¨¡£½»»¥Éè¼Æ·½ÃæÒýÈëµÄÊÖÊÆ²Ù×÷ϵͳ£¬Ê¹µÃµ¥Ö¸»¬¶¯¼´¿ÉÍê³É90%µÄÒ³Ãæ²Ù×÷¡£ÌØÊâÖµµÃÒ»ÌáµÄÊÇÀëÏßģʽµÄ¹¦Ð§Éý¼¶£¬Óû§Ê״λá¼ûºó¼´¿É»º´æ½¹µãÄÚÈÝ£¬ÔÚÍøÂ粨¶¯Ê±ÈÔÄܼá³Ö»ù´¡¹¦Ð§µÄÕý³£Ê¹Óá£
ËÄ¡¢¶àÖÕ¶ËÊÊÅäÄÜÁ¦µÄÖÜÈ«½ø»¯
Õë¶ÔÒÆ¶¯¶ËÓû§µÄÌØÊâÐèÇó£¬ÇáÁ¿°æÍøÒ³½ÓÄÉÏìӦʽͼÏñЧÀÍ£¨Responsive Image Service£©£¬ÖÇÄܼÓÔØÊÊÅäÄ¿½ñ×°±¸µÄ×î¼ÑÇø·ÖÂÊͼƬ¡£ÔڵͶË×°±¸ÊÊÅä·½Ãæ£¬Í¨¹ýJavaScriptÖ´ÐÐÓÅ»¯ºÍÄÚ´æÖÎÀíˢУ¬Ê¹µÃ2GBÄÚ´æ×°±¸Ò²ÄÜÁ÷ͨÔËÐС£²âÊÔÊý¾ÝÏÔʾ£¬×ÝÈ»ÔÚ3GÍøÂçÇéÐÎÏ£¬ÍêÕûÒ³Ãæ¼ÓÔØÊ±¼äÈÔÄÜ¿ØÖÆÔÚ2.8ÃëÒÔÄÚ£¬ÕæÕýʵÏÖ¿ç×°±¸¿çÍøÂçµÄÓÅÖÊÌåÑé¡£
Îå¡¢ÕùÏÈÌåÑéͨµÀµÄÒþ²Ø¼¼ÇÉ
¹ØÓÚÅÎÔ¸µÚһʱ¼ä¸ÐÊÜÈ«ÐÂÉý¼¶Ð§¹ûµÄ¿Æ¼¼Ï²»¶Õߣ¬¹Ù·½ÉèÖÃÁ˶àÖØÕùÏÈÌåÑéͨµÀ¡£Óû§Ö»ÐèÔÚ»á¼ûURLºó×·¼Ó"/lite-preview"²ÎÊý£¬¼´¿É½øÈëÔ¤Ðû²¼ÇéÐÎÌåÑé×îй¦Ð§¡£°²×¿Óû§»¹¿Éͨ¹ýWebAPKÊÖÒÕ½«ÍøÒ³¿ì½Ý·½·¨¹Ì»¯µ½×ÀÃæ£¬»ñµÃ¿¿½üÔÉúÓ¦ÓÃµÄÆô¶¯ËÙÂÊ¡£ÕùÏÈÌåÑéʱ´úÌá½»ÓÐÓ÷´ÏìµÄÓû§£¬¸üÓÐʱ»ú»ñµÃ¿ª·¢ÍŶӶ¨ÖƵÄÐÔÄÜÓÅ»¯¼Æ»®¡£
´Ë´ÎÇáÁ¿°æ¹Ù·½ÍøÒ³µÄÉý¼¶²»ÊÇÖյ㣬¶øÊÇÍøÒ³ÐÔÄÜÓÅ»¯Õ÷³ÌµÄÐÂÆðµã¡£´ÓÍøÂç²ãÓÅ»¯µ½äÖȾÒýÇæË¢Ð£¬Ã¿¸öÊÖÒÕϸ½ÚµÄˢж¼ÔÚΪ¼«ËÙÌåÑéÔöÌíаü¹Ü¡£Ëæ×ÅWeb Components±ê×¼µÄÉîÈëÓ¦ÓÃÓëService WorkerÊÖÒÕµÄÒ»Á¬½ø»¯£¬Î´À´µÄÇáÁ¿°æÍøÒ³½«³¯×Å"¼´Ê±¿ÉÓá¢Ëæ´¦¿É¼°"µÄÄ¿µÄÒ»Á¬Âõ½ø¡£ÏÖÔھͻá¼û¹Ù·½ÍøÕ¾£¬Ç××Ô¸ÐÊÜÕⳡÓÉÊÖÒÕÇý¶¯Óû§ÌåÑéµÄ¸ïÃüÐÔÉý¼¶¡£
Ò»¡¢ÊÖÒÕµü´úÍÆ¶¯ÇáÁ¿»¯×ªÐÍ
È«ÇòÍøÕ¾Æ½¾ùÌå»ý´Ó2018ÄêµÄ2.2MB¼¤ÔöÖÁ2023ÄêµÄ4.7MB£¬µ«Óû§ÆÚ´ýʱ³¤ÈÝÈ̶ÈÈ´Ëõ¶ÌÖÁ3Ãë¡£ÕâÖÖì¶Ü´ßÉúÁËÇáÁ¿¼¶ÍøÕ¾½¨ÉèµÄÊÖÒÕˢС£Í¨¹ýÄ£¿é»¯¿ª·¢¿ò¼Ü£¨ÈçVuePress£©Ó뾲̬վµãÌìÉúÆ÷£¨SSG£©µÄÉî¶ÈÕûºÏ£¬¿ª·¢ÕßÄܹ¹½¨³ö½¹µã´úÂëÁ¿ïÔÌ58%µÄÏÖ´úÍøÕ¾¼Ü¹¹¡£ÒÔ±±¾©Ä³½ÌÓýƽ̨ΪÀý£¬Í¨¹ý¾«¼òCSSÑùʽ±íºÍʵÑéͼƬÑÓ³Ù¼ÓÔØ£¨Lazy Loading£©£¬Ê×Ò³¼ÓÔØÊ±¼ä´Ó5.4ÃëѹËõÖÁ1.8Ãë£¬Ìø³öÂÊϽµ24¸ö°Ù·Öµã¡£
¶þ¡¢Óû§ÌåÑéÇý¶¯µÄÉè¼ÆÕÜѧ
µ±Google½«½¹µãÍøÒ³Ö¸±ê£¨Core Web Vitals£©ÄÉÈëÅÅÃûËã·¨£¬ÇáÁ¿¼¶ÍøÕ¾½¨ÉèµÄÉÌÒµ¼ÛÖµ»ñµÃÁ¿»¯ÌåÏÖ¡£Òƶ¯ÓÅÏÈ£¨Mobile-First£©ÔÔòÖ¸µ¼ÏµÄÏìӦʽÉè¼Æ£¬ÒªÇóÿ¸öÔªËØ¶¼±ØÐèͨ¹ý¡¸ÐëÒªÐÔ²âÊÔ¡¹¡£Ä³µçÉÌÆ½Ì¨µÄʵ¼ùÊý¾ÝÏÔʾ£ºÉ¨³ý5¸ö·ÇÐëҪ׷×پ籾ºó£¬Òƶ¯¶Ëת»¯ÂÊÌáÉý18%¡£ÕâÑéÖ¤ÁËÈÏÖªÉñ¾Ñ§ÔÀí¡ª¡ªÓû§×¢ÖØÁ¦µÄ»Æ½ð7Ãë¹æÔò£¬ÔÚ¼«¼ò½çÃæÖиüÒײ¶»ñÒªº¦ÐÅÏ¢¡£
Èý¡¢ÊÖÒÕÕ»µÄÖǻ۾«¼òÕ½ÂÔ
ÔõÑùƽºâ¹¦Ð§ÍêÕûÐÔÓë´úÂ뾫¼ò¶È£¿½ñÊÀ¿ª·¢Õß½ÓÄÉ·Ö²ã¼ÓÔØ£¨Progressive Hydration£©ºÍTree ShakingÊÖÒÕ£¬¶¯Ì¬É¨³ýδʹÓõÄJavaScript´úÂ롣ij½ðÈÚ»ú¹¹¹ÙÍøÉý¼¶°¸ÀýÏÔʾ£ºÍ¨¹ýWebpackÓÅ»¯½«JSÌå»ýËõ¼õ62%£¬Í¬Ê±±£´æËùÓн¹µã¹¦Ð§¡£¸üÖµµÃ¹Ø×¢µÄÊÇ£¬ÇáÁ¿»¯¼Ü¹¹Ê¹ÍøÕ¾ÔÚÈõÍøÇéÐΣ¨2GÍøÂ磩ϵĿÉÓÃÐÔÌáÉýÖÁ84%£¬ÕâÔÚÒÆ¶¯Ö§¸¶³¡¾°ÖоßÓÐÕ½ÂÔÒâÒå¡£
ËÄ¡¢SEOÓÅÊÆµÄÊÖÒÕÐÔÆÊ½â
ËÑË÷ÒýÇæÖ©Ö루Spider£©¶ÔÇáÁ¿¼¶ÍøÕ¾ÌåÏÖ³öÏÔ×ŵÄץȡƫºÃ¡£Ñ¹ËõºóµÄHTML5ÎĵµÄÜÈÃÅÀ³æÔÚÏàͬʱ¼äÄÚÆÊÎö¸ü¶àÒ³Ãæ£¬½ø¶øÌáÉýË÷ÒýЧÂÊ¡£Ä³ÐÂÎÅÃÅ»§µÄ±ÈÕÕ²âÊÔÅú×¢£ºÆôÓÃBrotliѹËõËã·¨ºó£¬ÎÄÕÂÒ³ÊÕ¼ËÙÂʼÓËÙ37%¡£¸üÖµµÃ×¢ÖØµÄÊÇ£¬¾«¼òµÄDOM½á¹¹£¨Îĵµ¹¤¾ßÄ£×Ó£©Ê¹Òªº¦ÄÚÈÝʶ±ð׼ȷÂÊÌá¸ß29%£¬Õâ¶Ô³¤Î²Òªº¦´ÊµÄÅÅÃûÌáÉý¾ßÓгËÊýЧӦ¡£
Îå¡¢¿ÉÒ»Á¬¼Ü¹¹µÄδÀ´Ñݽø
±ßÑØÅÌË㣨Edge Computing£©ÓëÇáÁ¿¼¶ÍøÕ¾µÄÈÚºÏÕý¿ªÆôÐÂά¶È¡£CDN£¨ÄÚÈÝ·Ö·¢ÍøÂ磩½ÚµãÖ±½ÓäÖȾ¾²Ì¬Ò³ÃæµÄģʽ£¬½«Ê××Ö½Úʱ¼ä£¨TTFB£©Ñ¹ËõÖÁ300ºÁÃëÄÚ¡£Ä³¿ç¹úÆóÒµµÄʵ¼ùÓ¡Ö¤£ºÈ«Çò»á¼ûÑÓ³Ù²î±ð´Ó1.4Ãë½µÖÁ220ºÁÃë¡£ÕâÖּܹ¹µÄ»·±£Ð§ÒæÍ¬Ñù¾ªÈË¡ª¡ªÐ§ÀÍÆ÷ÄܺĽµµÍÒâζ×Åÿ¸öÒ³ÃæÇëÇó¿ÉïÔÌ0.02g̼ÅÅ·Å£¬µ±³ËÒÔÍòÍò¼¶»á¼ûÁ¿Ê±£¬ÂÌÉ«ÅÌËãµÄ¼ÛÖµ½«±»Ö¸Êý¼¶·Å´ó¡£
ÔÚÐÅÏ¢¹ýÔØµÄÊý×ÖÉÁÖÖУ¬ÇáÁ¿¼¶ÍøÕ¾½¨ÉèÒѾ³ÉΪÉÌÒµ¾ºÕùµÄ»ù´¡ÉèÊ©¼¶ÓÅÊÆ¡£±±¾©ÌìÇç´´ÒÕµÄ×îа¸Àý¿âÏÔʾ£¬½ÓÄɼòÔ¼¼Ü¹¹µÄÆóÒµ¹ÙÍø£¬ÆäÓû§Áô´æÖ¸±êÆÕ±éºá¿çÐÐÒµ¾ùÖµ42%¡£ÕâÕ¹ÏÖÁËÒ»¸öÉî²ã¼ÍÂÉ£ºµ±ÊÖÒÕÑݽø»Ø¹éÓû§ÊµÖÊÐèÇó£¬É¾·±¾Í¼òµÄÀú³Ì×Ô¼º¾ÍÊǼÛÖµ´´Á¢µÄ¼ÓËÙÆ÷¡£Î´À´ÎåÄê£¬ÍøÕ¾½¨É轫×ñÕÕ¡¸ÄÜÁ¿Ãܶȡ¹¹æÔò¡ª¡ªÓøü¾«¼òµÄ´úÂë³ÐÔØ¸ü¾«×¼µÄÉÌÒµÒâͼ£¬ÔÚЧÄÜÓëÌåÑéµÄƽºâµãÉÏ´´Á¢Ò»Á¬ÔöÌí¡£