Panduan yang tidak berguna untuk laman web yang mampan

Mari tutup mulut tentang planet ini, semua panik hari kiamat dan mulakan dengan mengapa anda ingin menjadikan tapak web anda mampan? Anda sedang membina tapak web atau membayarnya, apakah faedahnya untuk anda?

Lebih banyak prestasi, lebih baik. Ia akan mempercepatkan laman web anda, meningkatkan produktiviti anda, pelawat anda akan menyukai laman web yang pantas, menghasilkan penukaran yang lebih tinggi dan Google memberi anda mata bonus SEO. Untuk tapak trafik tinggi malah boleh menjimatkan wang.

Oh ya, ia akan menggembirakan planet ini. Memandangkan IT mempunyai kesan yang semakin meningkat di bumi kerana ia menggunakan banyak tenaga. Jika kita semua masuk, kita boleh memberi impak yang besar.

Anda bukan sahaja membantu planet ini. Ini adalah kes perniagaan yang sah.

Pengehosan hijau! Adakah saya menggunakan itu?

Menggunakan tenaga mampan untuk aplikasi dan tapak web anda mempunyai impak yang besar kerana pelayan menggunakan banyak tenaga dan dihidupkan siang dan malam. Ia adalah tempat yang baik untuk bermula.

Ingin tahu jika anda menggunakan tenaga lestari? The Green Web Foundation mempunyai alat yang hebat untuk menyemaknya: The Green Web Check.

Jika tidak, asas yang sama mempunyai Direktori Web Hijau. Di sana anda boleh menemui banyak daripada penyedia pengehosan yang mampan, tempatan dan global.

Adakah tapak web saya mampan dengan menggunakan pengehosan hijau?

Ia satu permulaan yang hebat, tetapi ada lebih daripada itu. Mempunyai tapak web yang mengunyah sumber akan menggunakan banyak tenaga dan memindahkannya dengan perlahan, walaupun pada pengehosan hijau.

Bolehkah kita pergi ke bahagian persembahan di mana semua perkara menarik berlaku?

Mengoptimumkan aset, kecil adalah pantas

Untuk banyak projek di sinilah anda boleh membuat perubahan yang besar. Aset boleh menjadi besar dan membazirkan banyak lebar jalur dan sumber. Sekumpulan petua:

• Minimumkan jumlah fon yang anda perlukan dan muatkan, fon itu terkena teruk (cuba gunakan maks 3, tetapi kurang adalah lebih baik).
• Gunakan SVG di mana anda boleh, ia kecil dan berskala dengan baik.
• Skalakan dan pangkas imej mengikut saiz yang anda perlukan, sistem seperti WordPress mempunyai alatan untuk ini dan atribut srcset boleh membantu menukar saiz.
• Gunakan format moden untuk imej dan video, seperti WebP dan WebM/AV1. Ia menawarkan pemampatan dan kualiti yang lebih baik.
• Malas memuatkan imej adalah masalah menggunakan loading="lazy", cuma muatkan apa yang anda perlukan. Anda tidak memerlukan sebarang skrip untuk ini lagi.
• Untuk video, hanya gunakan automain jika anda benar-benar perlu.
• Gunakan mampatan (seterusnya) dan jangan muatkan perkara yang anda tidak perlukan :)

Bonus untuk pengguna Pengurus Teg: semak semua skrip dan alatan pihak ketiga yang anda miliki. Adakah anda menggunakannya? Adakah anda mendapat apa-apa nilai daripada mereka? Dandanan secara berkala adalah perlu. Ini bukan sahaja tentang aset yang anda muatkan, pemprosesan data besar memerlukan banyak tenaga.

Hidangkannya dengan cepat dan kecil: cache dan pemampatan

Dayakan pemampatan. Semua pelayan web moden memilikinya, pastikan anda menggunakannya. Pilihan moden seperti Brotli adalah lebih baik, tetapi GZIP atau Deflate boleh membuat perbezaan besar dalam lebar jalur. Pelawat mudah alih akan lebih berterima kasih kepada anda.

Caching bergantung pada projek, tetapi cuba cache data yang sedekat mungkin dengan pelawat. Untuk aset statik seperti CSS/JS, anda boleh mulakan dengan pengepala cache yang betul untuk penyemak imbas, menggunakan semula fail yang dimuat turun berulang kali.

Adakah anda mempunyai halaman kandungan yang mempunyai lebih banyak bacaan daripada kemas kini? Hidangkannya secara statik dari cakera atau CDN. Rangka kerja seperti Astro boleh menjana secara statik ke CDN atau pemalam seperti W3 Total Cache boleh menyajikan halaman WordPress dari cakera.

Pastikan rakan anda rapat, tetapi data anda lebih rapat

Bercakap tentang CDN. Fikirkan tentang pelawat anda, dari mana mereka datang? Adakah anda memerlukan persediaan berbilang zon teragih global dengan pekerja tepi untuk menyediakan tapak web kedai roti tempatan anda?

Mungkin, tetapi itulah geek dalaman anda yang berseronok. Jangan terlalu menggunakan penyelesaian berlebihan dan pastikan pelayan anda dekat dengan pengguna anda. Ia akan menjimatkan sumber untuk pengiraan dan pemindahan, mengekalkan kependaman rendah.

Berhenti menggunakan JavaScript, CSS adalah hebat!

Ramai pembangun suka menulis JavaScript, melakukan semua jenis animasi mewah, peralihan halaman dan penipuan lain. Tidak menggunakan vanila JS atau CSS, tetapi rangka kerja atau perpustakaan yang besar. Itu termasuk jQuery. Anda tidak memerlukan jQuery untuk mendapatkan elemen DOM dan togol kelas! Jangan biarkan saya bermula pada Next.js.

Saya sudah bosan, maaf. Dan secara jujur, laman web tersebut boleh menjadi cantik. Masalahnya ialah vanila JS dan CSS hebat pada masa kini. Penuh dengan ciri yang membolehkan anda membina semua jenis komponen interaktif yang hebat, animasi dan juga peralihan halaman.

Dengan menggunakan kod tersebut, anda boleh menulis, menghantar dan menjalankan kurang kod. Semuanya dikendalikan oleh penyemak imbas anda. Animasi yang lebih lancar tanpa menyekat utas utama.

Anda tidak perlu membuatnya membosankan

Saya telah melihat banyak artikel bercakap tentang menggunakan warna gelap, fon sistem dan mengatakan anda harus melepaskan setiap loceng atau wisel kecil.

Kedengarannya seperti pengumuman perkhidmatan awam untuk membosankan hidup. Saya tidak mahu itu. Tapak web, apl, reka bentuk, teknologi, harus menyeronokkan, memberi inspirasi, hidup.

Saya tidak mengatakan anda perlu membina ciri bodoh tanpa sebarang nilai yang menggunakan banyak sumber, berhati-hati, tetapi jangan membosankan.

Okay, bye.

Itu sahaja buat masa ini, tetapi ia adalah topik yang menarik minat saya. Nantikan lebih banyak artikel tentang butiran terperinci. Sebarang soalan atau petua? Sila berikan ulasan atau hantarkan DM kepada saya di Xwitter atau LinkedIn!

Atas ialah kandungan terperinci Panduan yang tidak berguna untuk laman web yang mampan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!