Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Google
Code

Meningkatkan Langsung Google PageSpeed

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Improving Google PageSpeed.
Optimizing Google PageSpeed to 100 in WordPress

Indonesian (Bahasa Indonesia) translation by Andy Nur (you can also view the original English article)

Final product image
What You'll Be Creating

Apa itu Google PageSpeed?

Google PageSpeed ​​adalah tool gratis yang menilai kinerja dan kegunaan situs web-mu untuk platform seluler dan desktop. Ini sangat penting karena Google menggunakannya dalam menentukan elemen kunci dari peringkat SEO kita, yaitu seberapa tinggi kita muncul dalam hasil pencarian mereka.

Jika kamu ingin lebih banyak latar belakang tentang manfaat peningkatan kecepatan situs, baca Mengapa Optimisasi Kecepatan Situs Harus Menjadi Bagian dari Strategi SEO-mu, yang perlu disoroti, "... beberapa studi kasus menunjukkan bahwa halaman dimuat lebih cepat berkorelasi kuat dengan pendapatan yang lebih tinggi."

Pada tutorial ini, saya akan memandumu melalui beberapa pendekatan teknis untuk mengoptimalkan PageSpeed ​​web WordPress-mu. Meskipun perubahan mendasar bisa sangat sederhana dan mudah, pembaruan yang lebih komprehensif sebenarnya bisa sangat menantang.

Menariknya, situs web khusus mungkin lebih mudah dioptimalkan daripada situs WordPress—ini karena framewok menggunakan tema dan plugin pihak ketiga yang luas. Ini juga didasarkan pada arsitektur yang dirancang sebelum popularitasnya dan bergantung pada arsitektur yang tidak sempurna untuk kompatibilitas.

Sebelum kita memulai, ingatlah, saya mencoba untuk berpartisipasi dalam diskusi di bawah ini. Jika ada pertanyaan atau saran topik, kirimkan komentar di bawah ini atau hubungi saya di Twitter @reifman. Saya tertarik dengan pengalamanmu dengan WordPress dan PageSpeed.

Skor PageSpeed ​​Awal Saya

Untuk tutorial ini, saya akan fokus untuk memperbaiki situs pribadi saya, JeffReifman.com.

Beberapa waktu yang lalu, PageSpeed ​​saya adalah Mobile 65 dan Desktop 64 —  tidak terlalu bagus:

Optimizing PageSpeed - Initial Mobile

Catatan: inilah artikel untuk dibaca jika kamu penasaran dengan screenshot mobile yang lucu dengan Russell Wilson.

Optimizing PageSpeed - Initial Desktop

Sebelum memulai pengoptimalan, mari kita bahas beberapa faktor kinerja dasar WordPress.

Kinerja Dasar WordPress

Ada beberapa cara utama untuk mulai mengoptimalkan situs WordPress-mu untuk kinerja dan meningkatkan PageSpeed.

Pemilihan Tema

PageSpeed ​​dari berbagai tema sangat dipengaruhi oleh jumlah dan ukuran file JavaScript dan CSS yang mereka gunakan, jumlah gambar yang digunakan dan ukurannya, dan pendekatan penerapan selulernya, yaitu biasanya saat ini responsif.

PageSpeed ​​dari berbagai tema sangat dipengaruhi oleh jumlah dan ukuran file JavaScript dan CSS yang mereka gunakan, jumlah gambar yang digunakan dan ukurannya, dan pendekatan penerapan seluler mereka, yaitu biasanya responsif saat ini. Berikut adalah beberapa artikel yang mengulas tema dan PageSpeed ​​via ColorLib dan WPMU. Bagaimanapun, saya berharap lebih tinggi.

Saya telah menggunakan tema My Site My Way's Construct selama beberapa tahun. Menariknya, situs pendukung perusahaan terdiam baru-baru ini, dan mereka tidak meninggalkan penjelasan untuk pengguna.

MySiteMyWay Discontinued - User Forum Erupts

Namun, karena tidak akan ada update tema lagi, akan sangat memudahkan saya untuk membuat beberapa perubahan radikal terhadap kinerjanya untuk tutorial ini tanpa harus berurusan dengan pembaruan kode di masa mendatang dari perusahaannya. Saya akan segera melakukannya.

