20 petua untuk mengoptimumkan prestasi CSS

Artikel ini membincangkan 20 kaedah untuk mengoptimumkan CSS, bertujuan untuk meningkatkan kelajuan pemuatan, memudahkan pembangunan dan meningkatkan kecekapan. Menurut laporan arkib HTTP terkini, terdapat masalah yang meluas sumber redundansi di laman web, laman web median memerlukan 1700kb data, 80 permintaan HTTP, dan ia mengambil masa 17 saat untuk memuat sepenuhnya pada peranti mudah alih. Panduan lengkap untuk mengurangkan berat halaman menyediakan pelbagai cadangan, dan artikel ini akan memberi tumpuan kepada pengoptimuman CSS. Walaupun CSS biasanya bukan penyebab isu prestasi, laman web biasa hanya menggunakan 40kb CSS yang bertaburan dalam lima helaian gaya, masih ada ruang untuk pengoptimuman, dan mengubah cara CSS digunakan juga dapat meningkatkan prestasi laman web.

mata utama

• Gunakan alat penyemak imbas dan penganalisis dalam talian: Gunakan platform dalam talian seperti Alat Pemaju Pelayar dan Google Pagespeed Insights untuk mengenal pasti dan menyelesaikan masalah pemuatan CSS yang perlahan.
• lebih disukai untuk penambahbaikan utama: Dayakan http/2, gunakan mampatan gzip, dan gunakan CDN untuk mengendalikan sumber yang lebih besar, meningkatkan kelajuan pemuatan dengan ketara.
• Gunakan kesan CSS dan bukannya gambar: Gunakan CSS dan bukannya gambar untuk mencapai kesan visual, seperti bayang -bayang dan kecerunan, untuk mengurangkan saiz muat turun dan meningkatkan pemeliharaan.
• Minimumkan overhead fon: Hadkan penggunaan fon tersuai, pilih hanya gaya dan ketebalan yang diperlukan, dan pertimbangkan untuk menggunakan fon sistem untuk mengurangkan masa pemuatan.
• Melaksanakan amalan CSS yang cekap: Gunakan kaedah susun atur moden seperti Flexbox dan Grid untuk meminimumkan kod CSS dan mengelakkan sifat mahal untuk memudahkan prestasi dan penyelenggaraan.

1. belajar menggunakan alat analisis

Isu prestasi tidak dapat diselesaikan melainkan anda tahu masalahnya. Alat pemaju penyemak imbas adalah titik permulaan yang terbaik: Mula dari menu atau tekan

f12 , ctrl shift i atau safari pada macOS Cmd alt i . Semua pelayar menawarkan ciri -ciri yang sama, dan alat ini akan dimuat perlahan pada halaman yang kurang baik! Walau bagaimanapun, tab yang paling berguna termasuk yang berikut ... tab Rangkaian memaparkan gambarajah air terjun muat turun sumber. Untuk hasil terbaik, lumpuhkan caching dan pertimbangkan untuk melambatkan kelajuan rangkaian. Cari fail yang memuat turun perlahan atau menyekat sumber lain. Pelayar biasanya menyekat penyemak imbas apabila fail CSS dan JavaScript dimuat turun dan dihuraikan. Tab Prestasi menganalisis proses penyemak imbas. Mulakan rakaman, jalankan aktiviti seperti Reloading Page, dan kemudian berhenti rakaman untuk melihat hasilnya. Carian: 1. Terlalu banyak susun atur/menyusun semula operasi, penyemak imbas dipaksa untuk mengira semula kedudukan dan saiz elemen halaman; 3. Komposisi Operasi, mengumpulkan bahagian yang ditarik halaman bersama untuk paparan pada skrin. Ini biasanya merupakan operasi yang memakan sumber pemproses.

Penyemak imbas berasaskan Chrome menyediakan tab "Audit" yang menjalankan alat mercusuar Google. Ia biasanya digunakan oleh pemaju aplikasi web progresif, tetapi juga menyediakan cadangan prestasi CSS.

Pilihan dalam talian

