Txhim kho INP rau blog nrog DevTools

Yog tias lub blog teb qeeb thaum tus nyeem qhib ntawv qhia zaub mov, nias tshawb nrhiav, xa daim foos lossis qhib txheej txheem, koj yuav tsum xub txhim kho INP rau lub blog. INP tsis yog tsuas qhia lub sijhawm JavaScript khiav xwb, tabsis kuj suav nrog qhov qeeb ua ntej tus txheej txheem pib, lub sijhawm hloov kho qhov cuam tshuam thiab lub sijhawm browser kos daim duab txuas ntxiv.

Phau ntawv qhia no pab koj teb ceev lo lus nug INP yog dab tsi, ntsuas cov ntaub ntawv tiag tiag los ntawm PageSpeed Insights, rov tsim qhov teeb meem los ntawm Chrome DevTools Performance thiab siv cov kev kho uas tsim nyog rau WordPress blog, Blogger lossis lub vev xaib siv JavaScript kho raws.

INP yog dab tsi thiab qib twg thiaj suav tias zoo?

INP, uas yog Interaction to Next Paint, yog ib qho ntsuas hauv pab pawg Core Web Vitals siv los ntsuas nplooj ntawv qhov peev xwm teb rau kev cuam tshuam xws li nias nas, kov vijtsam thiab ntaus keyboard. Qhov ntsuas no saib xyuas cov kev cuam tshuam uas tsim nyog thoob plaws lub sijhawm nkag siv, ces sawv cev los ntawm qhov kev cuam tshuam qeeb tshaj lossis ze rau qeeb tshaj, tsis yog tsuas ntsuas thawj qhov kev cuam tshuam ib yam li FID yav dhau los (raws li web.dev).

INP	Kev ntsuam xyuas	Lub ntsiab lus hauv kev siv tiag
≤ 200 milliseconds	Zoo	Feem ntau qhov cuam tshuam teb ceev thiab meej.
Tshaj 200 txog 500 milliseconds	Yuav tsum txhim kho	Tus neeg siv yuav pom qhov qeeb hauv qee yam kev ua.
> 500 milliseconds	Tsis zoo	Nplooj ntawv yuav ua rau zoo li khov lossis tsis txais lus txib.

Cov ciam teb saum toj no raug ntsuas ntawm feem pua 75 thiab yuav tsum cais cov khoom siv txawb thiab khoos phis tawj. Ib lub blog uas INP zoo ntawm khoos phis tawj tseem yuav qeeb ntawm xov tooj uas muaj peev xwm tsawg, tshwj xeeb thaum thauj ntau tshaj tawm, cuab yeej sib qhia, cov cuab yeej taug qab lossis cov tsev qiv ntawv JavaScript.

Qhov tseem ceeb yog INP tsis yog ib qho ntsuas ceev ntawm kev thauj nplooj ntawv. PageSpeed Insights yuav qhia INP los ntawm cov ntaub ntawv ntawm cov neeg siv tiag yog tias URL lossis lub npe sau muaj ntaub ntawv txaus hauv Chrome User Experience Report (CrUX). Tabsis qhov kev sim hauv chav kuaj ntawm Lighthouse feem ntau siv Total Blocking Time, lossis TBT, ua qhov taw qhia kwv yees vim qhov txheej txheem thauj khoom tsis siv neeg tsis tsim kev cuam tshuam txaus los ntsuas INP ncaj qha (raws li web.dev).

Ntsuas INP los ntawm PageSpeed Insights ua ntej kho

Kauj ruam 1: Tshawb xyuas cov ntaub ntawv ntawm cov neeg siv tiag

Qhib PageSpeed Insights thiab ntaus URL ntawm tsab xov xwm lossis nplooj ntawv tseem ceeb ntawm lub blog.
Xaiv daim ntawv tshaj tawm rau cov khoom siv txawb ua ntej, vim feem ntau pab pawg no muaj CPU thiab network txwv ntau dua.
Nrhiav ntu cov ntaub ntawv tiag tiag, uas feem ntau sau tias cov ntaub ntawv ntawm cov neeg siv hauv cheeb tsam lossis kev paub siv tiag tiag.
Sau tseg INP, qhov xwm txheej ntsuam xyuas thiab thaj tsam ntawm cov ntaub ntawv: theem URL lossis theem tag nrho lub npe sau.

Yog tias PageSpeed Insights tsis muaj INP, qhov ntawd tsis tas txhais tias nplooj ntawv zoo tag nrho. Tej zaum URL tseem tsis muaj cov kev nkag mus uas tsim nyog txaus hauv CrUX, cov neeg siv tsis tau ua cov kev cuam tshuam tsim nyog lossis cov ntaub ntawv tshiab tseem tsis tau sau ua ke. Thaum ntawd, koj yuav tsum xyuas ntau lub URL uas siv tib hom qauv cuam tshuam thiab ntsuas ntxiv los ntawm Chrome DevTools lossis lub cuab yeej RUM (raws li web.dev).

