Panduan Pemula ke Mercusuar

Meningkatkan prestasi laman web dan mengoptimumkan pengalaman pengguna! Artikel ini akan meneroka cara yang mendalam bagaimana menggunakan alat rumah api untuk menganalisis dan meningkatkan prestasi laman web, kebolehaksesan, SEO dan aspek lain untuk meningkatkan kedudukan laman web dan penglibatan pengguna.

Mata utama:

Lighthouse adalah alat sumber terbuka Google untuk menganalisis prestasi laman web, kebolehcapaian, SEO, dan lain -lain, dengan itu meningkatkan kedudukan laman web dan rayuan pengguna.
Penambahbaikan prestasi secara langsung berkaitan dengan kedudukan SEO yang lebih tinggi dan penglibatan pengguna yang lebih baik, dan masa pemuatan cepat adalah penting.
Menggunakan Lighthouse dengan alat pemaju Chrome sangat mudah dan membolehkan semakan prestasi, kebolehcapaian, SEO, dan amalan terbaik dalam tetapan mudah alih atau desktop.
Metrik Prestasi Utama di Lighthouse termasuk Cat Kandungan Pertama (FCP), Masa Interaktif Pertama (TTI), dan Cat Kandungan Maksimum (LCP), yang penting untuk mengekalkan penglibatan dan kepuasan pengguna.
• Ciri -ciri kebolehaksesan Lighthouse membantu memastikan orang kurang upaya juga boleh menggunakan laman web ini, sehingga meningkatkan kemasukan.
• Audit Mercusuar Biasa boleh membantu mengenal pasti dan membetulkan isu laman web, meningkatkan pengalaman pengguna secara keseluruhan dan selaras dengan amalan terbaik pembangunan web.

Salah satu ciri umum laman web global teratas ialah: pengalaman pengguna yang sangat baik. Antaranya, prestasi adalah penting. Pengguna lebih suka laman web pemuatan cepat. Sekiranya masa pemuatan terlalu lama, pengguna mungkin akan pergi dan berpaling untuk mencari alternatif yang lebih mudah.

Meningkatkan prestasi laman web dapat meningkatkan kedudukan SEO (lebih banyak pada artikel ini) dan meningkatkan kadar klik dan penukaran. Oleh itu, jika anda ingin mendapatkan lebih banyak jualan, pengguna berdaftar, atau lalu lintas, anda mesti pastikan terlebih dahulu bahawa laman web melakukan sehingga standard.

Lighthouse adalah alat sumber terbuka Google. Sebagai sebuah syarikat yang terkenal dan dipercayai, hasil Google lebih dipercayai daripada alat lain. Selain itu, sebagai enjin carian Google telah memimpin jalan selama dekad yang lalu, kedudukan tinggi dalam enjin carian Google mungkin membawa lebih banyak trafik. Akibatnya, mendapat skor yang lebih tinggi dalam alat audit prestasi Google boleh meningkatkan kedudukan laman web anda dalam hasil carian.

Sebagai tambahan kepada sokongan Google, kecemerlangan rumah api juga merupakan hasil terperinci, sentiasa memberi tumpuan kepada kepentingan pengguna. Lighthouse menyediakan sejumlah besar hasil, termasuk masa pemuatan halaman, halaman (dan akhirnya laman web) keselamatan, amalan kebolehcapaian halaman dan pelaksanaan adalah inklusif, dan banyak lagi.

Cara menggunakan Lighthouse

Bahagian ini terlebih dahulu akan memperkenalkan cara paling mudah untuk menganalisis dan memeriksa skor web menggunakan rumah api, iaitu beroperasi secara langsung melalui pelayar Chrome. Kami kemudian akan meneroka alat rumah api lain yang mungkin memberikan hasil atau pilihan yang lebih terperinci.

Menggunakan Chrome

Menggunakan Lighthouse dengan Chrome adalah cara paling mudah untuk mengukur prestasi laman web. Pertama, buka mana -mana laman web yang ingin anda ukur. Untuk demonstrasi, saya akan menggunakan hasil audit yang dijalankan di laman web saya dan di GitHub supaya kita dapat melihat pelbagai hasil sampel.

Seterusnya, buka alat pemaju dengan mengklik shift kawalan j atau f12 pada Windows/Linux, atau klik Opsyen perintah j atau fn f12

Selepas

Seperti yang anda lihat, anda boleh memilih untuk menyemak kategori untuk disertakan. Kategori ini termasuk prestasi, aplikasi web progresif, amalan terbaik, aksesibiliti, dan SEO. Anda juga boleh memilih sama ada audit berjalan pada peranti mudah alih atau desktop.

Dalam bahagian ini, kami akan melakukan empat audit, iaitu Prestasi, Amalan Terbaik, Kebolehcapaian, dan SEO, yang akan kami jalankan di desktop kami. Walau bagaimanapun, untuk hasil yang terbaik, pastikan anda menguji halaman anda di bawah keadaan yang berbeza -contohnya pada peranti mudah alih dan pada kelajuan internet yang berbeza.

Jadi, pada halaman yang ingin anda ukur, pilih empat kategori dan desktop yang disebutkan di atas dan klik "Hasilkan Laporan".

Adalah penting untuk diperhatikan bahawa kadang -kadang keputusan mungkin berbeza -beza bergantung pada sambungan internet anda. Di samping itu, kadang -kadang mercusuar mungkin memaparkan pemberitahuan bahawa beberapa sambungan boleh menjejaskan hasilnya. Jika ya, lebih baik menjalankan ujian di tetingkap yang tidak kelihatan.

Apabila Lighthouse berjalan, anda boleh mengklik pada mana -mana kategori untuk melihat laporan yang lebih terperinci.

