Artikel ini akan menarik bagi siapa saja yang menghadapi semua jenis masalah setelah memperbarui Google PageSpeed dan klaim dari pelanggan atau bos, mengapa bola jatuh atau ada begitu banyak komentar. Dan juga untuk mereka yang melakukan optimasi situs.
Pertama-tama, perlu disebutkan bahwa
dalam artikel ini , menurut pendapat saya, semuanya sangat kompeten dan mudah diakses.
Saya sendiri akan menambahkan saran yang lebih
praktis , dan juga menarik untuk mendengarkan sudut pandang Anda dan melihat praktik terbaik Anda.
Saya akan mencantumkan apa yang akan saya bicarakan dalam artikel ini:
- CSS dan JS
- koneksi file
- memuat perpustakaan
- trik
- Font
- koneksi font
- menampilkan font saat memuat halaman
- Gambar
- format berbeda (jpg, png, webp, base64)
- sprite
Dan jika Anda tetap pada artikel ini sampai saat ini, maka Anda kemungkinan besar tertarik (atau tombol "kembali" telah dimatikan untuk Anda) Di bawah ini lebih rinci tentang setiap item.
CSS dan JS
Js- Properti async untuk skrip plug-in (kecuali jQuery) akan diperlukan. Ini pasti akan menyelamatkan Anda dari komentar GPSpeed tentang pemuatan skrip asinkron.
- Nasihatnya lumrah, tetapi sangat masuk akal - coba gunakan perpustakaan yang kompleks dan masif seminimal mungkin.
- Lebih baik mengunggah pengaturan js library Anda (apik, kotak mewah) atau potongan kecil kode yang melakukan tugas berbeda ke server dengan satu file. Dalam kasus saya, skrip untuk mengirim surat, dan topeng untuk input dan animasi dan semuanya dalam file build.js yang sama (yang juga saya atur async .
- Nasihat ini bersifat situasional, yaitu melihat situasi. Jika Anda memiliki beberapa jenis skrip yang berjalan tepat setelah membuka halaman di layar pertama, maka itu akan lebih benar untuk menghubungkannya secara terpisah dan tidak memberikannya sinkronisasi
CSS- Di sini sedikit lebih rumit. Anda perlu menambahkan properti seperti itu ke tag tautan .
<link media="none" onload="if(media!="all") media="all"" rel="stylesheet" type="text/css", href= main.css>
Dalam bentuk ini file css Anda akan terhubung hanya setelah pohon DOM. Secara kasar, ini adalah async yang sama untuk .css saja - Saran yang sangat penting dan efektif! Dia menambahkan 5 hingga 10 poin dijamin. Anda perlu membagi main.css Anda menjadi dua file . Dalam yang pertama hanya akan ada gaya-gaya yang dimuat untuk konten yang terlihat segera setelah membuka halaman. Ini adalah bilah atas, tajuk, gambar pertama, bentuk pertama, dll. Secara umum, apa yang Anda letakkan di "wajah" situs Anda. Yang kedua, semuanya sudah.
Font
Saya menemukan properti css baru untuk font
font-display
Secara khusus, parameter
swap -nya, yang, tanpa menunggu pemuatan font Anda yang indah dan berat, menampilkan teks di browser menggunakan font yang dibangun di browser yang sama (misalnya, sans-serif). Ini segera menghapus salah satu kesalahan dalam GPSpeed.
Ini akan terlihat seperti ini
@font-face { font-family: 'FontName'; src: local('FontName'), url('FontName.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; }
Ada juga skrip semacam itu (Anda perlu menghubungkan fontfaceobserver.js untuk operasinya):
<script> var html = document.documentElement; if (sessionStorage.fontsLoaded) { html.classList.add("fonts-loaded"); } else { var script = document.createElement("script"); script.src = "../js/fontfaceobserver.js"; script.async = true; script.onload = function() { var regular = new FontFaceObserver("FontName"); var bold = new FontFaceObserver("FontName", { weight: "bold" }); var light = new FontFaceObserver("FontName", { weight: "300" }); Promise.all([ regular.load(), bold.load(), light.load() ]).then(function() { html.classList.add("fonts-loaded"); sessionStorage.fontsLoaded = true; }); }; document.head.appendChild(script); } </script>
Secara pribadi, saya tidak terlalu membantu, tetapi Anda mencoba, mungkin Anda bisa mengendalikannya dengan lebih baik. Bagaimanapun, saya menemukannya di tempat yang luas, dan orang-orang mengatakan itu sangat membantu.
Koneksi font
- Pada dasarnya, ada dua jenis koneksi - menggunakan tautan (misalnya, ke font google, atau lokal, di server. Jadi, mengenai metode kedua, juga dapat dibagi menjadi 2: file css terpisah (menggunakan tautan kami menyambungkan fonts.css ) dan langsung melalui kode (melalui style.css Anda).
Dan karena kita sekarang berbicara tentang mengoptimalkan situs untuk GPSpeed, saya memastikan bahwa lebih baik menghubungkan font melalui file css utama Anda. - Dan tip lain yang membantu adalah menempatkan file font (woff, ttf, dll.) Di sebelah file css Anda yang memintanya. Saya dulu memiliki folder terpisah di server untuk font, tapi kemudian saya memindahkan kecepatan unduhan font mereka meningkat 2 kali. (menurut GPSpeed, saya membutuhkan 180ms untuk menghubungkan font Muller sebelumnya, sekarang 70-90ms)
Gambar, gambar, dll.
Saya menjamin untuk 2 tips berikutnya, mereka tidak hanya membantu saya, tetapi seluruh kantor dan bahkan teman-teman saya bekerja dari jarak jauh.
1. Unduh sepenuhnya semua gambar
<img > menggunakan lazyloading. Ini akan terlihat seperti ini
<img class="yourClass lazy" data-src="../images/image.jpg" alt=""/>
Dan jangan lupa untuk menghubungkan
lazyload.min.js2. Jika Anda memiliki banyak elemen
svg pada halaman, maka lebih baik menambahkannya
dengan kode bersih , tanpa menggunakan tag img yang tidak perlu. Selain itu, svg perlu diperas, misalnya, menggunakan situs ini
jakearchibald.imtqy.com/svgomg (bukan iklan).
3. Basi, tapi jangan lupa memeras SEMUA gambar di situs. Bahkan mereka yang memiliki berat 5kb. Meskipun 3 kb yang Anda menangkan ini tidak akan memengaruhi kecepatan unduhan dengan cara apa pun, Anda akan menyingkirkan kesalahan pada kecepatan GPS dan menambahkan diri Anda hingga 10 poin.
! Sekarang titik masalahnya adalah format gambar. Yaitu, kami prihatin dengan
webp, JPEG 2000, JPEG XR . Memang, sekarang ini adalah salah satu ekstensi GPSpeed yang disarankan. Seperti yang Anda tahu, mereka masih belum didukung oleh beberapa browser, di antaranya Mozila Firefox yang cukup populer. Meskipun mereka mengumumkan bahwa
pada bulan Maret akan ada dukungan penuh untuk format ini, kita masih harus menunggu satu tahun lagi sampai semua pengguna browser ini diperbarui ke versi terbaru ... Saya mencari-cari melalui banyak situs, banyak skrip, tetapi saya tidak menemukan sesuatu yang masuk akal. Jadi sekarang saatnya saya untuk bertanya kepada Anda: apakah Anda menggunakan format webp atau format gambar baru lainnya? Dan bagaimana Anda melakukannya?