atau, gunakan alat analisis dalam talian yang tidak terjejas oleh peranti dan kelajuan dan keupayaan rangkaian. Kebanyakan alat boleh diuji dari lokasi yang berbeza di seluruh dunia:

• ujian kelajuan laman web pingdom
• Gtmetrix
• Google Pagespeed Insights
• WebpageTest

2. Kemajuan utama telah dibuat pertama

CSS tidak mungkin menjadi penyebab langsung isu prestasi. Walau bagaimanapun, ia boleh memuat sumber kelas berat yang perlu dioptimumkan dalam beberapa minit. Contohnya:

Dayakan mampatan http/2 dan gzip pada pelayan
Gunakan rangkaian penghantaran kandungan (CDN) untuk meningkatkan bilangan sambungan HTTP serentak dan salin fail ke lokasi lain di seluruh dunia
Padam fail yang tidak digunakan

imej biasanya merupakan sebab saiz halaman terbesar, tetapi banyak laman web gagal mengoptimumkan dengan berkesan:

Saiz semula imej bitmap. Imej multi-megapiksel yang diambil oleh telefon pintar peringkat kemasukan tidak dapat dipaparkan sepenuhnya pada skrin HD terbesar. Beberapa laman web memerlukan imej dengan lebar lebih daripada 1600 piksel.
Pastikan untuk menggunakan format imej yang sesuai. Umumnya, JPG adalah yang terbaik untuk foto, SVG adalah yang terbaik untuk imej vektor, dan PNG adalah yang terbaik untuk semua imej lain. Anda boleh bereksperimen untuk mencari jenis terbaik.
Gunakan alat imej untuk mengurangkan saiz fail dengan mengeluarkan metadata dan meningkatkan faktor mampatan.

iaitu, sila ambil perhatian bahawa data imej

x kb tidak bersamaan dengan kod CSS x kb. Imej binari dimuat turun selari dan memerlukan sedikit pemprosesan untuk diletakkan di halaman. Blok CSS yang diberikan dan mesti dihuraikan ke dalam model objek untuk diteruskan.

3. Gunakan kesan CSS dan bukannya gambar

jarang menggunakan imej latar belakang untuk membuat sempadan, bayang -bayang, sudut bulat, kecerunan dan beberapa bentuk geometri. Menentukan "imej" dengan kod CSS akan menggunakan jalur lebar yang kurang dan akan lebih mudah untuk diubah suai atau menghidupkan kemudian.

4. Padam fon yang tidak perlu

Perkhidmatan seperti font Google menjadikannya mudah untuk menambah fon tersuai ke mana -mana halaman. Malangnya, satu atau dua baris kod boleh mengambil beratus -ratus kilobytes data font. Cadangan:

1. hanya gunakan fon yang diperlukan.

2. hanya beban ketebalan dan gaya yang diperlukan - sebagai contoh, Roman, ketebalan 400, tiada huruf miring.

3. Hadkan set aksara sebanyak mungkin. Font Google membolehkan anda memilih aksara tertentu dengan menambahkan nilai

   ke url font - sebagai contoh, &text= untuk memaparkan "sitepoint" dalam sans terbuka. fonts.googleapis.com/css?family=Open Sans&text=SitePon

4. Pertimbangkan fon berubah -ubah, yang menentukan pelbagai ketebalan dan gaya melalui interpolasi, jadi failnya lebih kecil. Pada masa ini sokongan terhad kepada Chrome, Edge dan beberapa versi Safari, tetapi ia harus berkembang dengan pesat.

5. Pertimbangkan fon sistem operasi. Font web 500kb anda mungkin mesra jenama, tetapi jika anda beralih ke Helvetica atau Arial yang biasa digunakan, adakah sesiapa yang menyedarinya? Banyak laman web menggunakan fon web tersuai, jadi fon sistem operasi standard jauh lebih rendah daripada sebelumnya!

6. Elakkan menggunakan @import

Peraturan

@import membenarkan sebarang fail CSS dimasukkan ke dalam fail CSS yang lain. Contohnya:

/* main.css */
@import url("base.css");
@import url("layout.css");
@import url("carousel.css");

