3 petua untuk mempercepatkan laman web bootstrap anda

mata utama

Muat turun hanya komponen yang diperlukan dalam pakej bootstrap. Jika ciri -ciri tertentu tidak digunakan, padamkannya untuk mengoptimumkan kelajuan.
Jangan gunakan pakej muat turun yang dipraktikkan, tetapi pilih kod sumber. Dengan cara ini, anda hanya boleh memasukkan komponen yang anda perlukan, mewujudkan lembaran gaya yang lebih leaner dan lebih cekap untuk persekitaran pengeluaran anda.
Melaksanakan teknik pengoptimuman pelanggan yang terbukti seperti menulis CSS dan kod JavaScript yang diselaraskan, memampatkan dan menggabungkan kod CSS dan JavaScript, dan mengoptimumkan saiz fail imej. Langkah -langkah ini dapat meningkatkan kelajuan dan prestasi laman web anda dengan ketara.

Pengoptimuman laman web adalah satu set teknologi sisi pelayan dan pelanggan yang direka untuk mempercepat pemuatan dan penyampaian laman web dalam penyemak imbas, dengan itu meningkatkan pengalaman pengguna.

Sekarang, pelawat terbiasa dengan kehadiran dan responsif aplikasi asli. Mereka mengharapkan laman web dimuatkan dalam 1000 milisaat. Sekiranya masa pemuatan lebih lama, kemungkinan besar mereka akan meninggalkan laman web ini.

Enjin carian sudah pasti terperangkap dengan trend ini, dan telah mempromosikannya dalam banyak cara. Malah, Google sentiasa menggunakan kelajuan halaman sebagai faktor dalam kedudukan laman web dalam carian desktop. Google mengumumkan bahawa bermula dari Julai 2018, carian mudah alih juga penting untuk mendapatkan kedudukan teratas dalam senarai hasil carian.

Bootstrap sering dikritik kerana menambah kelebihan yang tidak perlu ke laman web anda, jadi jika anda menggunakan perpustakaan UI front-end popular ini dalam projek anda, pastikan anda memberi perhatian tambahan kepada saiz halaman dan kelajuan halaman.

Dalam artikel ini, saya akan merangkumi tiga langkah pengoptimuman front-end yang boleh anda ambil untuk memastikan laman web berasaskan bootstrap anda diberikan dengan cepat dan dioptimumkan dengan baik.

Muat turun hanya pakej bootstrap yang anda perlukan

Jika anda membuat keputusan untuk menggunakan pakej muat turun bootstrap, anda harus benar -benar berfikir tentang bahagian yang anda perlukan.

Folder muat turun mengandungi perpustakaan CSS lengkap (bootstrap.css dan bootstrap.min.css) dan perpustakaan komponen JavaScript dan semua dependensi (kecuali jQuery) (bootstrap.bundle.js dan bootstrap.bundle.min.js) , dan banyak fail CSS mandiri yang mengandungi kod yang diperlukan untuk bahagian -bahagian tertentu dari toolkit UI yang popular ini.

Jika anda hanya memerlukan gaya reset CSS yang bagus, hanya gunakan bootstrap-reboot.min.css. Jika anda hanya memerlukan sistem grid yang fleksibel dan mudah digunakan, gunakan bootstrap-grid.min.css. Tidak perlu memuat turun keseluruhan rangka kerja. Sebaliknya, jika anda tahu anda ingin menggunakan segala -galanya di perpustakaan, sekurang -kurangnya pastikan untuk memasukkan versi nipis.

Begitu juga dengan kod JavaScript. Jika anda tahu bahawa anda tidak memerlukan menu drop-down, pop-up, dan tooltips dalam projek anda, gunakan bootstrap.min.js bukan bootstrap.bundle.min.js kerana anda tidak perlu memasukkan popper.js .

pilih kod sumber dan bukannya pakej muat turun precompiled

Walaupun versi terbaru Bootstrap membolehkan anda memilih bahagian yang ingin anda sertakan dalam projek anda, fail yang dipraktikkan mungkin masih mengandungi apa yang anda tidak perlukan.

Penyemak imbas masih perlu memuat turun dan memproses kod yang tidak digunakan, yang boleh menjejaskan prestasi laman web, terutamanya apabila sambungan rangkaian lambat.

cara yang lebih baik adalah memuat turun kod sumber bootstrap kerana:

• anda akan dapat memasukkan komponen apa yang anda perlukan dalam projek anda
• mana -mana bahagian perpustakaan tersuai menjadi lebih mudah dan lebih cekap tanpa mengulangi penggantian gaya
• Stylesheets yang berakhir dalam pengeluaran biasanya lebih diselaraskan.

menggunakan teknologi pengoptimuman pelanggan yang terbukti

