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

Mengoptimalkan Google PageSpeed menjadi 100 di WordPress

by
Difficulty:AdvancedLength:LongLanguages:
This post is part of a series called Improving Google PageSpeed.
Hands On Improving Google PageSpeed
Installing the Google PageSpeed Module

Indonesian (Bahasa Indonesia) translation by Yanti Baddolo (you can also view the original English article)

Final product image
What You'll Be Creating

Bagaimana Mencapai 100 di PageSpeed

Selamat datang di bagian kedua rangkaian kami di Google PageSpeed.  Pada episode pertama, saya mengoptimalkan PageSpeed dari situs saya lalu tema, MySiteMyWay's Construct.  Saya berhasil sampai ke angka 70 untuk Mobile dan 86 untuk Desktop.

Namun, dengan penutupan MySite, saya memilih tema baru dan mencapai 100 PageSpeed untuk Mobile and Desktop.  Butuh sekitar 12 jam usaha ekstra untuk mencapai hal ini.  Sekarang, kinerja situs saya adalah salah satu situs WordPress tercepat yang pernah saya lihat dalam waktu yang lama--cek.  Browsing hamper hanya sekejap saja.

Dalam tutorial ini, saya akan memandu Anda bagaimana saya melakukannya dan apa yang saya pelajari tentang WordPress dan Google PageSpeed.  Untuk beberapa hari saya melakukan ini, saya pikir saya mungkin akan mencapai angka 90an.  Saya sedikit terkejut saat tiba-tiba melompat ke angka 100 untuk Desktop-dan hanya ada beberapa detail tersisa untuk memaksimalkan Mobile.

Bagi Anda yang tidak tahu, Google PageSpeed adalah alat gratis yang menilai kinerja dan kegunaan situs web Anda untuk platform mobile dan desktop.  Ini sangat penting karena Google menggunakannya dalam menentukan elemen kunci dari peringkat SEO kita, yaitu seberapa tinggi kita tampil di hasil pencarian mereka.

Jika Anda ingin lebih banyak latar belakang tentang manfaat peningkatan kecepatan situs, baca Moz's Why Site Speed Optimisation Should Be Part of Your SEO Strategy.  Ini menyoroti, "... beberapa studi kasus menunjukkan bahwa halaman yang dimuat lebih cepat berkorelasi kuat dengan pendapatan yang lebih tinggi."

Google dan WordPress Tidak Membuat Ini Mudah

Pada akhirnya, mengoptimalkan PageSpeed saya membutuhkan banyak waktu dan usaha dan membiarkan situs saya rentan terhadap plugin dan pembaruan skrip Google yang akan datang.  Banyak pekerjaan ini cukup membingungkan, sangat detail dan menyita waktu.  Ini juga agak gila—membuat dan mematikan pikiran.  Terima kasih, Google.

Situs statis biasanya memiliki satu file dengan CSS dan JS termasuk yang dapat dengan mudah digabungkan dan digabungkan.  WordPress jauh lebih kompleks.  Begitu banyak diciptakan secara dinamis melalui WordPress's—ahem – dari arsitektur yang kurang sempurna.

Butuh waktu untuk menemukan di mana file dibuat, apakah itu ada dalam tema atau plugin, dan bagaimana menangani masalah ini.  Ternyata saat Anda memiliki tujuh plugin termasuk file JavaScript dan Anda ingin meminimalkan dan menggabungkannya menjadi satu, sementara Anda memungkinkan melakukan upgrade plugin biasa, ini merupakan tantangan di WordPress yang selalu mengubah tema dan plugin.

Hal ini membuat banyak pengembang sedih:

PageSpeed Like a Sad Developer by Picasso Paris France

Kredit gambar: Foto saya dari Picasso Museo di Paris.  Sekarang bisa disebut "Pengembang Tersembunyi Menghadapi PageSpeed ​​of Mobile 55 / Desktop 62"

Dengan itu, izinkan saya untuk mendorong Anda dengan menunjukkan bagaimana saya melakukannya (Anda tidak punya jadwal untuk dilakukan hari ini, bukan?).  Ingat, kebutuhan situs Anda mungkin berbeda sedikit dari saya.

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

Langkah Dasar untuk PageSpeed 100

Memilih Tema Baru