Perusahaan Hosting

Menggunakan dedicated server kemungkinan besar akan berjalan lebih baik daripada shared virtual server yang semakin umum dan lebih terjangkau. Di masa lalu, saya pernah menulis tentang cara menginstal WordPress di layanan bersama (shared) seperti Digital Ocean. Ada juga layanan perantara seperti WP Engine, yang menawarkan perhatian pada pengembang dan keduanya, server shared dan dedicated.

Kualitas dari host juga penting. Banyak penyedia layanan shared WordPress pada faktanya dapat memberikan kinerja yang tidak konsisten.

Sebagai contoh, saya menggunakan tema KnowHow pada kedua Penerbitan dengan WordPress yang di-host di server virtual Digital Ocean dan Flee the Jungle di-host di WP Engine. Situsnya cukup mirip dengan bobot konten, semisal penggunaan teks dan gambar. PageSpeed ​​untuk Penerbitan dengan PageSpeed ​​WordPress adalah Mobile 73 dan Desktop 88, sementara Flee the Jungle di WP Engine sedikit lebih cepat (Mobile 78 dan Desktop 91); Hosting WP Engine yang dikelola sedikit lebih cepat dari pada hosting pribadi saya dengan shared server.

Saya juga melihat kinerja yang buruk dengan hosting Amazon low-end AWS. Kau mendapatkan apa yang kau bayar.

Caching

Caching WordPress sangat penting untuk kinerja, dan saya telah sering menulis tentang favorit saya: W3TC dan Varnish Cache, semisal Mengoptimalkan WordPress dengan Varnish dan W3 Total Cache.

Google PageSpeed improved with W3 Total Cache

Content Delivery Network (CDN)

Layanan lain yang penting adalah content delivery network. Sebelumnya saya menulis tentang Mempercepat Pengiriman Kontenmu Dengan KeyCDN untuk Envato Tuts+ dan kemudian memutuskan untuk beralih ke mereka.

Optimizing PageSpeed - KeyCDN Dashboard

Pengoptimalan Gambar

Secara teratur mengurangi dimensi dan ukuran file gambar di WordPress sangat menyita waktu.

Saya secara teratur menggunakan Acorn sebagai alat yang ringan untuk memperkecil gambar ke web dengan cepat. Saya tertawa ketika seseorang membuat tweet baru-baru ini bahwa mereka baru saja membuka Photoshop dan akan tersedia untuk panggilan telepon sebentar sementara itu dimuat—Acorn kecil dan cepat. Model langganan Adobe itu sangat lambat untuk dimuat—maaf, pelanggan.

Ada juga plugin pengoptimalan gambar otomatis seperti WP-Smush. Baru-baru ini saya mulai bereksperimen dengan Optimus baru KeyCDN. Juga, inilah ringkasan WPMU dari 10 Plugin Pengoptimalan Gambar Terbaik untuk Mempercepat Situs WordPress-mu.

Semakin bertambah, saya juga mengakses gambar di postingan saya secara eksternal dari Flickr. Sebagai contoh, ketika postingan saya tentang Pertumbuhan  lingkungan Amazon-driven yang berbasis di Seattle menjadi viral di Slashdot, tidak ada masalah kinerja atau biaya bandwidth untuk semua foto, karena Flickr menanganinya.

Kamu dapat membaca Panduan Pengoptimalan Gambar Google PageSpeed, namun saya semakin sering menemukan bahwa bantuan Google terlalu berorientasi pada penelitian (yang bagus untuk dimiliki sebagai sumber daya) namun tidak terlalu berguna untuk menyelesaikan masalahmu sendiri. Mungkin salah satunya terlalu banyak PhD di sana dan hanya sedikit pengguna sebenarnya.

Skor PageSpeed Terbaru Saya

Meskipun saya selalu memiliki W3TC dan Varnish, menambahkan KeyCDN dan Optimus meningkatkan PageSpeed ​​ke Mobile 72 dan Desktop 82, peningkatan yang baik dari 65 dan 64:

