Cara mengoptimumkan CSS dan JS untuk laman web yang lebih cepat

Kelajuan pemuatan laman web adalah penting untuk pengalaman pengguna, yang sering diabaikan oleh pemilik laman web. Meningkatkan kelajuan pemuatan laman web dari 8 saat hingga 2 saat dapat meningkatkan kadar penukaran sebanyak 74%, yang bermaksud laman web yang perlahan mungkin kehilangan hampir separuh daripada pelanggan berpotensi mereka.

pemampatan kod, iaitu mengeluarkan aksara yang hanya digunakan untuk meningkatkan kebolehbacaan, dapat mengurangkan penggunaan jalur lebar dan meningkatkan kelajuan pemuatan halaman. Alat seperti minifier CSS dan JSCompress dapat membantu anda melalui proses ini. Selain itu, ia juga berbaloi untuk mempertimbangkan untuk melaksanakan pemuatan kod tak segerak untuk mengoptimumkan prestasi sebelum memampatkan JavaScript.

Kod berlebihan atau pendua juga boleh melambatkan laman web. Gunakan alat pemaju terbina dalam di Google Chrome untuk membantu mengenal pasti dan memadamkan sumber kod yang tidak perlu ini. Adalah penting untuk menyemak dan menghapuskan kod yang tidak digunakan untuk mengekalkan prestasi laman web yang optimum.

Artikel ini ditaja oleh Aussie Hosting. Terima kasih kerana menyokong rakan kongsi yang membuat SitePoint mungkin.

Pengalaman pengguna adalah faktor yang paling penting dalam kejayaan perniagaan dalam talian anda.

Sama ada anda menjalankan blog khusus, laman web SaaS, atau kedai dalam talian, jika anda telah merosakkan pengalaman penonton dalam beberapa cara, jangan mengharapkan untuk mengubahnya menjadi pelanggan berbayar.

Berita baiknya ialah mana -mana jenama secara sistematik dapat meningkatkan pengalaman pengguna dengan menyempitkan faktor -faktor dalam halaman tertentu.

Sebagai contoh, Loading Speed ​​ adalah isu yang kebanyakan pemilik laman web terdedah untuk terlepas pandang.

Meningkatkan kelajuan laman web anda dari 8 saat hingga 2 saat berdasarkan data kadar penukaran boleh mengakibatkan kenaikan 74% dalam kadar penukaran.

Ini bermakna laman web yang perlahan mungkin menelan belanja hampir separuh daripada pelanggan berpotensi anda. Gunakan pandangan halaman untuk mengetahui lebih lanjut mengenai keadaan

Untuk menentukan isu yang mempengaruhi kelajuan pemuatan laman web anda, anda boleh menggunakan pandangan Google Pagespeed. Ini adalah alat percuma yang secara automatik mengimbas kedua -dua versi desktop dan mudah alih laman web anda.

Sebagai tambahan kepada masalah yang dikesan, pandangan PagesPeed juga memaparkan beberapa cadangan yang boleh dilakukan.

Bagi pemilik laman web yang tidak pernah mempertimbangkan kelajuan pemuatan halaman, anda mungkin menghadapi isu -isu berikut:

Ini menunjukkan bahawa kod CSS dan JavaScript anda melambatkan laman web anda. Walaupun ini mungkin terdengar seperti pekerjaan pemaju web penuh, mereka agak mudah untuk dioptimumkan dengan bantuan alat.

Tanpa ado lanjut, berikut adalah langkah -langkah yang perlu anda ambil untuk memampatkan

sumber CSS dan JavaScript anda.

Tentukan kod untuk memampatkan

pemampatan kod merujuk kepada amalan mengeluarkan aksara yang tidak mempunyai fungsi lain daripada meningkatkan kebolehbacaan.

Sebagai contoh,

Komen sebaris

boleh membantu pemaju memahami peranan segmen kod tertentu. Walaupun ini berguna untuk semakan atau debug, mereka juga boleh meningkatkan saiz kod.