Jika Anda berada di pasar untuk tema WordPress baru dan ingin mengevaluasi PageSpeed, Anda mungkin akan terkejut bahwa skor untuk tema terkenal sering kali berjalan di angka 60an dan 70an namun juga sampai 90an.  Berikut adalah beberapa artikel yang mengulas tema dan PageSpeed via ColorLib dan WPMU.  Bagaimanapun, saya berharap lebih tinggi.

Sama seperti contoh harapan industri, situs web The New York Times mencetak skor 53/55, jauh di bawah 100.

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 saat ini adalah responsif.  Beberapa pembuat konten sepertinya tidak melihat PageSpeeds mereka saat mereka membangunnya.

Array Themes Medium

Untuk tutorial ini, saya akan fokus untuk memperbaiki situs pribadi saya, JeffReifman.com.  Saya memilih Medium by Array Themes karena beberapa alasan.

Yang pertama adalah kecepatan dasarnya.  Skor Medium untuk Mobile adalah 74 dan Desktop 89 dimulai dari server demo mereka.  Meskipun ini sudah sedikit lebih baik daripada yang telah saya maksimalkan, itu adalah tema yang lebih modern dan masih banyak langkah pengoptimalan yang tersisa yang bisa saya coba.  Saya berharap untuk membawa PageSpeed ke angka 80an atau 90an.

Selain itu, mengingat pertumbuhan pembaca mobile, saya ingin beralih dari mengandalkan sidebars – terutama untuk penempatan iklan (saya berharap dapat menulis tentang arah pendapatan baru saya dalam rangkaian Google DFP yang sedang berjalan).  Tema Medium melakukan pekerjaan yang baik melipat sidebar kiri menjadi menu responsif dan menyembunyikan sidebar kanannya.

PageSpeed Awal Medium

Inilah PageSpeed awal untuk demo Medium (demo hosting tidak pernah dioptimalkan dengan ketat).  Sungguh menyenangkan untuk melihatnya masih memiliki banyak masalah yang belum ditangani karena hal itu menunjukkan bahwa ini lebih baik daripada tema Construct yang saya optimalkan sebelum usaha ekstra diterapkan dan tugas serupa yang saya ketahui berhasil memaksimalkan skornya:

PageSpeed Optimization Array Themes Mobile Part A

Berikut masih ada beberapa masalah:

PageSpeed Optimization Array Themes Mobile Part B

Dan lagi:

PageSpeed Optimization Array Themes Mobile Part C

Dan tantangan user experience, yang lebih terlokalisasi:

PageSpeed Optimization Array Themes Mobile Part D

Akhirnya, inilah skor demo Desktop-nya:

PageSpeed Optimization Array Themes Desktop Just One Part

Didorong oleh nilai dasar, saya membeli dan memasang tema Medium di server saya dan mulai menggunakannya.

Perlu diingat bahwa mengubah tema bisa sangat rumit.  Bagi saya, mengganti, menghapus dan memperbarui built-in shortcode dari tema Construktor memakan banyak waktu, dan saya belum sepenuhnya selesai, misalnya Dropcaps, variasi pullquote, tombol, tab dan menu navigasi berbasis halaman.  Dorongan saya untuk mendapatkan skor 100 membuat saya termotivasi.  How to Perform Mass Search and Replace in WordPress menawarkan beberapa solusi yang bagus untuk mencari dan mengganti kode shortcode.

Meskipun tutorial ini tidak akan membantu Anda melalui langkah-langkah yang tepat untuk meningkatkan PageSpeed situs Anda menjadi 100, ini akan memandu Anda melalui banyak solusi yang mungkin anda gunakan dan mengidentifikasi hambatan umum.  Ada beberapa sumber bagus lainnya yang akan saya bagi di akhir.

Pilar Kinerja di WordPress

Saya menghubungi ArrayThemes sedikit tentang kinerja demo sub-100 tema Medium.  Mereka mengirim tanggapan yang bagus:

Tes pengoptimalan PageSpeed harus dilakukan dengan cukup sulit... demo kami tidak optimal karena tidak melakukan caching, namun sebenarnya kami tidak memerlukan cache pada demo kami ... Saran PageSpeed tidak sepenuhnya akurat atau patut dicontoh dari kinerja sebuah tema.  Ini akan tergantung sepenuhnya pada setup, server, caching dan pengoptimalan lainnya yang Anda putuskan.

