Kiat sederhana dan bermanfaat yang memungkinkan Anda memaksimalkan situs web tanpa harus menggali metrik Google PageSpeed dan Mercusuar.
Javascript- Alih-alih JavaScript, coba gunakan tag HTML5 lebih sering: <tipe input = tanggal>, tipe input = waktu>, Detail / Ringkasan , dll.
Kami sangat sering lupa atau bahkan tidak tahu tentang solusi siap pakai yang dibangun di dalam peramban yang akan bekerja lebih baik pada perangkat yang berbeda dan yang tidak memerlukan kode JavaScript tambahan. - Gunakan minifikasi kode JavaScript.
- Cobalah untuk memasukkan semua kode JavaScript Anda ke footer atau pemuatan yang tertunda, dan semakin sedikit JavaScript yang ada di <head>, semakin baik kinerjanya di Google PageSpeed.
- <script src = "file-path"> memerlukan akses tambahan ke server, ingat ini.
Jika alih-alih file JavaScript, masukkan konten file di footer:
<script> </script>
Maka unduhan pertama akan lebih cepat, tetapi tidak akan ada caching dari file JavaScript.
Pemuatan tertunda- Gunakan pemuatan yang malas (tertunda) untuk gambar, iframe, video, audio, javascript dan objek sejenis lainnya. Itu harus dimasukkan untuk elemen yang ada di pop-up atau pada layar kedua dan selanjutnya pada halaman.
Untuk keperluan ini, ada banyak perpustakaan: lazyload, lazysizes, autoload, dll. - Anda dapat menggunakan pemuatan malas asli di Chrome.
- VK menawarkan untuk menempatkan koneksi kode JavaScript di <head> agar widget komentar mereka berfungsi, tetapi ini mengurangi Google PageSpeed dan kecepatan pemuatan halaman.
Alih-alih kode yang VK tawarkan:
<script type="text/javascript" src="https://vk.com/js/api/openapi.js?162"></script> <script type="text/javascript"> VK.init({apiId: ID, onlyWidgets: true}); </script> <div id="vk_comments"></div> <script type="text/javascript"> VK.Widgets.Comments("vk_comments", {limit: 10, attach: "*"}); </script>
Rekatkan kode yang sedikit dimodifikasi di bawah unduhan yang tertunda:
<div id="vk_comments"></div> <script onload="showvk()" data-aload data-original="https://vk.com/js/api/openapi.js?162"></script> <script> function showvk() { VK.init({apiId: ID, onlyWidgets: true}); VK.Widgets.Comments("vk_comments", {limit: 10, attach: "*"}); } </script>
Sebagai hasilnya, kami mendapatkan kode yang hanya akan dimuat ketika layar bergulir ke widget.
Kode peta yang Google tawarkan untuk disematkan di situs:
<iframe src="https://www.google.com/maps/embed?pb=!1m14" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
Jika kartu dalam popup atau jauh di footer, maka seseorang yang mengunjungi halaman Anda akan segera mulai memuat banyak tambahan dari bingkai ini dan kecepatan unduhan halaman seperti itu akan sangat lambat, Google PageSpeed akan memberi Anda yang minus dan yang besar!
Rekatkan kode yang sedikit dimodifikasi di bawah unduhan yang tertunda:
<iframe data-aload data-original="https://www.google.com/maps/embed?pb=!1m14" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
Semuanya berujung pada tidak memberikan browser src = "" segera, tetapi hanya ketika seseorang benar-benar membutuhkannya. Demikian juga dengan semua benda!
Jquery- Jika memungkinkan, maka jangan gunakan Jquery dalam proyek Anda dan ini akan secara signifikan meningkatkan kecepatan situs Anda, tetapi jika Anda sudah menggunakannya, secara bertahap ganti dengan JavaScript asli yang murni.
- Jika Anda menghubungkan Jquery ke <head>, ini memblokir tampilan halaman, karena browser menunggu hingga semua yang ada di dalam <head> dimuat, dan hanya kemudian menampilkan halaman tersebut. Tetapi karena perpustakaan itu sendiri kecil, dan internet cepat untuk semua orang, ini memiliki efek kecil pada kecepatan, Google jika menurunkan peringkat, maka itu sekitar 0,5, meskipun sebelum 10 atau 20 poin itu diambil untuk ...
- Semua kode jquery yang Anda tulis atau pustaka jquery yang Anda gunakan lebih baik ditempatkan di bagian bawah situs, karena memblokir tampilan. Jika Anda tidak dapat mentransfernya ke footer, maka mungkin Anda harus menggunakan eksekusi kode tertunda, sebuah artikel tentang topik ini: Aman menggunakan .ready () sebelum menyertakan jQuery .
Font- Font Google
- Jika Google telah menghubungkan font untuk waktu yang lama, pastikan untuk menghubungkannya lagi, karena kehadiran & display = swap di URL adalah penting - ini adalah opsi baru yang memengaruhi Google PageSpeed dan memungkinkan Anda untuk menampilkan teks pada halaman sebelum memuat font ... tidak selalu indah, tetapi itu meningkatkan kecepatan tampilan situs ... dan memengaruhi Google PageSpeed
- Jika dimungkinkan untuk mengganti font Google dengan font Anda sendiri, maka lakukan, lebih baik jika font ada di server Anda, ini juga meningkatkan kecepatan.
- Saat memilih font di Google Font, cobalah untuk memilih opsi minimum, pilih hanya apa yang Anda butuhkan, dan jika Anda tidak menggunakan font miring atau ketebalan 200 di situs, maka jangan pilih ini di pengaturan, karena ini akan mempengaruhi kecepatan unduhan.
- Font khusus
- Periksa tampilan font gaya css: swap; di font Anda, Google PageSpeed memperhatikan ini, dan meremehkan jika gaya ini tidak sepadan:
@font-face { font-family: 'Saira Condensed'; src: url(sairacondensed.woff2) format('woff2'); font-display: swap; }
- Jika Anda menghubungkan font melalui lembar gaya terpisah, ini memengaruhi waktu rendering pertama dan mengurangi kinerja Google PageSpeed, lebih baik tidak melakukan ini:
<link href="/fonts.css" rel="stylesheet">
Jika Anda memasukkan koneksi font ke dalam <head> melalui tag <style>, dan bukan melalui <link>, ini akan meningkatkan kecepatan unduh dan kinerja Google PageSpeed, karena browser tidak perlu secara terpisah mengakses stylesheet Anda:
<head> <title>Demo</title> <style> @font-face { font-family: 'Saira Condensed'; src: url(sairacondensed.woff2) format('woff2'); font-display: swap; } </style> </head>
- Jika memungkinkan, maka hapus semua hal yang tidak perlu yang tidak Anda gunakan dari file font Anda untuk meningkatkan kecepatan unduhan.
- Anda dapat melakukan pemuatan font dua langkah: Mengembangkan Strategi Memuat Font yang Kuat untuk Trik CSS-
CSS- Cobalah untuk menyingkirkan kelebihan kode CSS untuk browser lama, termasuk awalan -moz- -o- -ms- -webkit-
- Cobalah untuk tidak memuat gaya yang tidak digunakan pada halaman ini, tetapi digunakan pada halaman situs lainnya.
- Jika memungkinkan, ada baiknya memuat potongan CSS dan kode HTML melalui pemuatan tertunda.
- Untuk memuat gaya dengan <link href = 'st.css' rel = 'stylesheet'> memperlambat pemuatan halaman pertama dan renderingnya, tetapi memungkinkan browser untuk melakukan cache file ini.
Jika Anda memiliki gaya unik untuk setiap halaman atau lebih penting bagi Anda bahwa memuat halaman pertama sedikit lebih cepat, maka kami memasukkan tag gaya daripada file:
<style> </style>
- Gunakan minifikasi CSS, seperti Cssresizer atau alat serupa lainnya.
HTML- Semakin banyak tag HTML pada halaman, semakin banyak sumber daya yang dibutuhkan browser untuk me-render halaman, dan ini memengaruhi kinerja Google PageSpeed, tetapi hanya jika halaman Anda terlalu penuh dengan tag.
- Hindari tag HTML yang terlalu banyak bersarang, Google PageSpeed juga memperhatikan hal ini.
- Sebaiknya bersihkan HTML Anda dari kode untuk peramban yang lebih lama, karena biasanya itu adalah kode yang menciptakan sejumlah besar tag tambahan dan bersarang.
- Jumlah tag dan sarang, terutama sangat memengaruhi Google PageSpeed untuk seluler.
Gambar- Gunakan tag <picture> untuk menggunakan format gambar modern (JPEG 2000, JPEG XR dan WebP). Google PageSpeed memperhatikan hal ini jika Anda tidak malas memuat gambar.
<picture> <source srcset="image.webp" type="image/webp"> <img src="image.jpg" alt=""> </picture>
Anda juga dapat menggunakan media dan mengganti gambar yang berbeda untuk resolusi dan kepadatan piksel yang berbeda pula.
<source media="(max-width: 640px)" srcset="image.png, image-retina.png 2x">
Ini berguna untuk gambar dan video.
Minus: Anda memerlukan banyak ruang, karena Anda harus menyimpan berbagai format gambar (video) dan di bawah resolusi yang berbeda. - Gunakan lazy loading untuk semua gambar yang ada dalam pop-up atau pada layar kedua dan selanjutnya pada halaman.
- Gunakan kompresi maksimum gambar, Google PageSpeed juga menarik perhatian untuk ini. Ada banyak alat kompresi, salah satu contohnya: compressor.io
Pengaturan server- Aktifkan caching file statis (font, skrip, gambar, css, dan sebagainya), sambil mengatur tahun caching, jika tidak Google bersumpah.
- Aktifkan kompresi gzip.
- Gunakan header HTTP Terakhir-Dimodifikasi dan Jika-Dimodifikasi-Sejak untuk cache halaman.
Komunikasi- Hasilnya sangat tergantung pada seberapa jauh server Anda dari Anda. Jika Anda berada di Hawaii, dan servernya ada di Moskow, maka hasilnya bagi Anda akan menjadi bencana.
- Hasilnya tergantung pada server dan komputer Anda, dan jika selama pengujian server atau komputer kelebihan beban dengan sesuatu, maka hasilnya akan buruk.
KesimpulanTidak mungkin untuk memeras poin PageSpeed 108 atau lebih :)
Tidak ada gunanya memeras bahkan 100 poin di bawah ponsel. Kita harus berjuang untuk 100, dan tidak jatuh ke dalam paranoia! Ini hanyalah salah satu dari banyak indikator yang penting untuk situs.
Anda dapat melihat
contoh halaman di mana indikator untuk ponsel adalah 97-98 dan 100 untuk komputer.
Di halaman ini ada 2 video YouTube dalam sembulan dan video diaktifkan hanya ketika sembulan terbuka.
Semua gambar ditempatkan di pemuatan malas.
Semua JavaScript dirender dari <head> di bagian bawah halaman.
Tetapi pada saat yang sama, yang berikut ini terhubung ke penghitung <head>: Jquery, GoogleFonts, dan Yandex (Google).
Gaya dimasukkan ke dalam tag <style> kode gaya </style>.
<gambar> tidak digunakan di halaman ini.
Ada sejumlah bagian pada halaman yang ada pada halaman tersebut, tetapi hanya dapat diakses melalui tautan langsung untuk pelanggan, mereka harus dimuat sesuai kebutuhan, yang akan mengurangi jumlah kode html dan css.
Terima kasih atas perhatian anda!