Mampatan menghilangkan aksara tambahan ini -dan dengan itu mengurangkan penggunaan jalur lebar dan meningkatkan kelajuan pemuatan halaman.

Menggunakan wawasan PagesPeed, anda boleh mengenal pasti kod yang perlu dimampatkan dengan mudah. Cukup klik Tunjukkan Cara Memperbaiki dan Mengikuti Laluan dalam Pelanggan CMS (Sistem Pengurusan Kandungan) atau klien FTP (Protokol Pemindahan Fail).

Sebagai contoh, jika laman web anda berjalan di WordPress, semua kod harus diintegrasikan ke dalam bahagian "Editor". Ini boleh didapati melalui tab Penampilan di papan pemuka utama.

Mengoptimumkan kod anda

Sekarang anda telah menemui kod yang relevan, sudah tiba masanya untuk mempelajari cara memampatkannya.

Cara paling mudah untuk memampatkan kod mungkin menggunakan alat automasi. Untuk CSS dan JavaScript, beberapa alat terbaik adalah minifier CSS dan JSCompress.

menggunakan minifier CSS

minifier CSS adalah alat percuma dan mudah yang secara automatik memampatkan sumber CSS. Anda hanya menampal kod ke dalam medan input, tetapkan tahap mampatan, dan klik Compress.

Ia boleh mengambil masa beberapa saat hingga satu minit untuk memampatkan kod bergantung pada saiz kod. Kod baru kemudiannya boleh disalin kembali ke antara muka pelanggan CMS atau FTP anda.

Petua penting:

Sebagai langkah berjaga -jaga, jangan lupa untuk membuat sandaran sebelum membuat sebarang perubahan pada kod laman web. Mewujudkan replika luar talian atau awan adalah cara mudah untuk melakukannya.

Untuk menguji jika pemampatan anda sah, jalankan analisis lain pada pandangan PagesPeed. Fail CSS yang baru dimampatkan anda tidak lagi muncul di bawah butiran "CSS Mampat".

#### Menggunakan pemuatan asynchronous pada JavaScript

pemampatan JavaScript yang betul sedikit lebih rumit berbanding dengan CSS. Sebelum menjalankan kod anda dengan JSCompress, pertimbangkan untuk melaksanakan pemuatan kod asynchronous.

juga dipanggil "memuatkan muatan" - tetapi dalam konteks JavaScript, kerja pemuatan tak segerak oleh fungsi pemuatan dinamik.

Untuk menggunakan pemuatan tak segerak, tambahkan tag "async" apabila memanggil fail .js. Ini boleh dilakukan dalam kod sumber HTML laman web anda.

Berikut adalah contoh bagaimana untuk melakukan ini:

Anda boleh merujuk artikel ini untuk maklumat lanjut tentang bagaimana ia berfungsi dan bagaimana ia digunakan. Jika anda benar -benar tidak biasa dengan HTML, baca panduan pemula ini sehingga anda berpuas hati dengan asas -asas.

Menggabungkan fail JavaScript

Satu lagi perkara yang patut disebut apabila mengoptimumkan JavaScript adalah untuk menggabungkan fail ke dalam satu halaman. Melakukannya akan mengurangkan bilangan permintaan HTTP yang dibuat oleh penyemak imbas, yang tidak dapat dielakkan akan mempercepatkan masa pemuatan.

Sebagai contoh, jangan panggil fail pelbagai .js dalam kod sumber:

<code> src=”yourscript.js” async> >
</code>

anda boleh menggunakan editor untuk menggabungkannya ke dalam fail JavaScript tunggal dan kemudian hubungi mereka sekaligus:

<code> src=”http://www.yoursite.com/menu.js”> >
 src=”http://www.yoursite.com/tools.js”> >
 src=”http://www.yoursite.com/footer.js”> > 
</code>

untuk meningkatkan lagi masa pemprosesan skrip, anda juga boleh mengamalkan menghilangkan tag "HTTP" dan "Type". Sebagai contoh, jangan gunakan:

<code> src=”http://www.yoursite.com/all.js”> >
</code>

anda hanya boleh menggunakan:

<code> src=" http: //www.yoursite.com/all.js" type="text/javascript" > ></code>

menggunakan JSCompress

Akhir sekali, menggunakan JSCompress semudah menggunakan minifier CSS. Cukup tampal kod ke dalam medan input dan klik butang "Compress JavaScript".

Seterusnya, navigasi ke tab Output untuk melihat javascript termampat:

Padam kod berlebihan

Satu lagi isu prestasi yang mungkin ada di laman web anda ialah kehadiran kod berlebihan atau pendua. Ini biasanya disebabkan oleh elemen halaman yang dipadam, menyebabkan kod itu tidak digunakan.

Cara yang baik untuk mencari kod berlebihan adalah menggunakan alat pemaju terbina dalam di Google Chrome. Ini boleh diaktifkan dengan membuka menu utama, memilih "lebih banyak alat", dan mengklik "Alat Pemaju".

Apabila melakukan ini, pastikan anda berada di halaman yang anda ingin mengoptimumkan.

Apabila alat pemaju diaktifkan, cari "liputan" dalam subseksyen "lebih banyak alat" menu tetapan.

Ini akan membuka tab "Liputan" di konsol pemaju. Di sana, klik butang Perlindungan Pengesanan untuk memulakan ujian.

Selepas ujian selesai, anda harus melihat senarai sumber kod dan bait yang tidak digunakan. Ini ditunjukkan oleh bar merah dan hijau di sebelah kanan.

Jika ini adalah kali pertama anda menyemak kod berlebihan, anda akan melihat bahawa terdapat campuran sumber CSS dan JavaScript dalam senarai. Semak semula ini untuk mengetahui apa yang tidak digunakan.

Menghapus semua sumber kod yang tidak perlu satu demi satu boleh menjadi rumit. Tetapi jika anda ingin memberikan pengalaman pengguna yang sempurna, maka ini diperlukan.

Juga, ingat bahawa kod yang tidak digunakan mungkin terkumpul dari masa ke masa, jadi jadilah masa yang lain untuk meninjau semula dan membersihkan repositori anda.

Kesimpulan

untuk bukan pemaju, mengoptimumkan laman web CSS dan kod JavaScript terdengar terlalu teknikal di permukaan. Walau bagaimanapun, dengan alat yang betul dan hosting web, anda tidak perlu menjadi pemaju web yang berpengalaman untuk mencapai matlamat ini.

Soalan Lazim untuk mengoptimumkan CSS dan JS untuk mempercepatkan laman web

Apakah faedah mengoptimumkan CSS dan JS untuk laman web?

Mengoptimumkan CSS dan JS laman web dapat meningkatkan prestasinya dengan ketara. Ia mengurangkan masa pemuatan laman web, dengan itu memberikan pengalaman pengguna yang lebih baik. Laman yang lebih cepat lebih cenderung untuk mengekalkan pelawat, dengan itu meningkatkan kadar penglibatan dan penukaran. Di samping itu, kelajuan laman web adalah faktor ranking untuk enjin carian seperti Google, jadi mengoptimumkan CSS dan JS anda juga boleh meningkatkan SEO anda.

Bagaimana untuk memampatkan fail CSS dan JS saya?

memampatkan fail CSS dan JS termasuk mengeluarkan aksara yang tidak perlu seperti ruang, rehat garis dan komen tanpa mengubah fungsi mereka. Anda boleh menggunakan alat dalam talian seperti pemampat HTML atau minifier CSS. Cukup tampal kod ke dalam alat dan ia mengembalikan versi termampat yang boleh anda ganti ke dalam fail laman web.

Apakah perbezaan antara pemuatan asynchronous dan pemuatan malas JS?