Ini membuat titik peluncuran yang sempurna untuk meninjau elemen dasar umum untuk kinerja WordPress.  Semua bidang kinerja di bawah ini membahas skor PageSpeed yang mendasarinya, tidak sepenuhnya tapi hanya dasar-dasarnya.

Caching

Caching WordPress sangat penting untuk kinerja, dan saya telah sering menulis tentang favorit saya: W3TC dan Varnish Cache, misalnya Optimizing WordPress with Varnish dan W3 Total Cache.

Google PageSpeed improved with W3 Total Cache

Ternyata ada beberapa plugin yang dirancang untuk membantu Anda mengatasi tantangan caching yang efisien.  Berikut adalah dua terbaik yang pernah saya coba:

  • Minit: Plugin WordPress untuk menggabungkan file CSS dan JavaScript.
  • Dependency Minification: Secara otomatis menggabungkan dan meminimalisir skrip dan stylesheet yang ada dengan menggunakan sistem depedensi standar.
PageSpeed Dependency Minification Plugin

Kredit gambar: WordPress Tavern

Keduanya sangat membantu, namun untuk saya itu tidak cukup banyak menghapus hambatan terkait dengan PageSpeed, seperti menyematkan CSS di tag <head> untuk menghapus masalah PageSpeed; Dengan kata lain, plugin ini tidak akan membawa Anda sepenuhnya ke nilai PageSpeed 100.  Saya menemukan Dependency Minification efisien dan bermanfaat, namun kurangnya fleksibilitas membuat saya meninggalkannya.

Akhirnya, saya berulang kali kembali ke W3 Total Cache dan menemukan cara baru yang lebih ampuh untuk menekan kinerja.  Ini tidak terlalu sempurna dan pasti memiliki beberapa bug UX, tapi ini bekerja cukup baik bagi saya untuk menemukan jalan saya dengan pendekatan lain ke nilai PageSpeed 100.

Pada akhirnya, saya hanya memilih satu plugin baru yang memudahkan untuk menghapus masalah PageSpeed dengan Disqus-saya akan mengulasnya lebih lanjut di bawah ini.

Content Delivery Networks (CDN)

Layanan lain yang penting adalah content delivery network.  Sebelumnya saya menulis tentang Accelerate Your Content Delivery With KeyCDN di Envato Tuts+ dan kemudian memutuskan untuk beralih ke mereka sebagai pelanggan.

Optimizing PageSpeed - KeyCDN Dashboard

Pada akhirnya, ada berbagai CDN yang dapat Anda pilih, seperti CloudFlare dan RackSpace untuk beberapa nama.

Pengoptimalan gambar

Baru-baru ini, saya mulai bereksperimen dengan layanan plugin pengoptimalan gambar Optimus dan WordPress dari KeyCDN.  Ada kemungkinan kecil itu dijalankan oleh robot yang dibangun dengan Apple Lisas tua dan Macs:

PageSpeed Optimus Image Optimization

Ini bekerja dengan baik, tapi alternatif populer lainnya adalah WP-Smush, plugin yang lebih tua dengan lebih dari 300.000 pengguna.

Menghilangkan Render Blocking

Jika Anda memiliki beragam file yang perlu dimuat ke style (CSS) dan mengaktifkan (JS) fungsi halaman web Anda, kebanyakan browser akan melambat setelah empat sumber daya dipanggil secara paralel.

Berikut adalah contoh CSS yang melakukan pemblokiran render di PageSpeed:

PageSpeed Remove render blocking in JS and CSS

Ini bisa menjadi item WordPress yang berat untuk menghilangkan dikarenakan oleh tema dan arsitektur plugin.  Kita akan kembali ke sana.

Langkah apa yang akhirnya mendorong My Site ke nilai 100?

Pendekatan Optimasi Secara Tertarget

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

Mari kita lakukan selangkah demi selangkah melalui masalah-masalah yang teridentifikasi dan cara saya memecahkannya.  Sebenarnya, saya melakukan sejumlah percobaan dengan berbagai alat dan pendekatan yang berbeda.  Saya secara teratur menjatuhkan satu pendekatan dan kembali ke yang lain.  Solusi saya ternyata merupakan penyelesaian solusi yang cukup terkelola dengan baik.  Jalan tersebut tidak langsung Yoda.

