Alat Prestasi percuma

Ujian Kelajuan Laman Web

Kami memuatkan halaman anda seperti telefon kelas pertengahan pada sambungan 4G yang perlahan, mengukur seberapa cepat kandungan utama muncul dan sejauh mana halaman melompat, serta menunjukkan apa yang menjadikannya berat. Apabila Google mempunyai data pengguna sebenar untuk laman anda, anda juga dapat melihatnya.

Percuma. Biasanya selesai dalam masa kurang daripada satu minit.

Apa yang disemak oleh alat ini

  • Telefon pada 4G perlahan

    Halaman dimuatkan dalam Chromium sebagai telefon kelas Moto G Power (412 × 823) dengan kependaman 150 ms, kira-kira 1.6 Mbps muat turun dan 750 Kbps muat naik, serta CPU 4× lebih perlahan. Ini ialah profil yang digunakan oleh Lighthouse untuk ujian mudah alih.

  • Largest Contentful Paint

    Bila imej atau blok teks terbesar dalam skrin pertama selesai dipaparkan, dan elemen mana yang terlibat.

  • Cumulative Layout Shift

    Sejauh mana kandungan yang kelihatan beralih secara tidak dijangka semasa halaman dimuatkan.

  • Total Blocking Time

    Berapa lama skrip menyebabkan pelayar terlalu sibuk untuk bertindak balas kepada sentuhan: bahagian setiap tugasan panjang yang melebihi 50 ms, dijumlahkan. Ini pengganti makmal bagi Interaction to Next Paint.

  • Apa yang dimuat turun oleh halaman

    Jumlah bait dan permintaan, dibahagikan kepada imej, skrip, CSS dan fon, serta bahagian yang datang daripada pihak ketiga.

  • Imej berat dan fail yang menyekat pemaparan

    Imej melebihi 150 KB atau jauh lebih lebar daripada ruang paparannya, serta fail CSS dan skrip yang melambatkan pemaparan pertama.

  • Data pengguna sebenar daripada Chrome

    Chrome UX Report daripada Google untuk origin anda pada telefon, pada persentil ke-75: LCP, INP dan CLS, apabila Google mempunyai trafik yang mencukupi untuk laman itu.

Apa yang tidak dapat disemaknya

  • Memberikan angka yang sama pada setiap larian. Keputusan makmal berbeza mengikut rangkaian, beban pelayan dan skrip pihak ketiga, jadi bandingkan trend dan bukannya larian tunggal.
  • Sepadan dengan PageSpeed Insights sepenuhnya. Kedua-duanya menggunakan profil telefon yang serupa tetapi dijalankan pada mesin dan rangkaian yang berbeza.
  • Mengukur INP dalam makmal. INP memerlukan interaksi sebenar, jadi ujian makmal menunjukkan TBT dan data lapangan menunjukkan INP jika ada.
  • Menunjukkan data lapangan bagi setiap laman. Chrome UX Report meliputi 28 hari terakhir dan hanya origin yang mempunyai trafik Chrome yang mencukupi.
  • Menguji lebih daripada satu halaman yang anda masukkan. Laporan Prestasi berbayar menguji 3 halaman penting dan menyusun punca mengikut keutamaan bersama pembaikannya.

Mengapa ia penting

Halaman yang terasa serta-merta pada Wi-Fi pejabat dan komputer riba yang laju boleh mengambil masa beberapa saat pada telefon kelas pertengahan dengan isyarat yang lemah. Itulah keadaan yang dicipta semula oleh ujian ini, kerana di situlah imej dan skrip yang berat memberi kesan paling buruk.

Core Web Vitals ialah ukuran Google bagi pengalaman tersebut: pemuatan (LCP), responsif (INP) dan kestabilan visual (CLS). Google menggunakannya dalam penentuan kedudukan, tetapi menyatakan bahawa pengalaman halaman yang baik tidak mengatasi kandungan yang relevan. Kesan yang lebih besar adalah pada manusia: halaman yang perlahan atau melompat-lompat kehilangan pelawat sebelum mereka sempat membaca apa-apa.

Puncanya biasanya jelas: imej hero tanpa mampatan bersaiz beberapa megabait, widget sembang yang dimuatkan sebelum kandungan, fon web yang menyembunyikan teks, atau sepanduk yang disisipkan di atas halaman selepas halaman muncul. Ujian ini menamakan elemen LCP dan fail paling berat supaya anda dapat melihat punca mana yang berkenaan.

Cara membaca keputusan