Prestasi

Prestasi memberi tumpuan kepada cara mempercepat pemuatan laman web. Kami akan meliputi enam metrik prestasi penting, apa yang masing -masing mengandungi dan bagaimana untuk mendapatkan skor yang lebih baik dalam setiap metrik.

Lukisan Kandungan Pertama (FCP)

Lukisan Kandungan Pertama (FCP) mula mengukur dari saat pengguna menavigasi ke laman web. Ia mengukur berapa lama masa yang diperlukan untuk memuatkan kandungan DOM pertama. Kandungan DOM mungkin termasuk imej, elemen kanvas bukan putih, dan elemen SVG.

FCP diukur dalam beberapa saat. Untuk menjadikan halaman anda mempunyai skor "hijau" -yang bermaksud FCP adalah pantas -kandungan DOM pertama harus memuatkan masa sehingga 1.8 saat. Setelah masa ini melebihi, ia boleh menjadi sederhana atau lambat.

FCP adalah penting kerana ia membantu kita memahami pengguna. Seperti yang dinyatakan sebelum ini, pengguna tidak sabar dan jika mereka memuat terlalu lama, mereka akan meninggalkan laman web anda. FCP cepat boleh memastikan pengguna terlibat. Ini boleh menjadi skrin pemuatan mudah, memberitahu pengguna untuk menunggu kerana laman web akan dimuatkan.

Satu faktor yang mempengaruhi masa FCP laman web adalah font. Fon boleh dimuatkan untuk masa yang lama, dan kadang -kadang teks tidak dapat dilihat sebelum dimuatkan. Cara yang baik untuk menyelesaikan masalah ini adalah menggunakan font property font css: swap; Contohnya:

<code>@font-face {
    font-family: 'MyFont';
    font-style: normal;
    font-weight: 400; 
    src: url(MyFont.woff);
    font-display: swap;
}</code>

serentak dan mempunyai masa pemuatan yang panjang. Sumber -sumber ini akan memaksa seluruh halaman untuk menunggu mereka memuatkan sebelum memuatkan halaman sepenuhnya, yang mempengaruhi FCP kandungan DOM. Berikut adalah beberapa penyelesaian:

• adalah
  memampatkan fail JavaScript dan CSS yang digunakan, mengurangkan saiz mereka supaya tidak mengambil masa terlalu lama untuk memuatkan sumber -sumber ini. Ia bergantung kepada kerangka atau bahasa pengaturcaraan yang anda gunakan, tetapi hampir semua kerangka atau bahasa pengaturcaraan mempunyai cara untuk melakukan ini. Anda boleh menyemak petua mudah untuk memampatkan JavaScript menggunakan pelbagai kerangka popular di laman web.dev.
  Padam CSS yang tidak digunakan di laman web. Apabila saiz CSS meningkat, mengurangkan saiz fail CSS dengan mengeluarkan peraturan dan sifat yang tidak digunakan pada halaman boleh mempercepatkan pemuatan. Sekali lagi, bergantung kepada rangka kerja yang anda gunakan, ada cara yang berbeza untuk melakukan ini. Walau bagaimanapun, anda boleh menggunakan alat pemaju Chrome untuk melihat CSS yang tidak digunakan dalam tab "Liputan". Menggunakan rangka kerja seperti CSS Tailwind (yang menggunakan mekanisme pemetik pokok untuk mengurangkan gaya CSS, dan bukannya kembung laman web anda dengan banyak gaya yang tidak boleh anda gunakan) dapat membantu mempercepat pemuatan laman web.
  Kurangkan masa tindak balas pelayan. Ini boleh dicapai dengan menggunakan permintaan tak segerak untuk melaksanakan logik yang diperlukan untuk memuatkan halaman, cache nombor yang sering digunakan oleh pelayan, atau mengoptimumkan kod pelayan untuk mendapatkan hasil yang diinginkan lebih cepat.
  Apabila anda melakukan audit prestasi, jika halaman anda mempunyai masalah dengan fon, sumber menghalang kandungan, CSS yang tidak digunakan, atau isu -isu lain yang disebutkan di atas, Lighthouse akan menyerlahkan setiap fail yang menyebabkan masalah dan memberikan cadangan untuk penambahbaikan. Sebagai contoh, jika fon menghalang penglihatan teks, Lighthouse akan memaparkan fail fon yang menyebabkan masalah dan bagaimana masalah penetapan akan mempercepatkan masa FCP halaman.
  Berikut adalah contoh laporan audit GitHub yang menunjukkan fail CSS sebagai "sumber penyekatan".

  

  Apabila anda membaca seluruh metrik, anda menyedari bahawa ia bergantung kepada hasil metrik ini sedikit sebanyak. Oleh itu, sangat penting untuk mendapatkan skor FCP yang baik.

  (penunjuk prestasi yang tinggal di teks asal dan bahagian lain ditinggalkan di sini)

  Ringkasan

  Meningkatkan prestasi laman web adalah langkah penting dalam proses pembangunan. Jangan sekali -kali mengabaikan atau memandang rendah. Menyediakan laman web yang cepat, boleh diakses dan baik dalam enjin carian boleh meningkatkan trafik laman web dan meningkatkan pengguna atau jualan berdaftar. Lighthouse adalah alat sumber terbuka yang sangat baik yang memberikan pandangan dan analisis yang komprehensif untuk membantu anda memperbaiki laman web anda dan menarik lebih banyak pengguna.

  (bahagian Soalan Lazim dalam teks asal ditinggalkan di sini)

Atas ialah kandungan terperinci Panduan Pemula ke Mercusuar. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!