Minifikasi HTML, JavaScript dan CSS

Sebagai contoh, berikut ini cara meminimalkan HTML dalam W3 Total Cache:

PageSpeed W3TC Minification of HTML

Bundling JavaScript di Akhir Halaman

Demikian pula, mudah meminimalkan JavaScript di W3 Total Cache.  Perhatikan di bawah ini bahwa saya menginstruksikan W3TC untuk menyematkan file terkompresi bukan di <head> melainkan sebelum </body>.  Menunda JavaScript dapat meningkatkan skor PageSpeed Anda.

PageSpeed W3TC Minification of JavaScript

Meminimalkan CSS Gabungan Dari Tema dan Plugin

Karena kedua tema dan plugin menggunakan JavaScript dan CSS, dibutuhkan sedikit usaha untuk meminimalkannya dan menggabungkannya menjadi satu file (dan itu bahkan tidak cukup untuk PageSpeed, yang akan saya bahas lebih lanjut di bawah).

Untuk memblokir plugin memuat CSS mereka sendiri dan menginstruksikan W3TC untuk memuat versi kompresi dan gabungan, Anda perlu menemukan handle plugin untuk file CSS (berbeda dari nama file) dan menambahkan kode pada tema Anda untuk menghentikan instruksi pemuatan plugin.  Kemudian, masukkan path ke setiap file CSS di dalam kotak dialog W3TC di atas untuk dimuat dengan yang lain.

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

Inilah Table of Contents plugin saya yang men-enqueu file JS dan CSS-nya:

Mengikuti saran Tadlock, saya men- deregistered plugin saya yang ada di dalam file function.php tema saya, dimulai dengan CSS-Anda 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 stylesheet-nya sendiri seperti yang ditunjukkan di atas. 

Mengoptimalkan CSS Loading untuk PageSpeed

W3TC dapat menggabungkan semua file tema dan plugin saya, namun PageSpeed ​​tetap tidak suka melihat satu pun CSS include (sangat menjengkelkan untuk melakukan praktik pengembangan HTML yang baik):

PageSpeed Failing you because you still have one CSS file

Akhirnya saya memasukkan sembilan file CSS (hanya tujuh yang ditunjukkan di bawah ini).  Pertama, Anda harus menemukan plugin untuk CSS dan men-deregister dalam tema Anda seperti dijelaskan di atas.  Kemudian, Anda harus mengarahkan mereka semua ke W3TC.

Meskipun ada beberapa cara untuk mendapatkan versi minified dari semua ini, saya sebenarnya hanya mengambil file terkompresi W3TC.  Saya menghapus semua argumen kueri caching, mis.  cbe3w2, dengan search dan replace di TextEditor.  Saya masih pengguna TextMate yang setia, tapi sebenarnya sering terjadi penundaan dan hang setiap kali saya mencoba menavigasikan file CSS minified.  Jadi TextEditor membantu saya mengedit file-file ini secara terpisah.  Permintaan maaf kepada programmer laini, saya belum pindah ke Sublime.

Walau itu bekerja bagi saya menyisipkan CSS saya yang diperkecil ke dalam header, saya kemudian perlu mengubahnya secara dinamis untuk mendapatkan konten file CSS dan menggantinya.

Begitu saya menambahkan plugin lain untuk sharing sosial, paste tidak lagi berfungsi dan saya harus memisahkan file dengan mekanisme di atas.  Ini juga memberikan fleksibilitas lebih di masa depan.  Google PageSpeed tidak pernah melihat ini, dan cache Varnish saya menyembunyikan kelambatan apapun termasuk dua file ini.

Pada akhirnya, saya mengkonfigurasi semua file CSS saya di W3TC, membuat salinan dari file terkompresi, dan kemudian mematikan fitur include:

PageSpeed W3TC Now Disabled - but prior used to compress all the CSS files

Salah satu kekurangan W3TC adalah berulang kali menunjukkan pesan kesalahan yang menyebalkan meskipun Anda sengaja menggunakannya dengan cara yang tidak biasa.