Optimizing PageSpeed - Updated Scores

Menariknya, keluhan caching gambar Google tampak seolah-olah bisa terus berlanjut tanpa batas waktu, tidak peduli apa pun yang kamu perbaiki. Untuk tutorial ini, saya bereksperimen dengan mengoptimalkan beberapa pelanggaran yang diidentifikasi untuk melihat apa yang akan terjadi. Hasilnya menarik, dan saya akan menceritakan lebih banyak tentang ini segera.

Tantangan Pengoptimalan PageSpeed

Jika kamu telah melakukan semua hal mendasar di atas, meningkatkan PageSpeed -mu dengan WordPress yang ternyata memerlukan usaha yang signifikan dan bisa memakan banyak waktu.

Tantangan WordPress

Sebuah situs statis biasanya memiliki satu file dengan memasukkan CSS dan JS yang dapat dengan mudah diminimalkan dan dikombinasikan. WordPress jauh lebih kompleks.

Begitu banyak yang dibuat secara dinamis melalui WordPress—ahem—kurang dari arsitektur yang sempurna. Butuh waktu untuk menemukan di mana file sedang dibuat, apakah itu ada dalam tema atau plugin, dan bagaimana menangani masalah ini. Ternyata ketika kamu memiliki tujuh plugin termasuk file JavaScript dan kamu ingin meminimalkan dan menggabungkannya menjadi satu, sementara memungkinkan upgrade plugin biasa, ini merupakan tantangan.

Menggunakan Minifikasi

HTML Minifikasi

Memperbarui settingan HTML W3TC saya dengan cepat menyelesaikan keluhan PageSpeed ​​tentang hal itu.

Optimizing PageSpeed - Minify HTML with W3TC

CSS Minifikasi

Untuk CSS, saya harus menambahkan file PageSpeed ​​secara terpisah kepada saya tentang manajemen file CSS W3TC. W3TC kemudian mulai mengecilkan CSS saya dan menggabungkan file yang bernama ke dalam satu file untuk disertakan.

Optimizing PageSpeed - Minify CSS

Persyaratan minifikasi PageSpeed ​​CSS ini terpecahkan.

Optimizing PageSpeed - Post HTML and CSS Minify Scores

Ini juga mengurangi jumlah file CSS yang dilaporkan untuk render bloking dari tujuh hingga empat file terkait tema (tercantum pertama di bawah Optimize CSS Delivery):

Optimizing PageSpeed - Render Blocking After Minifying CSS

Tiga file yang tersisa berasal dari direktori plugin di luar tema saya (yang akan kita jelajahi nanti):

Optimizing PageSpeed - CSS Files from Plugins

Saya harap ini memberimu rasa lubang kelinci yang pengoptimalan WordPress PageSpeed ​ dengan cepat menjadi.

JavaScript Minifikasi

Meskipun minifkasi dan penggabungan CSS umumnya cukup mudah, JavaScript cenderung banyak gagal saat kamu mencoba melakukan hal ini, menciptakan bug utama dan memecahkan bug situs.

Menariknya, PageSpeed ​​sekarang menawarkan unduhan zip lengkap dari versi kompresi file-mu yang tidak disukainya.

Optimizing PageSpeed - Download optimized files

Ini mencantumkan sepuluh file JS saya yang saya inginkan untuk diperbaiki:

Optimizing PageSpeed - Downloaded Files

Sebagai rujukan, berikut ini adalah sumber minimalisasi Google PageSpeed ​​untuk HTML, CSS, dan JS. Saya juga memanfaatkan Refresh SF, yang menyediakan akses web mudah ke berbagai tool kompresi.

Mengompres dan menggabungkan JavaScript pasti bisa membuat bug, jadi saya harus melakukan langkah demi langkah. Dengan menggunakan Manajemen File JS W3TC, saya mengurangi dan menggabungkan tujuh file JS dalam tema Construct:

Google PageSpeed - W3TC JS File Management

Ini tidak mengizinkan saya untuk mengatasi file JS saya atau masalah yang saya lihat dengan file base.js yang tidak dapat diatasi secara eksternal. Mari beralih ke masalah Render Blocking dan kemudian kembali ke minifikasi JS setelahnya.

