Meningkatkan Prestasi PWA: Panduan Pengoptimuman CSS

Artikel ini akan meneroka bagaimana untuk meningkatkan prestasi aplikasi web progresif (PWA) dengan ketara melalui pengoptimuman CSS. Kami akan belajar bagaimana untuk menghapuskan CSS yang tidak digunakan, CSS laluan kritikal yang tidak digunakan, dan memampatkan kod akhir. Teknologi ini juga sesuai untuk laman web dan aplikasi biasa.

Mata utama:

Pengoptimuman CSS dapat meningkatkan prestasi PWA dengan membuang CSS yang tidak digunakan, CSS laluan kritikal yang tidak disengajakan, dan pemampatan kod.
Google Open Source Audit Tool Lighthouse boleh membantu mengenal pasti peluang untuk pengoptimuman CSS.
alat seperti PurifyCSS boleh mengeluarkan gaya CSS yang tidak digunakan dan mengurangkan saiz fail CSS. Alat seperti pengekstrak CSS kritikal boleh mengekstrak dan selaras peraturan CSS utama, mengurangkan bilangan permintaan HTTP dan jumlah kod parsing penyemak imbas.
fail CSS boleh dicegah daripada menyekat rendering dengan memuatkan fail CSS pada akhir halaman menggunakan JavaScript selepas DOM sudah siap.

Contoh PWA dan Audit

Untuk demonstrasi, kami akan menggunakan contoh PWA yang mudah (kod ini tersedia dalam repositori GitHub, atau mengakses versi dalam talian secara langsung). PWA ini menggunakan bootstrap v4 yang tidak dikompresi untuk gaya CSS dan memaparkan satu set jawatan yang diambil dari API JSON yang dijana secara statik.

PWA mengandungi elemen utama berikut:

Fail Prestasi (manifest.json): Menyediakan maklumat penyemak imbas mengenai aplikasi web, seperti nama, keterangan, ikon, URL permulaan, dll.
Pekerja Perkhidmatan: cache shell aplikasi (memaparkan minimum HTML, CSS, dan JavaScript antara muka pengguna) dan Proxys semua permintaan rangkaian.
https: PWA mesti menyediakan perkhidmatan melalui sumber yang selamat.

Gunakan Google Lighthouse untuk semakan

Lighthouse adalah alat pengauditan sumber terbuka yang dibangunkan oleh Google yang boleh digunakan untuk meningkatkan prestasi, kebolehcapaian dan SEO laman web dan PWA.

Dalam tab "Audit" alat pemaju Chrome, Akses Lighthouse, masukkan alamat PWA (contohnya:

), jalankan audit dan lihat laporan.

https://www.techiediaries.com/unoptimizedpwa/

Cadangan pengoptimuman disediakan dalam laporan mercusuar, seperti mengurangkan penyekatan CSS, menghapuskan peraturan CSS yang tidak digunakan, dan memampatkan CSS.

Pengoptimuman CSS: Keluarkan peraturan CSS yang tidak digunakan

Lighthouse menunjukkan bahawa 96% CSS dalam sampel PWA tidak digunakan. Kita boleh menggunakan PurifyCSS untuk menghapuskan CSS yang tidak digunakan ini.

Memasang PurifyCSS:

npm install -g purify-css

Jalankan PurifyCSS:

purifycss styles/bootstrap.css index.html -o styles/purified.css -i

Kurangkan penyekatan rendering CSS

kita boleh mengekstrak CSS kritikal menggunakan pengekstrak CSS kritikal (sambungan Chrome) dan menyamakannya ke dalam fail index.html.

Compress CSS

fail CSS boleh dimampatkan menggunakan alat seperti cssnano atau csso.

memasang cssnano dan postcss cli:

npm install cssnano Buat fail postcss.config.js dan konfigurasikan cssnano. npm install postcss-cli --global

Jalankan perintah mampatan:

postcss styles/bootstrap.css > styles/bootstrap.min.css pemuatan lewat bootstrap menggunakan JavaScript

Muatkan fail CSS menggunakan JavaScript pada akhir halaman untuk mengelakkan penyekatan menyekat.

Hasil yang dioptimumkan dan alat lain

Jalankan audit rumah api sekali lagi untuk melihat peningkatan prestasi.

Alat lain yang tersedia termasuk: CSSO, kritikal, UNCSS, purgecss, dll.

Ringkasan

Prestasi PWA boleh diperbaiki dengan ketara dengan mengeluarkan kod berlebihan, sumber -sumber kritikal sebaris dan memampatkan CSS.

FAQ

Artikel ini juga merangkumi soalan yang sering ditanya mengenai pengoptimuman CSS dan prestasi PWA, yang meliputi strategi pengoptimuman CSS, kaedah pengukuran prestasi, peranan pekerja perkhidmatan, pengoptimuman imej, penghindaran kesilapan biasa, kebolehcapaian PWA, pengoptimuman enjin carian dan perbandingan antara PWA dan Aplikasi web tradisional.

(nota: Oleh kerana gambar tidak dapat diproses secara langsung, laluan gambar tetap tidak berubah. Sila pastikan laluan gambar betul untuk dipaparkan.)

Atas ialah kandungan terperinci Alat Pengoptimuman CSS untuk Meningkatkan Prestasi PWA. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!