Saat memindahkan file CSS dari direktori plugin, pastikan Anda menetapkan path relatif yang benar ke gambar dan seterusnya untuk beroperasi dari direktori akar situs.  Saya memiliki banyak situasi di mana gambar tidak akan dimuat sampai saya menemukan di mana untuk menyelesaikan hal-hal ini.  Saya akan membagikan contoh di bagian Troubleshooting di bawah ini.

Caching Script Eksternal di Browser

Menggelikannya, Google PageSpeed mengeluh jika Anda memuat pustaka JavaScript-nya secara eksternal.  Saya menerima kekurangan untuk skrip eksternal yang terkait dengan Flickr, Disqus, dan Google Analytics:

PageSpeed Leverage Browser Caching from External Scripts

Hal ini ternyata merupakan hambatan besar dan membutuhkan banyak waktu dan kompleksitas untuk menyelesaikan masalah ini sepenuhnya.

Menghapus Masalah Embed Flickr

Pertama, saya baru saja kembali dari perjalanan ke India dan meletakkan setiap posting blog dengan foto Flickr-embed di beranda.  Tema Medium saya dengan cepat melakukan scroll melalui sejumlah posting, jadi PageSpeed mengeluhkan semuanya.

PageSpeed Cobra photo from India

Setelah mengamati bahwa PageSpeed mengeluhkan keduanya tentang ukuran gambar embed Flickr (pada berbagai jumlah piksel) dan melihat keterkaitan JavaScript eksternal ini, saya kembali kepada menggunakan gambar yang dioptimalkan dari hosting situs saya sendiri.  Namun mereka masih ditautkan ke Flickr untuk album India saya yang masih akan berlangsung.

Ini adalah contoh yang baik tentang bagaimana mencoba menggunakan layanan pihak ketiga yang hebat dengan tujuan sederhana untuk menyematkan foto membunuh skor PageSpeed Anda.  Flickr belum melakukan pekerjaan optimal untuk membantu pengguna WordPress menyelesaikan ini.  Sebagai contoh, mereka perlu:

  • menawarkan ukuran embed yang tetap menjaga pengoptimalan gambar PageSpeed tetap bagus (mungkin sebagai pilihan ekspor terpisah dikompromikan untuk kualitas PageSpeed-Flickr tentang kualitas gambar)
  • mempublikasikan kode JavaScript dengan cara yang mudah untuk mengintegrasikan ke file gabungan WordPress dan W3TC

File JavaScript Eksternal Hosting Sendiri

Dengan file Google yang tersisa, solusi terbaik adalah meng-host salinan skrip untuk Analytics dan DFP secara lokal dan menggunakan skrip cron untuk memperbaruinya secara berkala di server.

Pertama, saya berhenti menggunakan plugin Google Analytics dan menambahkan kode modifikasi secara manual ke header tema saya:

Perhatikan bahwa saya mengubah path ke salinan skrip lokal saya.  Kemudian, saya membuat salinan skrip lokal untuk Google Analytics dan DFP Google, dan tak lama setelah itu maka caching browser saya telah teratasi di PageSpeed kecuali Disqus.

Memecahkan Masalah Pemuatan Plugin Disqus

Saya tidak yakin apakah ini untuk keamanan atau dukungan multi-platform atau "kepandaian" murni, namun Disqus dan penyedia lainnya seperti Flickr tampaknya mengaburkan file sebenarnya yang mereka muat dengan file lainnya.  Hal ini membuat mengoptimalkan PageSpeed jauh lebih sulit dan seringkali tidak terpecahkan.

Saya akui, saya menghabiskan dua sampai tiga jam untuk mencoba berbagai pendekatan untuk mengoptimalkan plugin Disqus-tidak ada yang berhasil untuk saya.

Akhirnya, saya menguninstall plugin Disqus dan memasang Disqus Conditional Load:

PageSpeed Disqus Conditional Load Plugin

Walau dimaksudkan untuk melakukan banyak hal, hal ini juga memungkinkan untuk mengoptimalkan PageSpeed dengan instalasi.

Tiba-tiba, PageSpeed's Leverage Browser Caching mengalami penurunan.  Kudos untuk DCL!

Memperbaiki Target Tap

PageSpeed sering mengeluhkan tautan yang terlalu dekat jaraknya di perangkat seluler.  Saya bereksperimen dengan beberapa pendekatan dan akhirnya berhenti menampilkan tag pada perangkat mobile.