Menghilangkan Render Blocking

Jika kamu memiliki beragam file yang perlu dimuat ke stylr (CSS) dan mengaktifkan (JS) fungsi halaman web-mu, kebanyakan browser akan melambat setelah empat sumber daya diminta secara paralel.

Berikut adalah contoh CSS yang membuat pemblokiran keluhan di PageSpeed:

Google Page Speed - CSS Render Blocking

Sementara W3TC menggabungkan banyak dari mereka ke dalam include.c46b63.css, tiga yang berikut di atas berasal dari plugin saya.

Blogger Justin Tadlock menawarkan beberapa panduan yang menjelaskan bagaimana cara meminta WordPress agar tidak memuat file CSS yang telah dimasukkan plugin saya untuk dimuat. Jawabannya adalah untuk deregister mereka dan kemudian memuat file gabunganmu sendiri.

Inilah plugin Table of Contents yang mengenalkan file JS dan CSS-nya:

Mengikuti saran Tadlock, saya mendahului plugin saya disertakan dalam tema function.php saya, yang pertama adalah CSS—Kamu harus menemukan referensi yang digunakan oleh pengembang plugin:

Saya secara manual membuat file CSS gabungan dengan ketiga stylesheet plugin tersebut. Kemudian, saya meminta W3TC untuk memperkecil dan menggabungkan file itu ke dalam mega-stylesheet-nya sendiri:

Google PageSpeed - W3TC Combine CSS

Ada masalah utama di sini saat saya mengupdate plugin saya, saya mungkin perlu memperbarui file CSS gabungan ini dan file JS yang menyertainya.

Berikut adalah postingan blog dengan beberapa pendekatan lain yang dapat kamu gunakan untuk tantangan ini.

Dengan menggunakan pendekatan Tadlock, inilah yang membuat pemblokiran PageSpeed ​​sebagai berikut:

Optimizing PageSpeed

Saya mengikuti langkah yang sama untuk file JS, sedikit lebih hati-hati. Secara bertahap, keluhan JS PageSpeed ​​saya untuk situs saya menjadi sangat kecil:

Optimizing PageSpeed - JavaScript Minify Results

Namun, seperti yang dapat kamu lihat di bawah, itu juga mengeluhkan masalah caching browser dengan file JS sehingga saya tidak dapat menemukan tautan dalam basis kode saya seperti ad_status.js dari Doubleclick.

Google PageSpeed - Leverage Browser Caching

Menghapus Peninggalan Embed Pemutar YouTube

Akhirnya, saya tahu bahwa kedua masalah minifikasi JS dan masalah caching ini terkait dengan penggunaan pemutar video eksternal YouTube.

Sementara saya penasaran mencoba perbaikan kecil yang disarankan di sini untuk mencegah pemuatan video tanpa tindakan pengguna, saya memutuskan untuk menghapus video dari slideshow beranda saya.

Kemungkinan cara saya membuat tema Construct yang meng-embed file YouTube adalah solusi peninggalan. Dukungan HTML5 YouTube mungkin bekerja lebih baik sekarang. Tetap saja, agak lucu bagaimana layanan Google memengaruhi penilaian kinerja layanan Google lainnya.

Menghapus satu fitur di beranda saya yang meng-embed video YouTube memecahkan beberapa masalah:

Optimizing PageSpeed - Troublesome YouTube on my home page

Karena saya tidak ingin kamu kehilangan saat melihat separuh saya lebih baik sebelum saya rusak oleh WordPress, saya akan menyertakan video di sini. Dulu aku pria yang baik.

Inilah yang terjadi:

  • Berkas base.js yang di-host s.ytimg.com secara eksternal yang ingin dikompres dihasilkan oleh embed video YouTube ini.
  • Dan static.doubleclick.net/instream/ad_status.js juga. Butuh beberapa saat untuk melacak lokasi file ini. Konsol pengembang Safari membantu, dengan saya melihat kedua base.js dan ad_status.js dalam frame YouTube (begitu dalam di lubang kelinci perbaikan PageSpeed ​​adalah sekarang Alice memperkenalkan dirinya kepada saya):