Largest Contentful Paint (LCP)
Baik jika di bawah 2.5 s, lemah jika melebihi 4 s. Jika elemen LCP ialah imej, saiz dan keutamaan pemuatannya paling penting; jika ia teks, periksa fon web dan CSS yang menyekat pemaparan.
Cumulative Layout Shift (CLS)
Baik jika di bawah 0.1, lemah jika melebihi 0.25. Skor tanpa unit yang menggabungkan seberapa banyak bahagian skrin yang bergerak dan sejauh mana ia beralih.
Total Blocking Time (TBT)
Baik jika di bawah 200 ms, lemah jika melebihi 600 ms. TBT yang tinggi meramalkan respons yang perlahan terhadap sentuhan bagi pengguna sebenar.
Bait dan permintaan
Tiada had rasmi; lihat jenis mana yang mendominasi. Imej biasanya merupakan bahagian terbesar, dan bahagian pihak ketiga yang tinggi menunjukkan kesan aplikasi, tag dan widget.
Imej berat
Setiap imej melebihi 150 KB, atau dimuat turun jauh lebih lebar daripada saiz paparannya, berserta saiz fail dan dimensinya.
Fail yang menyekat pemaparan
CSS dan skrip segerak yang mesti dimuat turun oleh pelayar sebelum ia boleh memaparkan apa-apa.
Data lapangan (persentil ke-75)
Pengguna Chrome sebenar pada telefon dalam tempoh 28 hari terakhir. Persentil ke-75 bermakna tiga daripada empat pemuatan halaman sekurang-kurangnya sepantas ini. INP baik jika di bawah 200 ms dan lemah jika melebihi 500 ms.
Tiada data lapangan
Google tidak mempunyai trafik Chrome yang mencukupi untuk origin anda. Ini tidak menunjukkan apa-apa tentang kelajuan anda; bergantunglah pada keputusan makmal.

Cara membaiki masalah yang paling biasa

  • Imej LCP yang perlahan

    Sajikan imej hero pada saiz paparannya, menggunakan srcset, dalam format WebP atau AVIF. Jangan gunakan lazy-load padanya, tambah fetchpriority="high", dan letakkannya dalam HTML sebagai elemen img dan bukannya memuatkannya daripada skrip atau latar belakang CSS.

  • Kandungan yang melompat semasa dimuatkan

    Berikan imej, video dan benaman atribut width dan height atau aspect-ratio CSS. Simpan ruang untuk sepanduk, notis kuki dan iklan, atau paparkannya sebagai tindanan yang tidak menolak kandungan ke bawah. Bagi fon web, gunakan font-display: optional atau fon sandaran yang saiznya sepadan.

  • Total Blocking Time yang tinggi

    Buang dahulu aplikasi, tag dan plugin yang tidak lagi anda gunakan; skripnya selalunya kekal walaupun anda sudah berhenti menggunakannya. Muatkan sembang, ulasan dan analitik dengan defer atau selepas halaman menjadi interaktif. Pada Shopify, semak Online Store › Themes › Customize › App embeds.

  • CSS dan skrip yang menyekat pemaparan

    Tambah defer pada skrip yang tidak perlu dijalankan sebelum paparan pertama, sisipkan secara inline sedikit CSS yang diperlukan oleh skrin pertama, dan buang helaian gaya untuk ciri yang tidak digunakan oleh halaman.

  • Imej yang terlalu berat

    Ubah saiz imej sebelum memuat naik (kira-kira 2000 px lebar sudah memadai untuk sepanduk lebar penuh) dan mampatkannya. Shopify dan WordPress boleh menyajikan versi yang lebih kecil secara automatik apabila tema memintanya, jadi pastikan tema anda menggunakan saiz imej responsif.

Soalan tentang alat ini

Mengapa keputusan saya berbeza daripada PageSpeed Insights?

Ujian makmal bergantung pada mesin, rangkaian dan masa ujian dijalankan. PageSpeed Insights menjalankan Lighthouse pada pelayan Google dan mensimulasikan sambungan yang perlahan, manakala kami mengenakan pendikitan (throttling) dalam pelayar sebenar. Jangkakan julat yang serupa, bukan angka yang sama.

Apakah LCP yang baik?

2.5 saat atau kurang bagi sekurang-kurangnya 75% pemuatan halaman, menurut web.dev. Melebihi 4 saat dianggap lemah.

Mengapa tiada data pengguna sebenar untuk laman saya?

Chrome UX Report hanya merangkumi origin yang boleh ditemui secara awam dan mendapat cukup lawatan daripada pengguna Chrome yang berkongsi statistik penggunaan. Banyak laman kecil tidak mencapai tahap itu; ujian makmal tetap menunjukkan apa yang perlu dibaiki.

Mengapa menguji pada telefon yang perlahan dan bukannya desktop?

Kerana masalah muncul di situ dahulu. Komputer riba yang laju menyembunyikan imej dan skrip berat yang memakan masa beberapa saat pada telefon kelas pertengahan, dan Lighthouse menggunakan profil telefon yang sama untuk ujian mudah alihnya.

Apa yang berlaku kepada First Input Delay?

Interaction to Next Paint (INP) menggantikan First Input Delay sebagai Core Web Vital pada Mac 2024. INP melihat kelewatan interaksi sepanjang lawatan, bukan hanya interaksi pertama.

Sumber

Alat berkaitan

Laporan Prestasi ($55, sekali bayar) bermula daripada imbasan percuma penuh dan menambah lebih banyak halaman, perubahan yang perlu dibuat bagi setiap penemuan, PDF dan ujian semula untuk mengesahkan pembaikan anda.

Tentang Laporan Prestasi