Alat Pengembang Chrome memiliki tab Audit. Di atasnya ada alat bernama Lighthouse, yang berfungsi untuk menganalisis seberapa baik aplikasi web dibuat.
Saya baru-baru ini memutuskan untuk menguji satu aplikasi dan ngeri dengan hasilnya. Segera di beberapa bagian, penilaian berada di zona merah. Saya mulai mempelajari apa yang salah dengan aplikasi saya. Dan ditemukan dalam hasil analisis daftar besar rekomendasi yang sangat berguna, memenuhinya dan mendapat 500 poin. Akibatnya, aplikasi mulai berjalan lebih cepat, dan saya merevisi beberapa konsep mengenai metode membangun aplikasi. Dan dalam artikel ini saya ingin berbagi solusi paling menarik yang saya dapatkan.
Jika Anda tidak memiliki kemampuan untuk menginstal chrome, Anda dapat menginstal mercusuar dari npm dan bekerja dengannya dari konsol.
Dalam artikel itu, saya tidak mulai membandingkan setiap rekomendasi dengan bagian tertentu, melainkan saya membagi bagian menjadi solusi yang saya terapkan dan yang disukai Ligthouse. Ini bukan semua yang dia rekomendasikan, hanya yang paling menarik. Rekomendasi yang tersisa sangat sederhana, dan seperti SEO telah lama dikenal semua orang.
Performa
Pemilihan server
Ini adalah saran yang paling umum, tetapi inilah yang merupakan fondasi untuk semua produktivitas. Untungnya, menemukan solusi yang baik itu sederhana, itu adalah pusat data Tier 3 atau Tier 4. Status ini sendiri tidak mengatakan apa-apa tentang kecepatan, dikatakan bahwa pemiliknya menjaga kualitas.
Inisialisasi aplikasi
Dulu hanya ada html di browser. Kemudian muncul javascript dan logika bisnis. Hari ini ada begitu banyak logika pada klien sehingga html tidak dapat mengatasinya dan tidak lagi diperlukan. Tetapi, karena browser tidak dapat mulai memuat dari file JavaScript, kita harus meletakkan sepotong kecil html untuk meluncurkan aplikasi kita.
Idealnya, tampilannya akan seperti ini:
<!DOCTYPE html> <html lang="ru"> <head> <title> </title> <link rel="manifest" href="./manifest.webmanifest"> <link rel="shortcut icon" href="content/images/favicon.ico" type="image/x-icon"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width" /> <meta name="theme-color" content="#425566"> <meta name="Description" content=" "> </head> <body> <div id="loader"> loading </div> <script async> </script> </body> </html>
Seharusnya tidak ada konten di dalamnya, hanya kode yang diperlukan untuk menginisialisasi aplikasi, yang akan memuat aplikasi itu sendiri dan kontennya.
Artikel ini tidak mempertimbangkan optimasi bot, tetapi saya akan mengatakan bahwa paling mudah untuk menangkap bot tertentu dan memberikan apa yang dibutuhkan bot tertentu. Bot Google sendiri akan memahami segala sesuatu dari konten yang akan dimuat nanti.
Gunakan layar splash
Kita semua terbiasa memercikkan layar saat memuat di aplikasi seluler, dan bahkan saat memuat sistem operasi, tetapi beberapa orang menggunakan layar splash di aplikasi web. Inilah yang akan kita tempatkan di blok loader sehingga pengguna tidak bosan saat aplikasi itu sendiri sedang memuat.
Sebagai layar splash, sebagai opsi, Anda dapat menggunakan animasi css atau hanya gambar, seperti yang dilakukan pada ponsel. Satu-satunya syarat adalah sangat ringan.
Apa yang kita dapatkan Pengguna dengan internet lambat akan langsung menerima reaksi dari situs, mereka tidak akan mengagumi layar putih dan bertanya-tanya apakah situs tersebut berfungsi atau tidak. Pengguna dengan internet cepat kemungkinan besar tidak akan melihatnya, tetapi bahkan mereka memiliki kelambatan di Internet.
Sebagai contoh menarik menggunakan
layar splash, saya akan memberi Anda situs
dockstation , tempat gelombang yang bagus menghiasi pemuatan situs yang sangat lama. Bahkan, ini adalah bagaimana orang-orang dengan internet lambat akan melihat aplikasi Anda.
Dan segera saya segera membuat marah orang-orang yang berpikir bahwa percikan layar dapat menipu Lighthouse dan menempatkan aplikasi berat di belakangnya. Dia melihat segalanya, dan tidak akan memberi Anda nilai bagus untuk aplikasi yang berat.
Inisialisasi aplikasi
Sekarang kami mengalihkan perhatian pengguna dengan gambar, sekarang saatnya untuk mengunduh aplikasi. Untuk melakukan ini, kami menyisipkan skrip berikut di dalam blok skrip.
Terdiri dari apa:
- Koneksi PWA - kami akan mempertimbangkan di bagian yang sesuai di bawah ini. Anda perlu menghubungkannya sesegera mungkin, karena mungkin pwa sudah memiliki semua yang diperlukan agar situs dapat berfungsi dan tidak akan ada lagi permintaan ke server.
- Hubungkan gaya - sambungkan gaya sesuai kebutuhan. Idealnya, kode ini tidak boleh ada sama sekali dan gaya harus menghubungkan komponen Anda sesuai kebutuhan.
- Hubungkan skrip - sambungkan program. Seharusnya hanya terdiri dari dua skrip ini. Semua skrip lain (peta, analisis, perpustakaan) yang tidak mempengaruhi tampilan layar pertama (bukan seluruh halaman) dimuat setelah menggambar layar pertama aplikasi. Komponen analitik harus sudah memuat analitik setelah program dimuat. Kualitas analitik tidak akan terpengaruh oleh ini, dan sistem analitik mendukung pemuatan setelah mengunduh program. Kartu hanya boleh dibenamkan setelah pengguna memindai mereka dan mereka menyentuh layar. Dengan perpustakaan pihak ketiga yang diperlukan untuk komponen tertentu agar berfungsi, sama.
Akibatnya, sedikit mengubah prioritas, kami mendapatkan rendering cepat dari aplikasi. Dengan demikian, pengguna dan bot pencarian puas dengan kecepatan, dan pada saat yang sama tidak melanggar analitik.
Pemuatan dan rendering malas
Parameter yang sangat penting adalah seberapa cepat layar pertama dibuat dan pengguna dapat mulai berinteraksi dengan halaman ini. Dan ini ada baiknya menggunakan optimasi berikut:
1. Render malas. Hal ini diperlukan untuk menggambar hanya bagian halaman di mana pengguna mencari, dan rendering komponen atau gambar yang berat harus sudah dilakukan ketika pengguna telah melompat ke sana.
Solusi yang bagus di sini adalah komponen-komponen lazy-block dan lazy-img:
<div> <p></p> <lazy-img src="..."/> </div> <lazy-block> </lazy-block> <lazy-block> </lazy-block> <lazy-block> </lazy-block>
Intinya adalah bahwa mereka akan memantau pengguliran pengguna dan jika komponen jatuh ke area layar itu akan ditarik. Ini dapat dibandingkan dengan teknik scrolling virtual (
contoh ) yang akrab bagi semua orang di dinding jejaring sosial. Kita dapat menggulir selamanya, tetapi mereka tidak pernah melambat.
Tapi jangan lupa tentang bot Google, yang melihat spa, tetapi tidak menggulir seluruh halaman. Karena itu, jika Anda tidak berhati-hati, maka dia tidak akan melihat konten Anda.
2. Jika salah satu komponen menggunakan ketergantungan eksternal, ia harus memuatnya sendiri sesuai kebutuhan. Misalnya, itu bisa berupa blok dengan peta, grafik, atau grafik 3D. Dan baru-baru ini, cara untuk melakukan ini di JS sangat sederhana:
class Demo { constructor() { this.init(); } private async init() { const module = await import('./external.mjs');
Akibatnya, pengguna hanya memuat apa yang ia butuhkan, yang sangat menghemat sumber daya pengguna dan server.
Minimalisasi bundel
Dan ... ya, Anda tidak memikirkannya, ini bukan tentang minifikasi di Terser (UglifyJS), tetapi tentang memberikan hanya apa yang dibutuhkan untuk browser tertentu.
Faktanya adalah bahwa browser terus berkembang, mereka memiliki API baru, pengembang mulai menggunakannya, dan untuk kompatibilitas dengan browser lama mereka menghubungkan polyfill dan transpiler. Akibatnya, muncul masalah bahwa pengguna dengan browser terbaru, yaitu sekitar 80%, mendapatkan kode yang dirancang untuk pengguna IE11, ditranslasikan dan dengan polyfiles.
Masalah dengan kode ini adalah bahwa ia mengandung banyak teks tambahan, dan kinerjanya 3 kali lebih sedikit (menurut perkiraan subjektif saya) daripada yang asli. Jauh lebih logis untuk membuat beberapa bundel untuk berbagai versi browser. Sebuah bundel dengan kode ES2017 untuk Chrome 73 dengan minimum polyfiles, bundel dengan ES5 untuk IE11 dengan minimum polyfiles, dll.
Saya menulis tentang cara mengumpulkan bundel versi yang berbeda pada satu waktu di
artikel sebelumnya . Dan untuk memilih versi yang benar di browser, kami sedikit memodifikasi skrip koneksi program:
var esVersion = ".es2017"; try{ eval('"use strict"; class foo {}'); }catch(e){ esVersion = ".es5"; } [ "./scripts/polyfills" + esVersion + ".min.js", "./scripts/main" + esVersion + ".min.js" ].forEach(function(url){ const script = document.createElement("script"); script.src = url; script.async = false; document.head.appendChild(script); });
Akibatnya, pengguna browser modern akan menerima program yang paling ringan dan produktif, dan pengguna IE11 akan mendapatkan apa yang layak mereka dapatkan.
Minimalisasi kode
Masalah yang sangat populer adalah ketika pengembang mulai menghubungkan segala sesuatu yang mata mereka jatuh. Akibatnya, terkadang Anda dapat menonton program dengan berat 5-15 mb atau lebih. Karena itu, pilihan perpustakaan harus didekati dengan bijak.
Alih-alih kerangka berat seperti Angular atau Bereaksi, lebih baik memilih rekan-rekan mereka yang lebih ringan: vue, preact, mithril, dll. Mereka sama sekali tidak kalah dengan rekan-rekan terkemuka mereka, tetapi penghematan pada ukuran bundel bisa beberapa kali.
Hindari menggunakan perpustakaan berat. Alih-alih menggunakan perpustakaan seperti jquery, lodash, moment, rxjs, dan lainnya dalam ukuran yang diperkecil> 100kb, cobalah mempelajari algoritme lebih dalam dan menemukan solusi dalam JS asli. Sebagai aturan, Anda dapat menulis lebih sederhana pada skrip asli, dan Anda menyingkirkan ketergantungan berat yang tidak perlu.
Minifikasi gambar
Mungkin semua pengembang front-end tahu tentang format gambar webp, dan juga tahu tentang perlunya memperkecil gambar dengan ukuran tampilan yang diperlukan. Tetapi untuk beberapa alasan, hampir semua pengembang mengabaikan ini. Dan alasannya, menurut saya, sangat sederhana, orang tidak mengerti bagaimana ini dilakukan dan diterapkan pada browser yang berbeda.
Oleh karena itu, di sini saya akan memberikan resep yang sangat sederhana untuk menyelesaikan semua masalah dengan gambar. Resep ini
didasarkan pada alat konversi dan pemrosesan gambar Sharp . Ini menonjol dengan pipa yang sangat bijaksana, karena kecepatan pemrosesan gambar 30-40 kali lebih tinggi dari analog. Dan waktu perakitan itu sendiri dari ratusan gambar dari sumber besar dalam ukuran dan format yang berbeda sebanding dengan kecepatan perakitan frontend modern.
Untuk menggunakan Sharp, Anda perlu menulis sebuah skrip, saya menggunakannya bersamaan dengan glob untuk secara rekursif mencari gambar dalam direktori dengan gambar sumber, dan saya menyembunyikan skrip itu sendiri dari utilitas untuk menjalankan tugas menelan. Contoh pertemuan saya:
gulp.task('core-min-images', async () => { const fs = require('fs'); const path = require('path'); const glob = require('glob'); const sharp = require('sharp');
Hasilnya, kami mendapatkan gambar yang dioptimalkan untuk ukuran layar yang berbeda dan browser yang berbeda dari setiap gambar sumber berukuran besar. Sekarang kita perlu belajar cara menggunakannya. Di sini juga, semuanya sederhana, jika sebelumnya kita menulis seperti ini:
<img src="sample.jpg"/>
Sekarang kita perlu menulis seperti ini:
<picture> <source srcset="img/sample-480w.webp" type="image/webp"> <source srcset="img/sample-480w.jpg" type="image/jpeg"> <img src="img/sample-480w.jpg" alt=" !"> </picture>
Dan kemudian browser itu sendiri akan memilih format yang paling nyaman untuk itu. Anda juga dapat menambahkan opsi ini dengan gambar responsif:
<picture> <source srcset="img/sample-480w.webp, img/sample-960w.webp 2x" type="image/webp"> <source srcset="img/sample-480w.jpg, img/sample-960w.webp 2x" type="image/jpeg"> <img src="img/sample-480w.jpg" alt=" !"> </picture>
Dan dengan mempertimbangkan fakta bahwa sekarang adalah mungkin untuk menghasilkan gambar pada tahap perakitan aplikasi, ternyata semua gambar memiliki format dan izin yang sama, yang berarti kita dapat menyatukan logika ini dan menyembunyikannya di belakang beberapa komponen, misalnya,
<lazy-img src="img/sample.jpg"> .
Gaya Minifikasi
Hanya gaya unduhan yang menggunakan komponen Anda. Idealnya, ketika gaya diikat ke komponen, dan tertanam di rumah hanya ketika komponen itu sendiri ditarik.
Minimalkan nama kelas. Panjang pemilih terselubung atau BEM dalam gaya memiliki efek buruk pada ukuran aplikasi Anda. Saat ini, penuh dengan alat yang tidak menghasilkan gaya dengan penyeleksi unik: JSS, Styled Components, Modul CSS.
Minifikasi di rumah
Kita semua akrab dengan html, tetapi sedikit yang berpikir bahwa ini hanyalah abstraksi sederhana di atas pohon objek yang sangat kompleks. Rantai pewarisan untuk elemen div adalah sebagai berikut:
HTMLDivElement -> HTMLElement -> Element -> Node -> EventTarget
Dan setiap objek dalam rantai ini memiliki 10 hingga 100 properti dan metode yang menghabiskan banyak memori. Dan semua kekayaan ini harus diperhitungkan oleh mesin DOM untuk membangun gambar yang kita lihat. Karena itu, cobalah untuk tidak menggunakan elemen berlebih di rumah.
Minify HTML. Hapus semua yang Anda gunakan untuk memformat html pada saat penulisan. Faktanya adalah ruang yang digunakan saat menulis kode di browser juga berubah menjadi objek di rumah:
TextNode -> Node -> EventTarget
Hapus komentar. Mereka juga merupakan elemen rumah dan mengkonsumsi banyak sumber daya:
Comment -> CharacterData -> Node -> EventTarget
Menggunakan mesin template jsx bisa menjadi praktik yang baik. Faktanya adalah bahwa ketika kompilasi itu berubah menjadi kode js asli yang tidak menghasilkan spasi, komentar dan tidak pernah salah dalam membuka dan menutup tag.
Praktek yang buruk, saya bahkan akan mengatakan mimpi buruk, adalah
facebook.com . Berikut adalah fragmen html:
Cuplikan halaman html <div class=""> <div class="_42ef"> <div class="_25-w"> <div class="_17pg"> <div class="_1rwk"> <form class=" _129h"> <div class=" _3d2q _65tb _7c_r _4w79"> <div class="_5rp7"> <div class="_1p1t"> <div class="_1p1v" id="placeholder-77m1n" style="white-space: pre-wrap;"> ... </div> </div> </div> </div> <ul class="_1obb"> ...li... </ul> </form> </div> </div> </div> </div> </div> <div> <div> <div class="_3nd0"> <div class="_1mwp navigationFocus _395 _4c_p _5bu_ _34nd _21mu _5yk1" role="presentation" style="" id="js_u"> <div class="_5yk2" tabindex="-1"> <div class="_5rp7"> <div class="_1p1t" style=""> <div class="_1p1v" id="placeholder-6t6up" style="white-space: pre-wrap;"> ? </div> </div> <div class="_5rpb"> <div aria-autocomplete="list" aria-controls="js_1" aria-describedby="placeholder-6t6up" aria-multiline="true" class="notranslate _5rpu" contenteditable="true" data-testid="status-attachment-mentions-input" role="textbox" spellcheck="true" style="outline: none; user-select: text; white-space: pre-wrap; overflow-wrap: break-word;"> <div data-contents="true"> <div class="" data-block="true" data-editor="6t6up" data-offset-key="6b02n-0-0"> <div data-offset-key="6b02n-0-0" class="_1mf _1mj"> <span data-offset-key="6b02n-0-0"> <br data-text="true"> </span> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>
Seperti yang Anda lihat, bersarang dari sepuluh elemen digunakan, tetapi bersarang ini tidak berfungsi. Fragmen pertama hanya menampilkan teks "Tulis komentar ..." dan ikon, yang kedua "Apa yang baru?". Sebagai hasil dari penggunaan DOM yang tidak rasional, seluruh kinerja mesin templating Bereaksi dinegasi, dan situs menjadi salah satu yang paling lambat yang saya tahu.
Aplikasi Web Progresif
File manifes
PWA memungkinkan Anda untuk menggunakan aplikasi web Anda sebagai aplikasi asli. Saat Anda mengaktifkan dukungan di situs, tombol untuk menginstal situs Anda di perangkat (Windows, Android, iOS) muncul di menu browser, setelah itu mulai berlaku sebagai yang asli dan bekerja offline, dan semua ini melewati toko aplikasi.
Mengaktifkan dukungan PWA di situs ini sebenarnya sangat sederhana. Cukup dengan memasukkan tautan ke file manifes di halaman html. File manifes dapat dibuat di
pwabuilder.com .
Saya tidak akan berhenti secara detail pada proses koneksi, karena Bagian ini layak untuk artikel besar yang terpisah, dan pada hub sudah ada yang cukup bagus.
Pekerja Servis
Konfigurasi PWA tidak berakhir pada menghubungkan file manifes, Anda juga perlu menghubungkan ServiceWorker, yang akan bertanggung jawab untuk bekerja offline.
Contoh kode dapat ditemukan di sana di
pwabuilder.com :
Seperti yang dapat Anda lihat dari kode, semua respons dari server di-cache, tetapi cache tidak digunakan secara online. Dan mereka mulai digunakan ketika koneksi ke server hilang. Dengan demikian, pengguna yang menavigasi situs mungkin tidak melihat hilangnya jangka pendek dari Internet, dan bahkan jika Internet telah lama menghilang, pengguna masih memiliki kesempatan untuk bergerak di sekitar data yang sudah di-cache.
Skrip di atas sederhana, tetapi hanya cocok untuk halaman arahan dan hanya titik awal untuk menulis pekerja untuk aplikasi web yang lebih serius. Tetapi lebih banyak tentang itu di bagian kedua artikel ini. Selain itu, teknologi ini nyaman karena tidak merusak pekerjaan di browser lama, mis. di browser tingkat IE11, Anda tidak perlu menulis ulang logika, mode offline tidak akan berfungsi di dalamnya.
Aksesibilitas
Atribut benar untuk orang dengan kebutuhan khusus
Ada sangat sedikit orang dengan kesehatan yang sempurna, tetapi sayangnya ada banyak orang dengan kesehatan yang buruk, termasuk penglihatan. Dan agar lebih nyaman bagi orang-orang ini untuk menggunakan aplikasi web Anda, cukup mengikuti aturan yang cukup sederhana:
- Gunakan warna yang cukup kontras. Menurut statistik dari Kementerian Kesehatan, 20% orang memiliki masalah penglihatan. Situs kontras yang buruk hanya mempersulit hidup mereka, dan orang sehat meningkatkan kelelahan.
- Atur tabindex. Memungkinkan Anda menggunakan situs tanpa mouse dan perangkat sentuh. Pengaturan transisi yang tepat menggunakan keyboard sangat menyederhanakan proses pengisian formulir.
- Atribut Aria-label pada tautan. Mengizinkan pembaca layar membaca teks di dalam atribut.
- Atribut alt dalam gambar. Mirip dengan yang sebelumnya. Selain itu, itu akan menampilkan teks jika tidak mungkin untuk mengunduh gambar.
- Bahasa dokumen. Tandai tag html dengan atribut dengan bahasa lang = "kode bahasa". Ini akan membantu alat pendukung mengatur hak untuk bekerja.
Seperti yang Anda lihat, persyaratannya sebenarnya sedikit dan mudah untuk dipatuhi. Tetapi untuk beberapa alasan, sebagian besar pengembang mengabaikan aturan ini, bahkan ketika datang ke situs khusus untuk orang dengan kebutuhan khusus.
Praktik terbaik
Pisahkan aplikasi front-end dari aplikasi server
Pertama, jika Anda masih merender html di server, berhentilah melakukan ini. . .
SPA . windows , , iOS . , . Spring Asp.Net , SPA . SPA , nginx.
. Nginx , , .
, HTTP/2, gzip, cache
, , Nginx. .
- SSL. SSL , , , Nginx. Nginx Asp.Net Core , .
- GZIP . .
- Cache . Get, Head , .
- .
- , ,
nginx nginxconfig.io .
SEO
html
, . Lighthouse .
, . , .
, , .