Optimizing PageSpeed - Safari Developer Console

Setelah perubahan JS sebelumnya dibuat dan video dihapus, masalah minifikasi JavaScript terpecahkan untuk master PageSpeed ​​saya:

Optimizing PageSpeed - Minify JavaScript Resolved

Kesalahan caching browser dengan Doubleclick yang ditunjukkan di bawah ini juga hilang.

Menggunakan Browser Caching

Sekarang, sebenarnya saya hanya perlu meng-cache gpt.js dan ga.js, dua lagi layanan Google yang di-host secara eksternal:

Optimizing PageSpeed

Ini ternyata menjadi kendala yang cukup besar dan membutuhkan banyak kompleksitas sepenuhnya memecahkan masalah ini. Solusi terbaik adalah untuk lokal host salinan script Google Analytics dan DFP dan menggunakan skrip cron secara teratur memperbarui mereka pada server-mu. Alice mulai bosan dengan saya—harapanmu masih mengikuti.

Saya melihat tema lainnya yang saya gunakan dengan Plugin Google Analytics (Construct memiliki settingan untuk Analytics) dan mereka juga tidak membahasnya.

Jadi, saya membuat salinan script lokal untuk Google Analytics dan Google DFP, dan tak lama setelah itu, browser caching diselesaikan di PageSpeed:

Optimizing PageSpeed - Local use of Google Scripts

Berikut adalah informasi lebih lanjut dari Google pada Browser Caching, lagi sumber daya teknis yang sangat mendalam tanpa banyak panduan untuk administrator WordPress.

Google dapat memberikan kelompok-kelompok umum yang populer pada file JavaScript yand di minifikasi dan dikombinasikan untuk mendukung penerbit PageSpeed. Akan menolong juga jika mereka tidak memuat file mereka secara individu dan selainnya dalam script.

Mari kita secara singkat mengembalikan keluhan ukuran gambar PageSpeed sebelum membungkus.

Kembali ke Pengoptimalan Gambar

Google PageSpeed gambar saran sebenarnya bisa melemahkan kegunaan situs Anda. Berikut adalah salah satu contoh, menampilkan gambar saya host di halaman rumah saya.

Untuk posting yang tampil di Facebook dengan gambar kecil, jaringan sosial membutuhkan dimensi minimal 200 pixel pada sisi terpendek. Versi saya adalah 281 x 200 (ditunjukkan di sini sedikit disesuaikan untuk Tuts + persyaratan):

Jeff Reifman Featured Image on Home Page

Dan, di sini adalah versi yang disediakan oleh PageSpeed di download Zip-nya:

Google Page Speed Recommended Jeff Reifman Featured Image on Home Page

Kamu dapat melihat bahwa kualitasnya menjadi lebih buruk lagi, tetapi lebih penting lagi bahwa PageSpeed ingin saya untuk mengecilkan gambar untuk sebuah dimensi yang Facebook tidak akan menerima untuk dimunculkan dalam postingnya.

Pada akhirnya, saya memilih untuk meninggalkan situs saya dengan segenggam PageSpeed gambar optimasi keluhan, menurunkan nilai saya.

Penutup

Setelah semua karya ini, kemana situs saya berakhir?

Skor PageSpeed ​​Terakhir Saya

Mobile PageSpeed

Nilai PageSpeed akhir termasuk Mobile 70, menampilkan beberapa keluhan yang tersisa di bawah ini:

Optimizing PageSpeed - Final Scores Mobile

Berikut adalah optimasi gambar yang tersisa:

Optimizing PageSpeed - Final Scores Mobile with Image issues

Dan di sini adalah ringkasan dari semua aturan yang disahkan:

Optimizing PageSpeed - Final Scores Passed Rules

Juga, di sini adalah nilai UX akhir. Sebagian besar situs tidak memiliki masalah besar dengan ini, jadi saya tidak mengalamatkan mereka hari ini:

Optimizing PageSpeed

Desktop PageSpeed

Skor akhir Desktop adalah 86, tidak buruk:

Google PageSpeed Final Desktop Score