Ini seolah -olah menjadi cara yang munasabah untuk memuatkan komponen dan fon yang lebih kecil.

Ini tidak berlaku. Peraturan boleh bersarang, jadi penyemak imbas mesti memuatkan dan menghuraikan setiap fail dalam rangka. Multiple tag dalam HTML akan memuatkan fail CSS selari, yang lebih cekap - terutamanya apabila menggunakan HTTP/2: @import <link>

dengan kata lain, mungkin ada pilihan yang lebih baik ...

<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="layout.css">
<link rel="stylesheet" href="carousel.css">

Sambungan dan pemampatan
Kebanyakan alat membina membolehkan anda menggabungkan semua bahagian ke dalam fail CSS yang besar yang telah mengeluarkan ruang, komen, dan aksara yang tidak perlu. Apabila menggunakan HTTP/2, paip dan multiplex permintaan, keperluan sambungan dikurangkan. Dalam sesetengah kes, fail berasingan mungkin lebih bermanfaat jika anda mempunyai sumber CSS yang lebih kecil dan sering diubah. Walau bagaimanapun, kebanyakan laman web mungkin mendapat manfaat daripada menghantar satu fail yang segera di -cache oleh penyemak imbas. Dengan GZIP didayakan, mampatan mungkin tidak membawa kelebihan yang besar. Iaitu, tidak ada kekurangan sebenar. Akhirnya, anda boleh mempertimbangkan proses membina yang menyusun sifat secara konsisten dalam perisytiharan. GZIP boleh memaksimumkan mampatan apabila menggunakan rentetan biasa di seluruh fail.

menggunakan teknologi susun atur moden
Selama bertahun -tahun, perlu menggunakan CSS float ke halaman susun atur. Teknik ini adalah teknik. Ia memerlukan banyak kod dan margin/mengisi tweak untuk memastikan susun atur berkesan. Walaupun begitu, melainkan jika pertanyaan media ditambah, terapung pecah pada saiz skrin yang lebih kecil. Alternatif Moden:

CSS Flexbox digunakan untuk susun atur satu dimensi, yang boleh membungkus garisan ke baris seterusnya berdasarkan lebar setiap blok. Flexbox sangat sesuai untuk menu, galeri foto, kad, dan banyak lagi.

grid CSS digunakan untuk susun atur dua dimensi dengan baris dan lajur yang eksplisit. Grid sesuai untuk susun atur halaman.
• Kedua -dua pilihan lebih mudah untuk dibangunkan, menggunakan kod kurang, boleh menyesuaikan diri dengan saiz skrin, dan lebih cepat daripada rendering terapung, kerana penyemak imbas boleh menentukan susun atur terbaik secara tempatan.

Kurangkan kod CSS

8. kod yang paling boleh dipercayai dan terpantas ialah kod yang anda tidak perlu menulis! Semakin kecil stylesheet, semakin cepat muat turun dan parse. Semua pemaju bermula dengan niat yang baik, tetapi CSS mungkin membengkak dari masa ke masa kerana bilangan ciri meningkat. Lebih mudah untuk menyimpan kod lama, tidak perlu daripada mengeluarkannya dan risiko memecahkan sesuatu. Beberapa cadangan untuk dipertimbangkan:
• Berhati -hati dengan kerangka CSS yang besar. Tidak mungkin anda menggunakan kebanyakan gaya, jadi tambah modul jika diperlukan.
• mengatur CSS ke dalam dokumen yang lebih kecil (bahagian) dengan tanggungjawab yang jelas. Lebih mudah untuk mengeluarkan widget karusel jika CSS jelas ditakrifkan dalam widgets/_carousel.css.
• Pertimbangkan kaedah penamaan seperti BEM untuk membantu membangunkan komponen mandiri.
• Elakkan pengisytiharan SASS/preprocessor bersarang. Kod yang dilanjutkan secara tidak disangka -sangka mungkin semakin besar.
• Elakkan menggunakan !important untuk menimpa cascades.
• Elakkan menggunakan gaya inline dalam HTML.