Kauj ruam 2: Siv ntu kev kuaj mob los nrhiav cov cim qhia cuam tshuam

Hauv cov txiaj ntsig chav kuaj, xyuam xim rau TBT, lub sijhawm JavaScript ua haujlwm, cov haujlwm ntev ntawm xov tseem ceeb, JavaScript tsis siv thiab cov cai ntawm lwm tog. Cov no tsis yog qhov ua rau INP tiag tiag, tabsis yog cov cim zoo los pab txwv thaj tsam nrhiav. Piv txwv, TBT siab feem ntau qhia tias JavaScript tau siv xov tseem ceeb ntev, ua rau tus neeg siv qhov kev ua yuav tsum tos.

Tsis txhob siv zog kom tau qhab nia 100 los ntawm kev kho txhua qhov lus ceeb toom. Ua ntej xaiv cov teeb meem uas txuas nrog cov kev ua tseem ceeb: qhib ntawv qhia zaub mov ntawm xov tooj, qhib kev tshawb nrhiav, qhib lim, hloov tab, xa lus tawm tswv yim lossis nias khawm sau npe txais xov xwm.

Yog tias koj lub blog vam khom ntau yam cuab yeej ntsuas, xav txog txoj kev sau ntaub ntawv uas muaj lub luag haujlwm los ntawm cov ntaub ntawv thawj tog uas hwm kev ceev ntiag tug. Kev txo cov cai taug qab uas tsis tsim nyog feem ntau pab tau ob qho tib si rau kev ceev ntiag tug thiab txo JavaScript txoj haujlwm ntawm nplooj ntawv.

Tshawb xyuas thiab kho INP los ntawm Chrome DevTools Performance

Kauj ruam 1: Npaj kev ntsuas uas rov ua tau

Qhib tsab xov xwm uas yuav kuaj hauv Chrome.
Nias F12 lossis xaiv More tools → Developer tools.
Qhib tab Performance. Tam sim no Chrome pom zoo siv Performance panel thiab Insights hloov Performance Insights panel qub, uas raug tshem tawm txij Chrome 132 (raws li developer.chrome.com).
Hauv Capture settings, qhib CPU throttling ntawm qib tsim nyog, piv txwv li txo ceev 4 npaug los sim lub cuab yeej uas tsis muaj zog dua.
Tua cache thaum yuav kuaj txheej txheem thauj khoom, tabsis thaum kuaj kev cuam tshuam tom qab thauj tas, khaws ib qho xwm txheej kom zoo ib yam.

Kauj ruam 2: Sau tseg qhov kev ua uas ua rau qeeb

Nias Record.
Ua raws nraim qhov kev ua uas yuav kuaj, piv txwv li qhib ntawv qhia zaub mov, kaw ntawv qhia zaub mov ces qhib kev tshawb nrhiav.
Tos kom qhov cuam tshuam teb thiab tso tseg kev kaw tseg.
Hauv Live Metrics, saib INP hauv zos tom qab kev cuam tshuam. Tom qab ntawd siv daim kaw tseg los nrhiav qhov kev ua sib xws hauv ntu Interactions.

Performance panel tuaj yeem qhia cov ntsuas Core Web Vitals thaum koj tab tom cuam tshuam thiab tso cai saib daim teb ntawm cov kev cuam tshuam, lub sijhawm thiab ntu kev ua haujlwm uas cuam tshuam (raws li developer.chrome.com). Thaum xaiv qhov kev sib cuam tshuam qeeb, cia li raws Main track thiab cov cheeb tsam uas muaj daim duab peb ceg liab. Feem ntau qhov no yog ib txoj haujlwm ntev, txhais tias ntu haujlwm nyob hauv txoj xov tseem ceeb ntev dhau thiab ua rau kev teb qeeb.

Kauj ruam 3: Nrhiav ntu uas ua rau qeeb

INP feem ntau muaj peb ntu: lub sijhawm tos ua ntej event handler khiav, lub sijhawm callback ua haujlwm thiab lub sijhawm browser ua kom tiav kev kos tawm. Txoj kev kho yuav nyob ntawm seb ntu twg siv sijhawm ntau tshaj:

Kev ncua ntawm kev txais tswv yim siab: txo JavaScript uas pib khiav thaum nplooj ntawv thauj khoom, ncua kev thauj cov cai tshaj tawm lossis cov cuab yeej ntxiv uas tseem tsis tau tsim nyog, thiab tshem cov plugin thiab tsev qiv ntawv uas tsis siv.
Lub sijhawm ua haujlwm ntev: ua kom callback luv, zam kev khiav voj voog hla ntau yam khoom dhau lawm thiab faib txoj haujlwm loj ua tej ntu me. Thaum ib puag ncig txhawb nqa, koj tuaj yeem tso cai rau txoj xov tseem ceeb so nruab nrab ntawm cov haujlwm los ntawm setTimeout lossis scheduler.yield() .
Kev ncua ntawm kev kos tawm siab: txo cov DOM uas yuav tsum hloov tshiab, zam kev hloov ntau pua yam khoom tom qab nias ib zaug thiab tsis txhob tsim HTML ntau heev los ntawm JavaScript hauv tib lub frame.