JavaScript rewel. Aku tidak pernah mampu berhasil mengecilkan dan menggabungkan dua file terakhir menjadi yang pertama. Bahkan meninggalkan mereka tidak dikompresi tidak pernah bekerja. Bekerja dengan tema dan plugin adalah sulit. Itu akan diperlukan beberapa hari kerja yang didedikasikan untuk memecahkan masalah ini.

Berikut adalah gambar yang mengajukan keluhan ukuran:

Google PageSpeed Final Desktop Score Image Complaints

Pada akhirnya, mengoptimalkan PageSpeed saya mengambil banyak waktu dan usaha dan meninggalkan situs saya rentan terhadap pembaruan plugin masa depan dan Google script. Banyak dari pekerjaan ini cukup membingungkan, detail-oriented dan memakan waktu. Hal ini juga agak gila-membuat dan mematikan pikiran. Terima kasih Google.

PageSpeed ​​dari Situs Utama Lainnya

PageSpeed bukan segalanya. Konten penting juga. Berikut adalah beberapa situs yang terkenal dan PageSpeed mereka. Hasilnya akan mengejutkanmu.

John Gruber Daring Fireball

Daring Fireball (DF) adalah salah satu yang tercepat berfokus pada konten blog. ini mempromosikan pengiklan dengan cara yang minimal. Halaman menjalankan ringan dan cepat. Gruber's CMS adalah versi yang disesuaikan dari Movable Type. Skor hanya anak laki-laki lebih baik dari situs saya. DF juga menghasilkan ton pendapatan dengan minimal periklanan.

Daring Fireball PageSpeed

New York Times

Jelas sebuah organisasi berita utama, mereka memiliki nilai PageSpeed mengerikan:

PageSpeed for New York Times

Seattle Times

Mencengangkan, kain lokal kami dengan iklan mengerikan dan langganan bouncing model jauh lebih buruk:

Google PageSpeed - The Seattle Times

Foto B&H

Situs e-commerce populer, foto B&H, memiliki skor mobile yang mengerikan dan skor desktop tepat di bawah saya:

PageSpeed BH Photo

Amazon

Kamu mungkin pernah mendengar tentang perusahaan ini dalam esai terakhir saya bagaimana membuat WordPress situs berbeda oleh geografi—mereka menjual banyak barang secara online. Nilai PageSpeed saya secara signifikan lebih tinggi daripada mereka:

PageSpeed Amazon

Apakah berikutnya?

Di masa depan, saya akan melihat beberapa perangkat tambahan lain untuk meningkatkan PageSpeed situs saya:

  • Migrasi ke tema WordPress baru. Terutama, saya sedang mencari desain yang lebih bersih, kinerjanya lebih tinggi dan responsif dengan PageSpeeds yang cepat.
  • Meng-upgrade server saya ke PHP7. Upgrade menjanjikan hampir 2 x peningkatan kinerja. Hal ini tidak sederhana untuk meng-upgrade sebelum rilis Ubuntu paket, tetapi hal ini tidak terlalu sulit.
  • Meng-upgrade server saya ke Varnish4. Upgrade memerlukan beberapa pengerjaan ulang file konfigurasi, dan saya tidak yakin kompatibilitasnya dengan W3 Total Cache, tapi saya bersedia mencobanya.
  • Meninjau PageSpeed saya pada semua halaman situs saya, tidak hanya halaman muka.

Jika aku tidak bermigrasi tema segera, aku akan perlu untuk pergi menerapkan bahwa script cron untuk mensinkronisasi script Google saya host sendiri untuk Analytics dan DFP dan mencari cara untuk memantau pembaruan plugin untuk perubahan JS dan CSS. Saya mungkin harus mengembalikan keuntungan PageSpeed ​​ini secara pasti.

Jika kamu memiliki pertanyaan, silahkan posting di bawah ini. Atau, kamu dapat menghubungi saya di Twitter @reifman. Silakan periksa Envato Tuts+ instruktur halaman saya untuk melihat tutorial lain yang sudah aku tulis, seperti seri startup (Membuat Startup-mu dengan PHP).

Link terkait

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.