Selain dari titik di atas, mengoptimumkan laman web berasaskan bootstrap untuk prestasi masih mesti termasuk teknologi prestasi front-end seperti mana-mana laman web lain.

Berikut adalah faktor utama untuk pengoptimuman laman web front-end yang berkesan yang dapat anda perhatikan:

Menulis CSS dan kod JavaScript yang diperkemas

Setiap watak dalam kod meningkatkan saiz akhir halaman web. Menulis CSS ringkas dan jelas CSS dan kod JavaScript sambil memastikan ia boleh dibaca tidak mudah. Walau bagaimanapun, ini harus menjadi matlamat yang setiap projek harus berusaha.

Amalan CSS yang baik termasuk menghapuskan pemilih yang tidak digunakan, kod pendua, dan peraturan over-necked. Adalah lebih baik untuk mengekalkan kod yang dianjurkan pada permulaan projek. Sebagai contoh, menggunakan panduan gaya benar -benar boleh memberi manfaat kepada proses pembangunan dan kualiti kod anda.

Di samping itu, terdapat beberapa alat yang hebat untuk membantu anda membersihkan kod anda. Pemeriksa kod seperti CSS LINT dan JSLINT boleh menyemak dokumen anda untuk kesilapan sintaks, corak pengekodan yang tidak cekap, kod yang tidak digunakan, dan banyak lagi.

memampatkan dan menggabungkan kod CSS dan JavaScript

Langkah pengoptimuman yang penting adalah untuk mengehadkan bilangan permintaan HTTP yang mesti dilakukan oleh laman web untuk membentangkan kandungannya. Setiap kali anda pergi ke pelayan untuk mendapatkan sumber memerlukan masa, yang memberi kesan negatif kepada pengalaman pengguna.

Mampatan (iaitu mengeluarkan komen dan ruang dari dokumen) dan menggabungkan fail CSS dan JavaScript kini menjadi amalan kukuh yang direka untuk menyimpan saiz fail kecil dan mengurangkan jumlah permintaan HTTP.

Jika anda ingin melihat lebih mendalam, Gary Stevens 'Bagaimana untuk mengoptimumkan CSS dan JS untuk mempercepatkan laman web adalah artikel yang hebat.

Perhatikan saiz fail imej

Bahagian paling berat laman web biasanya diwakili oleh fail imej, tetapi fail audio dan video juga memainkan peranan. Oleh itu, mengoptimumkan aset visual adalah penting untuk prestasi laman web.

Melakukan ini melibatkan dua aspek:

Pastikan anda menggunakan format imej yang betul untuk tugas di tangan.
Mampat bait berlebihan dari sumber anda sebelum memuat naik ke pengeluaran. Terdapat beberapa alat yang hebat untuk membantu anda. Semak alat dalam talian seperti TINYPNG (untuk Imej Raster (PNG, JPG, dan lain -lain) dan SSVGOMG Jake Archibald (untuk pengoptimuman SVG). Juga, pertimbangkan alat yang boleh anda pasang secara tempatan, seperti pelari tugas kegemaran anda (Grunt, Gulp, dll.).

Kesimpulan

Rendering cepat laman web adalah faktor utama dalam menentukan pengalaman pengguna laman web. Ini menjadi lebih penting apabila menilai pengalaman pengguna web pada peranti mudah alih.

Dalam artikel ini, saya menyenaraikan banyak teknologi yang memainkan peranan dalam mengoptimumkan prestasi laman web bootstrap dari perspektif pembangunan front-end.

Teknik pengoptimuman depan apa yang anda ada untuk laman web bootstrap pemuatan cepat? Tolong beritahu saya dalam komen!

Jika anda sudah mempunyai asas -asas bootstrap tetapi ingin tahu bagaimana untuk mengambil kemahiran bootstrap anda ke peringkat seterusnya, lihat kami membina laman web pertama anda dengan kursus Bootstrap 4 untuk cepat dan mudah belajar tentang kuasa bootstrap.

Soalan Lazim untuk mempercepatkan laman web Bootstrap (FAQ)

Mengapa laman web bootstrap saya lambat?

Mungkin terdapat banyak sebab mengapa laman web bootstrap anda perlahan. Salah satu sebab yang paling biasa ialah penggunaan komponen dan plugin yang tidak perlu. Bootstrap dilengkapi dengan banyak komponen dan plugin, dan jika anda tidak menggunakannya, lebih baik untuk mengeluarkannya. Sebab lain mungkin imej besar digunakan. Imej besar dapat mengurangkan kelajuan laman web. Adalah disyorkan bahawa anda mengoptimumkan imej sebelum memuat naiknya ke laman web. Akhirnya, tidak memampatkan fail CSS dan JavaScript juga boleh melambatkan laman web. Memampatkan fail -fail ini dapat meningkatkan kelajuan laman web anda dengan ketara.

Bagaimana untuk mengoptimumkan laman web Bootstrap saya untuk prestasi yang lebih baik?

Terdapat pelbagai cara untuk mengoptimumkan laman web bootstrap anda untuk prestasi yang lebih baik. Pertama, anda harus mengeluarkan sebarang komponen dan plugin yang tidak perlu. Bootstrap dilengkapi dengan banyak komponen dan plugin, dan jika anda tidak menggunakannya, lebih baik untuk mengeluarkannya. Kedua, anda harus mengoptimumkan imej sebelum memuat naiknya ke laman web. Imej besar dapat mengurangkan kelajuan laman web. Ketiga, anda harus memampatkan fail CSS dan JavaScript. Memampatkan fail -fail ini dapat meningkatkan kelajuan laman web anda dengan ketara.

Apakah pemampatan dan bagaimana ia meningkatkan kelajuan laman web?

Mampatan adalah proses mengeluarkan aksara yang tidak perlu (seperti ruang dan komen) dari kod sumber tanpa mengubah fungsi mereka. Ini mengurangkan saiz kod, dan seterusnya mengurangkan jumlah data yang perlu dipindahkan kepada pengguna, dengan itu mempercepat masa memuatkan.

Bagaimana untuk memampatkan fail CSS dan JavaScript saya?

Terdapat beberapa alat dalam talian yang tersedia untuk memampatkan fail CSS dan JavaScript anda. Alat ini mengeluarkan watak yang tidak perlu dari kod anda, mengurangkan saiznya dan meningkatkan masa pemuatan. Beberapa alat mampatan yang popular termasuk UglifyJs untuk JavaScript dan CSSNano untuk CSS.

Bagaimana untuk mengoptimumkan imej laman web bootstrap?

Terdapat beberapa cara untuk mengoptimumkan imej laman web bootstrap. Salah satu cara yang paling berkesan ialah memampatkan imej sebelum memuat naiknya ke laman web. Terdapat beberapa alat dalam talian yang tersedia untuk memampatkan imej anda tanpa merendahkan kualiti mereka dengan ketara. Satu lagi cara untuk mengoptimumkan imej adalah dengan menggunakan format imej yang betul. Sebagai contoh, JPEG umumnya lebih sesuai untuk foto, manakala PNG lebih sesuai untuk imej dengan latar belakang telus.

Apakah beberapa komponen bootstrap tertentu yang mungkin melambatkan laman web saya?

Ya, beberapa komponen bootstrap boleh melambatkan laman web jika digunakan secara tidak wajar. Sebagai contoh, jika anda menggunakan imej besar, komponen karusel boleh melambatkan laman web. Adalah disyorkan agar anda mengoptimumkan imej anda sebelum menggunakannya untuk Carousel. Di samping itu, jika komponen modal dimuatkan pada setiap halaman, ia boleh melambatkan laman web. Adalah disyorkan untuk memuatkan komponen modal hanya pada halaman yang diperlukan.

Bagaimana untuk membuang komponen dan plugin bootstrap yang tidak perlu?

anda boleh mengeluarkan komponen dan plugin bootstrap yang tidak perlu dengan menyesuaikan versi bootstrap. Ini termasuk memuat turun fail sumber, memadam komponen dan plugin yang tidak diingini, dan kemudian menyusun fail yang tersisa ke dalam versi tersuai.

Bolehkah saya menggunakan CDN meningkatkan kelajuan laman web bootstrap saya?

Ya, menggunakan rangkaian pengedaran kandungan (CDN) dapat meningkatkan kelajuan laman web bootstrap anda dengan ketara. CDN menyediakan fail statik (seperti CSS, JavaScript, dan imej) laman web dari pelayan secara geografi dekat dengan pengguna, dengan itu mempercepatkan masa pemuatan.

Bagaimana menggunakan CDN di laman web Bootstrap saya?

Anda boleh menggunakan CDN dan laman web Bootstrap anda dengan menghubungkan ke fail bootstrap pada CDN dalam fail HTML. Ini termasuk menggantikan laluan fail tempatan dalam fail HTML dengan URL fail pada CDN.

Adakah terdapat petua lain untuk mempercepatkan laman web bootstrap?

Ya, terdapat beberapa petua lain untuk mempercepatkan laman web Bootstrap. Sebagai contoh, anda harus sentiasa meletakkan fail JavaScript pada akhir fail HTML. Ini membolehkan seluruh halaman dimuatkan sebelum fail JavaScript, dengan itu mempercepatkan masa pemuatan yang dirasakan. Di samping itu, anda harus menggunakan pemuatan tak segerak untuk fail JavaScript. Ini membolehkan fail dimuatkan di latar belakang tanpa menyekat seluruh halaman.

Atas ialah kandungan terperinci 3 petua untuk mempercepatkan laman web bootstrap anda. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!