pemuatan asynchronous dan pemuatan malas adalah teknik yang mengawal bagaimana fail JS dimuatkan di laman web. Pemuatan Asynchronous membolehkan penyemak imbas terus membuat halaman apabila memuatkan fail JS. Sebaliknya, melambatkan kelewatan pemuatan fail JS sehingga dokumen HTML dihuraikan sepenuhnya. Kedua -dua teknologi boleh meningkatkan prestasi laman web, tetapi pilihan terbaik bergantung kepada keperluan khusus laman web.

Bagaimana untuk mengoptimumkan penghantaran CSS saya?

Mengoptimumkan penghantaran CSS melibatkan mengurangkan bilangan CSS yang perlu dimuatkan sebelum halaman diberikan. Ini dapat dicapai dengan merenung CSS kritikal, melambatkan CSS yang tidak kritikal, dan menghapuskan CSS yang tidak digunakan. Alat seperti PurifyCSS boleh membantu anda mengenal pasti dan memadam CSS yang tidak digunakan dalam fail.

Bagaimana caching penyemak imbas meningkatkan prestasi laman web?

penyemak imbas menyimpan fail statik laman web dalam penyemak imbas pelawat. Ini bermakna semasa lawatan berikutnya, penyemak imbas tidak perlu memuat semula fail-fail ini, dengan itu mempercepat masa memuatkan. Anda boleh mengaktifkan caching penyemak imbas dengan menambah arahan khusus ke fail .htaccess atau menggunakan plugin cache jika laman web anda menggunakan CMS seperti WordPress.

Apakah kesan pengoptimuman imej pada kelajuan laman web?

Imej biasanya menduduki bahagian terbesar saiz laman web. Dengan mengoptimumkan imej anda, anda boleh mengurangkan jumlah data yang anda perlukan untuk memuatkan, dengan itu mempercepatkan masa pemuatan halaman. Teknik pengoptimuman imej termasuk imej yang memampatkan, menggunakan format imej yang sesuai, dan melaksanakan pemuatan malas.

Bagaimana untuk mengukur prestasi laman web saya?

Terdapat beberapa alat yang tersedia untuk mengukur prestasi laman web, termasuk PageSpeed ​​Insights, GTMetrix, dan Pingdom. Alat ini menyediakan skor prestasi dan maklumat terperinci mengenai kawasan tapak yang boleh dioptimumkan untuk kelajuan.

Apakah peranan yang dimainkan oleh rangkaian penghantaran kandungan (CDN) dalam kelajuan laman web?

CDN adalah rangkaian pelayan yang terletak di seluruh dunia yang menyimpan salinan fail statik di laman web. Apabila pengguna melawat laman web anda, CDN menyampaikan fail -fail ini dari pelayan yang paling dekat dengan pengguna, mengurangkan masa yang diperlukan untuk pemindahan data dan dengan itu meningkatkan kelajuan laman web.

Bagaimana masa tindak balas pelayan mempengaruhi kelajuan laman web?

Masa tindak balas pelayan adalah masa yang diperlukan untuk pelayan untuk bertindak balas terhadap permintaan penyemak imbas. Masa tindak balas pelayan yang perlahan boleh melambatkan pemuatan laman web, memberi kesan negatif kepada pengalaman pengguna dan SEO. Anda boleh meningkatkan masa tindak balas pelayan dengan mengoptimumkan konfigurasi pelayan, menaik taraf pelan hosting, atau menggunakan CDN.

Apakah http/2 dan bagaimana ia meningkatkan kelajuan laman web?

http/2 adalah versi terbaru protokol HTTP, yang mengandungi penambahbaikan prestasi seperti multiplexing, pemampatan header dan push pelayan. Ciri -ciri ini membolehkan komunikasi yang lebih cepat dan lebih cekap antara penyemak imbas dan pelayan, dengan itu meningkatkan kelajuan laman web. Untuk mengambil kesempatan daripada HTTP/2, kedua -dua pelayan dan penyemak imbas pengguna mesti menyokongnya.

Atas ialah kandungan terperinci Cara mengoptimumkan CSS dan JS untuk laman web yang lebih cepat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!