alat seperti UNCSS boleh membantu menghapuskan kod berlebihan dengan menganalisis HTML anda, tetapi berhati -hati tentang keadaan CSS yang disebabkan oleh interaksi JavaScript.

9. mematuhi cascading!

Kebangkitan CSS-in-JS membolehkan pemaju untuk mengelakkan ruang nama global CSS. Biasanya, nama kelas yang dijana secara rawak dicipta pada masa membina, jadi komponen tidak boleh bertentangan. Jika CSS-in-JS meningkatkan kehidupan anda, maka terus menggunakannya. Walau bagaimanapun, adalah wajar memahami kelebihan CSS yang mengalir, dan bukannya melawannya dalam setiap projek. Sebagai contoh, anda boleh menetapkan font lalai, warna, saiz, jadual, dan medan borang yang biasanya digunakan untuk setiap elemen di satu lokasi. Ia jarang mengisytiharkan setiap gaya dalam setiap komponen.

10. pemilih yang dipermudahkan

Bahkan pemilih CSS yang paling kompleks mengambil beberapa milisaat untuk menghuraikan, tetapi mengurangkan kerumitan akan mengurangkan saiz fail dan membantu penyemak imbas. Adakah anda benar -benar memerlukan pemilih ini? !

/* main.css */
@import url("base.css");
@import url("layout.css");
@import url("carousel.css");

Begitu juga, sedar tentang bersarang yang mendalam dalam preprocessors seperti SASS, di mana pemilih kompleks boleh dibuat secara tidak sengaja.

11. berhati -hati dengan atribut mahal

Beberapa sifat menjadikan lebih perlahan daripada yang lain. Untuk meningkatkan lag, cuba letakkan bayang -bayang kotak pada semua elemen!

<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="layout.css">
<link rel="stylesheet" href="carousel.css">

Prestasi penyemak imbas akan berbeza -beza, tetapi pada umumnya, sebarang operasi yang menyebabkan pengiraan semula sebelum lukisan akan lebih mahal dari segi prestasi:

• border-radius
• box-shadow
• opacity
• transform
• filter
• menggunakan animasi CSS position: fixed
Penukaran dan animasi CSS asli sentiasa lebih cepat daripada pemandu JavaScript yang mengubah suai sifat yang sama. Animasi CSS tidak berfungsi dalam pelayar yang lebih tua seperti IE9 dan ke bawah, tetapi pengguna ini tidak akan tahu apa yang mereka hilang. Iaitu, elakkan animasi untuk animasi. Kesan halus dapat meningkatkan pengalaman pengguna tanpa menjejaskan prestasi. Terlalu banyak animasi boleh melambatkan penyemak imbas dan boleh menyebabkan penyakit gerakan di sesetengah pengguna.
12. 13. Elakkan atribut mahal untuk animasi

    Animasi saiz atau kedudukan elemen boleh menyebabkan seluruh halaman dilayari semula pada setiap bingkai. Jika animasi hanya mempengaruhi tahap sintesis , prestasi dapat diperbaiki. Penggunaan animasi yang paling berkesan:

    • opacity dan/atau
    • transform ke pan (bergerak), skala atau berputar elemen (ruang asal yang digunakan oleh elemen tidak akan berubah).

    Pelayar biasanya menggunakan GPU yang dipercepatkan perkakasan untuk memberikan kesan ini. Jika tidak ideal, pertimbangkan untuk menggunakan position: absolute untuk mengeluarkan unsur -unsur dari aliran halaman supaya mereka boleh bernyawa dalam lapisan mereka sendiri.

    14. Menunjukkan unsur -unsur mana yang akan dianimasi
    Atribut

    will-change membolehkan pengarang CSS menunjukkan bahawa unsur -unsur akan bernyawa supaya penyemak imbas dapat melakukan pengoptimuman prestasi terlebih dahulu. Sebagai contoh, untuk mengisytiharkan bahawa aplikasi itu ditukar kepada elemen:

    /* main.css */
    @import url("base.css");
    @import url("layout.css");
    @import url("carousel.css");

    Sebarang bilangan sifat yang dipisahkan koma boleh ditakrifkan. Tetapi:

    • Gunakan will-change sebagai usaha terakhir untuk menyelesaikan masalah prestasi
    • Jangan memohon terlalu banyak elemen
    • Beri masa yang cukup untuk bekerja: iaitu, jangan mulakan animasi dengan segera.
    15. Menggunakan imej SVG

    grafik vektor berskala (SVG) biasanya digunakan untuk logo, carta, ikon dan carta yang lebih mudah. Daripada menentukan warna setiap piksel seperti bitmap JPG dan PNG, SVG mentakrifkan bentuk seperti garis, segi empat tepat, dan bulatan menggunakan XML. Contohnya:

    <link rel="stylesheet" href="base.css">
    <link rel="stylesheet" href="layout.css">
    <link rel="stylesheet" href="carousel.css">

    SVGs yang lebih mudah adalah lebih kecil daripada bitmaps yang setara dan boleh diperkecil tanpa batas tanpa kehilangan kejelasan. SVG boleh digariskan secara langsung sebagai imej latar belakang dalam kod CSS. Ini mungkin sesuai untuk ikon yang lebih kecil dan boleh diguna semula dan mengelakkan permintaan HTTP tambahan. Contohnya:

    body > main.main > section.first h2:nth-of-type(odd) + p::first-line > a[href$=".pdf"]

    Tetapkan gaya SVG dengan CSS
    Lebih biasa, SVG tertanam terus ke dalam dokumen HTML:
    Ini akan menambah nod SVG terus ke DOM. Oleh itu, semua sifat gaya SVG boleh digunakan menggunakan CSS:

    *, ::before, ::after {
      box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
    }

    Bilangan kod SVG tertanam dikurangkan, dan gaya CSS boleh digunakan semula atau animasi seperti yang diperlukan. Perhatikan bahawa menggunakan SVG di dalam

    .myelement {
      will-change: transform;
    }

    tag atau sebagai imej latar belakang CSS bermakna ia dipisahkan dari DOM dan gaya CSS tidak akan berfungsi.

    img

    Elakkan menggunakan imej Base64 Bitmap
    Bitmap standard JPG, PNG, dan GIF boleh dikodkan sebagai rentetan Base64 dalam data URI. Contohnya:

    Malangnya:

    • pengekodan base64 biasanya 30% lebih besar daripada setara binari
    • Penyemak imbas mesti menghuraikan rentetan untuk menggunakannya
    • Menukar imej akan membatalkan keseluruhan fail CSS (cache)

    Semasa mengurangkan permintaan HTTP, ia jarang memberikan manfaat yang jelas -terutamanya pada sambungan HTTP/2. Umumnya, elakkan bitmaps sebaris kecuali imej tidak mungkin berubah dengan kerap dan rentetan Base64 yang dihasilkan tidak mungkin melebihi beberapa ratus aksara.

    18. Pertimbangkan kunci CSS

    Pengguna yang menggunakan alat analisis halaman Google biasanya akan melihat cadangan "inline kritikal CSS" atau "Mengurangkan render blocking stylesheets" . Memuatkan blok fail CSS, jadi anda boleh menggunakan langkah -langkah berikut untuk meningkatkan prestasi:

    1. Ekstrak gaya yang digunakan untuk menjadikan unsur -unsur di atas skrin. Alat seperti kritikal boleh membantu.
    2. Tambahkan gaya ini ke elemen <head> dalam html <style>.
    3. Gunakan JavaScript untuk memuatkan fail CSS utama secara asynchronously (mungkin selepas halaman dimuatkan).

    Teknologi ini sudah pasti meningkatkan prestasi dan boleh memberi manfaat kepada aplikasi web atau satu halaman progresif dengan antara muka yang berterusan. Untuk laman web/aplikasi lain, faedah mungkin kurang jelas:

    • "keruntuhan" tidak diiktiraf dan ia berubah pada setiap peranti.
    • Kebanyakan laman web mempunyai susun atur halaman yang berbeza. Setiap halaman mungkin memerlukan CSS kritikal yang berbeza, jadi alat bangunan menjadi penting.
    • peristiwa yang dinamik, JavaScript yang didorong oleh JavaScript boleh menyebabkan perubahan di atas skrin yang tidak diiktiraf oleh alat CSS kritikal.
    • Teknologi ini terutamanya kondusif untuk memuatkan halaman pertama pengguna. CSS di -cache ke halaman berikutnya, jadi gaya inline tambahan meningkatkan berat halaman.
    iaitu, Google akan menyukai laman web anda dan menolaknya ke kedudukan No. 1 untuk setiap istilah carian.
    (pakar "seo" boleh memetik saya. Semua orang akan tahu bahawa ini tidak masuk akal.)
    Pertimbangkan rendering progresif
    Rendering Progresif adalah teknik yang bukannya menggunakan satu fail CSS di seluruh tapak, ia mentakrifkan stylesheet yang berasingan untuk komponen individu. Setiap lembaran gaya dimuatkan segera sebelum komponen dirujuk dalam HTML:
    setiap

    /* main.css */
    @import url("base.css");
    @import url("layout.css");
    @import url("carousel.css");

    masih akan menyekat rendering, tetapi ia akan lebih pendek kerana fail lebih kecil. Halaman boleh digunakan lebih cepat kerana setiap komponen diberikan dalam rangka; Teknologi ini sesuai untuk Firefox, Edge dan IE. Chrome dan Safari mengalaminya dengan memuatkan semua fail CSS dan menunjukkan skrin putih apabila ini berlaku - tetapi ia tidak lebih buruk daripada memuatkan setiap fail dalam

    . Rendering progresif boleh memberi manfaat kepada laman web besar di mana halaman individu dibina dengan pilihan komponen yang berbeza. <link>

    20. belajar mencintai css

    Petua yang paling penting: Ketahui helaian gaya anda! Menambah banyak CSS dari stackoverflow atau bootstrap boleh menghasilkan hasil yang cepat, tetapi ia juga akan mengalir codebase anda dengan sampah yang tidak digunakan. Penyesuaian selanjutnya menjadi frustrasi sukar dan permohonan itu tidak akan menjadi cekap. CSS mudah dipelajari, tetapi sukar untuk menguasai. Jika anda ingin membuat kod klien yang sah, anda tidak boleh mengelakkan teknik ini. Memahami beberapa asas CSS boleh merevolusikan aliran kerja anda, meningkatkan aplikasi anda dan meningkatkan prestasi dengan ketara. Adakah saya kehilangan petua prestasi CSS kegemaran anda?

    soalan yang sering ditanya mengenai mengoptimumkan prestasi CSS

    Apakah faktor utama yang mempengaruhi prestasi CSS?

    Prestasi CSS dipengaruhi oleh pelbagai faktor. Pertama ialah saiz fail CSS. Fail yang lebih besar mengambil masa lebih lama untuk memuat turun dan menghuraikan, dengan itu melambatkan laman web. Faktor kedua adalah kerumitan pemilih CSS. Pemilih kompleks memerlukan lebih banyak kuasa pemprosesan untuk memadankan elemen pada halaman. Akhirnya, menggunakan animasi dan transformasi CSS juga boleh menjejaskan prestasi, terutamanya pada peranti mudah alih dengan kuasa pemprosesan terhad.

    Bagaimana untuk mengurangkan saiz fail CSS untuk meningkatkan prestasi?

    Terdapat pelbagai strategi untuk mengurangkan saiz fail CSS. Satu adalah untuk memadam gaya yang tidak digunakan. Alat seperti PurifyCSS boleh membantu mengenal pasti dan memadam CSS yang tidak digunakan. Strategi lain adalah untuk memampatkan CSS, yang menghilangkan watak -watak yang tidak perlu seperti ruang dan komen. Akhirnya, pertimbangkan untuk menggunakan alat pemampatan CSS atau membolehkan pemampatan GZIP pada pelayan untuk terus mengurangkan saiz fail.

    Bagaimanakah pemilih CSS kompleks mempengaruhi prestasi?

    pemilih CSS kompleks melambatkan laman web kerana mereka memerlukan lebih banyak kuasa pemprosesan untuk memadankan elemen pada halaman. Sebagai contoh, pemilih keturunan (mis., .parent .child) lebih mahal daripada pemilih kelas (mis., .class). Sebagai peraturan, pemilih harus disimpan sebagai mudah dan spesifik yang mungkin untuk meningkatkan prestasi.

    Apakah kesan animasi dan penukaran CSS terhadap prestasi?

    Animasi dan transformasi CSS boleh menjejaskan prestasi dengan ketara, terutamanya pada peranti mudah alih dengan kuasa pemprosesan terhad. Mereka boleh menyebabkan susun atur susun atur dan redraws, yang boleh melambatkan laman web. Untuk meningkatkan prestasi, pertimbangkan untuk menggunakan atribut will-change untuk memberitahu penyemak imbas terlebih dahulu yang atribut dan elemen akan animasi.

    Bagaimana untuk mengoptimumkan CSS untuk peranti mudah alih?

    Mengoptimumkan CSS untuk peranti mudah alih melibatkan pelbagai strategi. Pertama, pertimbangkan untuk menggunakan pertanyaan media untuk memberikan gaya yang berbeza berdasarkan ciri -ciri peranti. Kedua, elakkan animasi dan transformasi yang kompleks yang melambatkan prestasi pada peranti mudah alih. Akhirnya, pertimbangkan untuk menggunakan imej responsif dan pemuatan malas untuk mengurangkan jumlah data yang anda perlukan untuk memuat turun.

    Alat apa yang boleh saya gunakan untuk mengukur prestasi CSS?

    Anda boleh menggunakan pelbagai alat untuk mengukur prestasi CSS. Wawasan Rumah Api Google dan Pagespeed dapat memberikan gambaran keseluruhan prestasi laman web, termasuk CSS. Di samping itu, panel prestasi alat pemaju Chrome dapat membantu anda mengenal pasti dan mengoptimumkan CSS yang mahal.

    Bagaimana CSS mempengaruhi SEO?

    Walaupun CSS sendiri tidak secara langsung menjejaskan SEO, ia secara tidak langsung akan menjejaskan kedudukan anda. Laman web pemuatan perlahan (biasanya disebabkan oleh CSS yang tidak dapat dioptimumkan) boleh membawa kepada pengalaman pengguna yang buruk, yang boleh menjejaskan SEO anda secara negatif. Di samping itu, Google merawat kelajuan halaman sebagai faktor ranking, jadi mengoptimumkan CSS dapat membantu meningkatkan SEO anda.

    Bagaimana menggunakan preprocessor CSS untuk meningkatkan prestasi?

    preprocessors CSS seperti SASS dan kurang dapat membantu meningkatkan prestasi dengan membolehkan anda menulis lebih cekap dan mudah untuk mengekalkan kod. Mereka menyediakan ciri -ciri seperti pembolehubah, bersarang, dan campuran yang mengurangkan jumlah kod yang anda perlukan untuk menulis dan menjadikannya lebih mudah untuk dikendalikan.

    Apakah CSS kritikal dan bagaimana ia meningkatkan prestasi?

    CSS kritikal adalah jumlah minimum menyekat CSS yang diperlukan untuk menjadikan kandungan di atas skrin laman web. Dengan mengenal pasti dan menggabungkan CSS kritikal, anda boleh mempercepatkan rendering awal halaman anda, dengan itu meningkatkan prestasi persepsi.

    Bagaimana untuk mengoptimumkan penghantaran CSS?

    Mengoptimumkan penghantaran CSS melibatkan pelbagai strategi. Pertama, pertimbangkan untuk merenung CSS kecil terus ke HTML untuk mengelakkan permintaan HTTP tambahan. Kedua, kelewatan CSS bukan kritikal untuk mengurangkan sumber menghalang sumber. Akhirnya, pertimbangkan untuk menggunakan HTTP/2 untuk menyampaikan fail CSS dengan lebih cekap.

    Atas ialah kandungan terperinci 20 petua untuk mengoptimumkan prestasi CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!