Jika saya menghabiskan lebih banyak waktu, saya mungkin bisa memperbaiki UX tersebut dan lulus dengan PageSpeed.

Penyelesaian masalah

Gambar Hilang Dari File kompresi dan Gabungan CSS

Plugin ArrayToolkit, yang menampilkan ikon follow di sidebar kanan, berhenti bekerja untuk saya.  Butuh beberapa saat untuk menyelesaikan path mana yang perlu dikodekan dengan path absolut agar bisa bekerja.

PageSpeed Missing Icons after combining and compressing CSS

Akhirnya, saya menemukan dan mengganti path ini dengan path relative yang sudah terkoreksi ke direktori plugin asli:

JavaScript yang Rusak

Saya masih memiliki satu masalah yang harus saya selesaikan.  Tab plugin baru saya (Construct memiliki built-in tab) berhenti bekerja.  Saya hanya perlu meluangkan waktu untuk debugging, tapi seharusnya cukup mudah untuk dipilah. 

Memilih Minifier Terbaik

Saya bereksperimen dengan Kompresor YUI dengan W3TC untuk memampatkan file JavaScript dan CSS saya.  Alih-alih mengarah pada peningkatan kecepatan, semuanya tapi malah menjadi berantakan.

Jika Anda tertarik untuk mencari tahu apa yang saya lakukan salah, Anda dapat menginstal Java dan YUICompressor seperti ini:

Silahkan posting di komentar jika anda tahu bagaimana membuatnya bisa bermain dengan baik dengan WordPress.

Dalam Penutupan

Setelah babak kedua membahas tema baru, semuanya berjalan lebih baik dari yang saya harapkan.  Saya tidak pernah yakin akan mencapai tujuan optimal saya.

Skor PageSpeed Terakhir Saya

Saya mencetak nilai PageSpeed 100 untuk Mobile dan Desktop.  Yang lebih terasa lagi, situs saya berjalan super cepat-lebih cepat daripada blog yang pernah saya punya sebelumnya.  Saya sangat penasaran untuk melihat bagaimana traffic pencarian masuk dan aktivitas pembaca bereaksi terhadap skor dan kinerja yang lebih cepat dalam beberapa bulan ke depan.

Berikut adalah skor PageSpeed terakhir saya, pertama Mobile:

Mobile PageSpeed score 100

Dan sekarang Desktop:

Desktop PageSpeed score 100

Desktop mencapai 100 pertama, dan saya harus kembali dan menyelesaikan beberapa penyesuaian (menangani target tap) untuk mendapatkan Mobile di sana.

Dan lagi, kecepatan situs membuatnya layak dikunjungi secara cepat.  Jika Anda mengetahui situs komersial lainnya yang berjalan di nilai PageSpeed 100, tulislah di komentar.  Saya akan senang untuk mengeceknya.

Sama seperti salah satu contoh perubahan SEO, esai populer saya tentang penayangan melonjak ke peringkat ketiga berdasarkan hasil penelusuran seluler di keyword "kencan Seattle" (bukan di desktop).  Ini memberi tahu saya bahwa mungkin cerita di situs utama yang mengalahkannya memiliki PageSpeeds mobile yang buruk, karena ini tidak mudah.

Tantangan Pemeliharaan di Masa Depan

Untuk memaksimalkan PageSpeed situs saya, saya harus membuat sejumlah penyesuaian pada tema saya, yang sekarang akan membuat ketergantungan pada perubahan pada skrip dan pembaruan eksternal pada tema dan plugin.  Setelah selesai dengan tujuan jangka pendek saya, saya memiliki pekerjaan yang harus dilakukan untuk mengatur sistem agar lebih mudah mengelolanya.

Cron untuk Berkas Eksternal

Nantinya saya perlu menerapkan skrip cron tersebut untuk menyinkronkan skrip Google yang dikelola sendiri untuk Analytics dan DFP.

Inilah perusahaan yang memberikan pendekatan sederhana untuk menggunakan Analytics tanpa merusak PageSpeed, memperbaiki poin terakhir di Google PageSpeed Insights.  Saya lebih suka tidak bergantung pada pihak ketiga lainnya.

Mengelola Pembaharuan Tema