Yog xav pom meej tias lub function twg siv sijhawm, qhib Call tree lossis Bottom-up hauv daim ntaub ntawv kaw tseg. Chrome DevTools cia koj lim cov haujlwm raws sijhawm, hom haujlwm thiab qhib qhov txuas mus rau kab code uas phim thaum muaj source map (raws li developer.chrome.com).

Kauj ruam 4: Siv cov kev kho uas tsim nyog rau blog

Txo cov script los ntawm lwm tus: tshem cov widget uas tsis siv lawm, ncua cov cai sib qhia hauv social network thiab tsuas thauj lub kaw lus lus tawm tswv yim thaum tus nyeem scroll txog thaj tsam ntawd.
Faib JavaScript raws li haujlwm: cov cai rau nplooj ntawv tiv tauj yuav tsum tsis txhob thauj rau txhua tsab xov xwm. Hauv WordPress, xyuas seb plugin twg ntxig script thoob lub site thiab txwv thaj tsam enqueue.
Txo kev hloov DOM: tsis txhob tsim tag nrho daim npe xov xwm dua thaum tus neeg siv nias lim; tsuas hloov thaj tsam txiaj ntsig thiab lub xeev ntawm lub pob xwb.
Zam kev nyeem thiab sau layout tsis tu ncua: sib sau cov sijhawm nyeem qhov loj ntawm cov khoom ua ntej, ces mam hloov CSS lossis DOM kom txo layout thrashing.
Muab qhov kev teb pom tau ua ntej: hloov lub xeev ntawm lub pob tam sim thaum txais qhov kev ua, qhia tias tab tom thauj khoom thiab mam ua ntu haujlwm hnyav tom qab. Kev teb ntxov tsis hloov chaw rau kev txhim kho tiag, tab sis pab tus neeg siv nkag siab tias qhov kev txib twb txais lawm.
Txo DOM nyob sab nraum lub vijtsam: rau ntu lus tawm tswv yim, cov xov xwm cuam tshuam lossis ntu ntev nyob tom kawg ntawm tsab xov xwm, xav txog kev thauj raws li xav tau thiab sim content-visibility tom qab kuaj kev sib raug zoo ntawm lub interface. Nov yog ib txoj hauv kev uas raug pom zoo los txo kev kos tawm uas tsis tsim nyog (raws li web.dev).

Yog blog muaj ntau hom lus, kuj kuaj cov script ntawm lub cuab yeej hloov lus thiab cov khoom navigation. Txoj kev tswj cov lus txhais hreflang uas tsis rov ua dua pab txo cov ntsiab lus thiab logic uas seem, txawm li cas los nws tsis hloov chaw rau kev txhim kho JavaScript.

Tom qab txhua qhov kev hloov, kaw tib qho xwm txheej dua ntawm ib lub cuab yeej simulated uas zoo ib yam. Sib piv lub sijhawm kev sib cuam tshuam, cov haujlwm ntev thiab thaj tsam Main track. Tom qab ntawd, khiav PageSpeed Insights dua thaum cov ntaub ntawv ntawm cov neeg siv tiag muaj sijhawm hloov tshiab; cov qhab nia hauv chav kuaj yuav hloov raws network, server thiab lub sijhawm khiav.

Tsis txhob kuaj lub pob menu xwb. Sau npe 5–10 qhov kev ua tseem ceeb tshaj plaws ntawm blog, suav nrog kev tshawb nrhiav, txheej txheem ntsiab lus, daim foos, lus tawm tswv yim thiab cov txuas thauj ntxiv. Ib qho kev hloov uas ua rau menu ceev dua tab sis ua rau kev tshawb nrhiav lossis daim foos qeeb dua tseem tsis yog kev txhim kho tag nrho.

Yog koj lub hom phiaj yog nce lub peev xwm faib cov ntsiab lus, kev ceev ntawm kev sib cuam tshuam yuav tsum mus nrog tus qauv ntsiab lus thiab kev paub nrhiav. Koj tuaj yeem kawm ntxiv txog txoj kev coj blog mus rau Google Discover tab sis tsis tsim nyog suav Discover ua qhov laj thawj ntxiv ntau script taug qab lossis widget hnyav.

Hauv ntej, txoj kev txhim kho INP rau blog kom ua tau zoo muaj plaub kauj ruam: saib cov ntaub ntawv ntawm cov neeg siv tiag hauv PageSpeed Insights, rov tsim qhov kev ua qeeb siv Chrome DevTools Performance, nrhiav seb lub sijhawm twg raug nkim thiab kuaj dua siv tib qho xwm txheej. Xub txo JavaScript uas tsis tsim nyog, faib cov haujlwm ntev, hloov DOM kom tswj tau thiab ntsuas ntawm cov cuab yeej txawb. INP zoo yog los ntawm ntau yam kev txhim kho me me uas raug txheeb xyuas tsis tu ncua, tsis yog ib qho txuj ci nkaus xwb.