Saya juga perlu lebih baik dalam mengecek update tema Medium dan mengintegrasikan perubahannya.  Membangun tema turunan dari perubahan saya mungkin juga memudahkan proses ini.  Kemungkinan besar saya akan mencari perubahan yang bisa menimpa, diperbarui (atau tambahan) dari file JavaScript dan CSS.

Mengelola Pembaruan Plugin

Demikian pula, ketika plugin diperbarui, saya perlu melihat pembaruan jenis yang sama.  Ini bisa membantu saya mengatur penggunaan GitHub dengan plugin WordPress dengan lebih baik.  Saya sudah menggunakannya untuk tema saya.

Otomatisasi

Saya mungkin ingin meluangkan waktu untuk menulis skrip untuk melacak file JavaScript dan CSS mana yang digunakan dengan tema dan plugin yang diperbarui, mendownloadnya ke server saya, dan meminimalkan dan mengemas file yang sesuai untuk dihubungkan atau disertakan.

SSL

Akhirnya, salah satu kejutan saya adalah SSL tidak diharuskan untuk mencapai nilai PageSpeed 100.  Ini agak masuk akal namun menyoroti bahwa berbagai komponen yang berbeda dapat mempengaruhi peringkat pencarian Google Anda.  Saya akan menulis tentang penerapan Let's Encrypt's free SSL with WordPress segera.

Apa berikutnya?

Jika Anda menikmati ini, namun ingin membaca tutorial yang lebih umum yang tidak membahas secara mendalam hal-hal yang mungkin mungkin tidak berlaku bagi Anda, KeyCDN's Google PageSpeed Scoring 100/100 with WordPress adalah bagian pelengkap yang sangat baik.  Saya juga telah menulis sebuah karya sponsor tentang CDN mereka di Envato Tuts + (Accelerate Your Content Delivery With KeyCDN) dan melanjutkan untuk melanjutkannya sebagai pelanggan.

Sementara itu, jika Anda mencari utilitas lain untuk membantu Anda membangun perangkat Anda yang berkembang untuk WordPress atau kode untuk dipelajari dan menjadi lebih berpengalaman di WordPress, jangan lupa untuk melihat apa yang tersedia di Envato Market.

Di masa mendatang, saya akan melihat beberapa penyempurnaan untuk meningkatkan kinerja keseluruhan situs saya. Ini termasuk: Ini termasuk:

  • Meninjau PageSpeed individu ​​dari posting saya yang paling populer seperti Amazon Marketplace Fraud Made Easy (saat ini 97), untuk memastikan semuanya berjalan pada level 100.  Seperti pada contoh ini, seringkali itu hanya karna ukuran gambar embed yang mengganggu PageSpeed.
  • Meningkatkan pengelolaan tema dan plugin saya untuk mempertahankan pengoptimalan ini semudah mungkin saat pembaruan tiba, mis. Melacak perubahan pada file JS dan CSS dalam pembaruan, menjaga salinan file JS eksternal seperti Analytics diperbarui, mengompres ulang file yang diperbarui, dll.
  • Upgrade server saya ke PHP7.  Upgrade menjanjikan peningkatan kinerja hampir 2x.  Tidak mudah melakukan upgrade sebelum rilis Ubuntu yang dibundel, tapi tidak terlalu sulit.
  • Upgrade server saya ke Varnish4.  Upgrade memerlukan beberapa pengerjaan ulang file konfigurasi, dan saya tidak yakin dengan peningkatan dan kompatibilitas kinerjanya dengan W3 Total Cache, namun saya bersedia mencobanya.
  • Menjelajahi CacheEnabler KeyCDN untuk menyajikan gambar Webp yang lebih efisien kepada pengguna Chrome.  Ukuran file Webp secara signifikan lebih kecil namun belum didukung oleh Safari.  Saya sebenarnya sangat senang bisa meningkatkan pengalaman pengguna dengan hal ini.

Jika ada pertanyaan, silahkan posting di bawah ini.  Atau, Anda bisa menghubungi saya di Twitter @reifman.  Silakan periksa halaman Envato Tuts + instructor saya untuk melihat tutorial lain yang telah saya tulis, seperti Cloning WordPress di Linux (dalam 90 detik).

Tautan yang berhubungan

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.