Media Pengembangan Web & App | by APPKEY

Pembuatan Website Front end PHP: Bagaimana Menambahkan Header Kedaluwarsa untuk Skrip Eksternal?

PHP: Bagaimana Menambahkan Header Kedaluwarsa untuk Skrip Eksternal?

-

Setiap situs web menggunakan file JavaScript eksternal. Mereka diperlukan misalnya saat menggunakan Google Analytics, atau penyedia iklan seperti BuySellAds.

Untuk memanfaatkan cache browser dan mengoptimalkan kecepatan situs web Anda, disarankan agar Anda menambahkan header kedaluwarsa ke skrip Anda, yang tidak dapat Anda lakukan pada file eksternal.

Pada artikel ini, akan akan menunjukkan cara mengimpor file JavaScript atau CSS eksternal secara dinamis ke situs Anda sendiri untuk kinerja yang lebih baik.

Apa Itu Header Kedaluwarsa?

persamaan-dan-perbedaan-python-ruby

Header kedaluwarsa memungkinkan pengembang web memberi tahu browser apakah sumber daya di situs web perlu diminta dari sumber atau dapat diambil dari cache browser.

Biasanya, sumber daya statis situs web seperti gambar atau .pdf dokumen memiliki header kedaluwarsa, yang mengakibatkan browser menyimpan sumber daya tersebut dalam cache.

Saat pengunjung kembali ke situs Anda, browser mengambil sumber daya dari cache-nya sendiri alih-alih memintanya dari server Anda dengan permintaan HTTP.

Oleh karena itu, ketika Anda menambahkan header kedaluwarsa ke situs Anda, ini akan meningkatkan waktu buka halaman Anda, dan memberikan pengalaman pengguna yang lebih baik kepada pengunjung situs web.

Artikel Terkait  Top Level Domain Adalah? Inilah Contoh Domain TLD Terbaik

Di Apache, header yang kedaluwarsa umumnya ditetapkan dalam file .htaccess. Untuk referensi, berikut adalah bagian yang dapat Anda gunakan di salah satu file .htaccess situs Anda:

ExpiresActive On

ExpiresByType image / jpg “access plus 1 month”

ExpiresByType image / jpeg “access plus 1 month”

ExpiresByType image / gif “access plus 1 month”

ExpiresByType image / png “access plus 1 month”

 

ExpiresByType text / css “access plus 1 month”

ExpiresByType application / pdf “access plus 1 month”

ExpiresByType text / x-javascript “access plus 1 month”

ExpiresByType application / x-shockwave-flash “access plus 1 month”

 

ExpiresByType image / x-icon “access plus 1 year”

ExpiresDefault “access plus 2 days”

Seperti yang Anda lihat, kode di atas cukup jelas. Pada dasarnya, untuk setiap jenis file (image / jpg, image / gif, text / css, dll) kami menentukan berapa lama resource harus di-cache. “Akses plus 1 bulan” berarti sumber daya dari jenis file yang ditentukan akan di-cache selama 1 bulan setelah pertama kali diakses.

Di baris 13, Anda akan melihat petunjuk ExpiresDefault. Arahan ini menetapkan algoritme default untuk menghitung waktu kedaluwarsa untuk semua dokumen di ranah yang terpengaruh. Ini dapat diganti berdasarkan tipe-demi-tipe dengan direktif ExpiresByType.

Masalah dengan Skrip Eksternal

Saat menggunakan layanan eksternal seperti Google Analytics, Anda sering diminta untuk memasukkan file JavaScript eksternal ke situs web Anda sendiri.

Meskipun ini bukan masalah, Anda jelas tidak memiliki banyak kendali atas file-file itu daripada file yang dihosting di server Anda sendiri. Ini sangat bermasalah karena Anda harus selalu menetapkan header kedaluwarsa ke file statis untuk memanfaatkan cache browser dan mengoptimalkan kecepatan situs web Anda.

Google PageSpeed ​​Insight akan merekomendasikan Anda untuk melakukannya. Tetapi file JavaScript dan CSS eksternal tidak dihosting di server Anda. Oleh karena itu, tidak mungkin hanya menambahkan expired header menggunakan .htaccessfile Anda .

Solusi: Menambahkan Header Kedaluwarsa ke Skrip Eksternal

Jadi yang perlu kita lakukan adalah mengimpor semua .jsfile secara dinamis ke situs web kita. Untuk melakukannya, kita akan menggunakan PHP dan file_get_contents()fungsinya.

Hal pertama yang harus dilakukan adalah menemukan skrip eksternal:

<script type = "text / javascript" src = "https://ssl.google-analytics.com/ga.js"> </script>

Langkah selanjutnya adalah membuat .phpfile. Sebut saja externaljs.php. Masukkan kode berikut di dalamnya:

<? php

 

$ files = array (

'ga.js' => 'https://ssl.google-analytics.com/ga.js',

'bsa.js' => 'https://s3.buysellads.com/ac/bsa.js',

'pro.js' => 'https://s3.buysellads.com/ac/pro.js'

);

 

if (isset ($ files [$ _ GET ['file']])) {

if ($ files [$ _ GET ['file']] == 'ga.js') {

header ('Kedaluwarsa:' .gmdate ('D, d MYH: i: s \ G \ M \ T', waktu () + ((60 * 60) * 48))); // 2 hari untuk GA

} lain {

header ('Kedaluwarsa:' .gmdate ('D, d MYH: i: s \ G \ M \ T', waktu () + (60 * 60))); // Default disetel ke 1 jam

}

 

echo file_get_contents ($ files [$ _ GET ['file']]);

}

 

?>

Mari kita lihat kodenya:

  • Baris 3 sampai 7:Sebuah array berisi file yang diterima dibuat. Ini sangat penting karena jika tidak, file apa pun dapat disematkan ke situs Anda, yang berpotensi menimbulkan masalah keamanan.
  • Baris 9 hingga 14:Karena kita perlu menyesuaikan waktu kedaluwarsa untuk setiap skrip, kita memerlukan pernyataan bersyarat untuk melakukannya.
  • Baris 16:Jika skrip keluar karena parameter GET ditemukan dalam larik kita, sekarang kita dapat menampilkannya dengan aman.

Anda harus menyesuaikan kode dan memasukkan URL skrip eksternal Anda. Setelah selesai, cukup unggah ke server Anda. Jika Anda menggunakan WordPress, ada baiknya untuk meletakkan file tersebut di folder tema Anda.

Artikel Terkait  SSL Murah Indonesia | Layanan dan Harganya

Kemudian, cukup ganti .js panggilan eksternal dan ganti dengan panggilan ke externaljs.php file Anda, seperti yang ditunjukkan di bawah ini:

<script type = "text / javascript" src = "externaljs.php? file = ga.js"> </script>

Dan Anda sudah selesai. Anda sekarang dapat mengimpor .jsfile eksternal secara dinamis di server Anda dan oleh karena itu, setel expired header yang tepat untuk setiap skrip Anda.

Header Kedaluwarsa untuk SEO: Perlunya Berpikir Dua Kali untuk Menggunakannya

coding-error-1

Setelah Google mengumumkan dampak kecepatan situs pada peringkat pencarian, banyak artikel ditulis tentang manfaat pengaturan header kedaluwarsa untuk mengontrol cache browser.

Apakah Header Kedaluwarsa dan Bagaimana Manfaatnya SEO?

## Expires Caching ##

<IfModule mod_expires.c>

ExpiresActive On

ExpiresByType image / jpg “access plus 1 year”

ExpiresByType image / jpeg “access plus 1 year”

ExpiresByType image / gif “access plus 1 year”

ExpiresByType image / png “access plus 1 year”

ExpiresByType text / css “access plus 1 month”

Expired header memberi tahu browser apakah sumber daya di situs web perlu diminta dari sumber atau jika dapat diambil dari cache browser. Ketika Anda membuat setting expired header untuk sumber daya, seperti semua file gambar jpeg, browser mungkin akan menyimpan sumber daya yang dimiliki ke cache. Ada waktu di mana pengunjung kembali ke halaman Anda tentunya akan membuat kinerja website Anda lebih cepat, karena browser Anda telah memiliki gambar-gambar tersebut.

Meningkatkan kecepatan pemuatan situs pada akhirnya meningkatkan fungsinya dan memiliki banyak manfaat termasuk rasio pentalan yang lebih rendah, waktu rata-rata yang dihabiskan di situs lebih tinggi, dll.

Jika situs Anda lebih cepat dari situs pesaing Anda, Anda juga dapat melihat peringkat yang lebih baik di hasil pencarian Google. Manfaat lainnya adalah kecepatan situs yang lebih baik juga dapat meningkatkan biaya hosting situs yang menyedot banyak bandwidth di server Anda.

Ada banyak alat di luar sana untuk membantu mengukur kecepatan situs, seperti Yslow, Google Pagespeed, Pingdom Tools, dll. Dan semuanya merekomendasikan penerapan header kedaluwarsa.

Bahayanya

Tujuan akhir dari pengaturan header kedaluwarsa adalah untuk menghindari permintaan HTTP yang tidak perlu, tetapi bagaimana Anda tahu kapan permintaan diperlukan dan tidak perlu atau sesuai? Berikut beberapa hal yang perlu dipertimbangkan sebelum menerapkannya:

Dari Situs Anda Sumber Daya Apa yang Paling Sering Diperbarui?

Kerugian yang paling sering terjadi dari penerapan header kedaluwarsa adalah kenyataan bahwa apabila sumber daya disetting berdasarkan kedaluwarsa yang terlalu jauh di masa mendatang dan apabila Anda hendak memperbarui situs (baik yang direncanakan atau tidak), pengunjung Anda tidak akan sadar adanya perubahan di browser mereka

Penting untuk memikirkan seberapa jauh di masa depan Anda mengharapkan sumber daya tetap sama untuk menentukan tanggal kedaluwarsa yang paling tepat.

Ini tampak jelas, tetapi penting untuk mengevaluasi bahkan sumber daya terkecil dari sebuah situs sebelum menyetel expired header.

Artikel Terkait  Kumpulan Tag Heading HTML, Fungsi dan Contohnya

Apakah Situs Tersebut Situs E-Commerce?

Jika demikian, Anda perlu mempertimbangkan efek pengaturan header kedaluwarsa yang dapat menyebabkan masalah dengan keranjang belanja. Situs e-commerce dapat mengalami masalah besar jika header yang kedaluwarsa tidak disetel dengan tepat.

Misalnya, jika pengunjung yang kembali mencoba menambahkan produk ke keranjang belanja mereka tetapi sumber daya disimpan dalam cache (seperti html, css, file gambar produk apa pun, dll.), Keranjang akan menampilkan produk yang telah ditambahkan sebelumnya dan bukan produk yang baru ditambahkan.

Tentu saja, menyegarkan cache Anda dengan CTRL + F5 saja akan menyelesaikan masalah, tetapi berapa banyak pengunjung yang akan mengetahuinya? Mereka akan menjadi frustrasi dan akhirnya pergi tanpa membeli apapun.

Apalah File Gambar, Skrip dan Lainnya Dapat Disimpan dalam Cache?

Terkadang tidak tepat untuk menyimpan cache seluruh grup skrip, gambar, atau sumber daya statis lainnya di seluruh situs, tetapi akan membantu untuk menyimpan cache yang tertentu.

Misalnya, apabila Anda mempunyai situs e-commerce yang sering diperbarui, Anda mungkin bermaksud menyetel header kedaluwarsa teruntuk gambar tertentu ketimbang semua gambar yang terdapat di seluruh situs.

Pengaturan itu diperuntukan sumber daya tertentu, seperti gambar heading halaman yang tidak berubah, akan mempermudah situs memuat lebih cepat, sementara gambar dari produk dapat diperbarui tanpa perlu cache browser.

Ini akan memberikan kepastian bahwa Anda dapat memperbarui gambar produk dan pelanggan Anda akan melihat gambar baru dan, yang terpenting, gambar produk tidak akan disimpan dalam cache atau terjebak di keranjang belanja pengguna.

Bagaimana Cara Menyimpan Cache Sumber Daya Tertentu Saja?

Dengan menggunakan contoh di atas, jika Anda ingin menambahkan header kedaluwarsa ke hanya sumber daya tertentu di situs Anda, Anda dapat melakukannya dengan beberapa cara berbeda.

  • Salah satu caranya adalah dengan membuat dua folder aset terpisah: satu untuk sumber daya statis dan yang lainnya untuk sumber daya yang sering diperbarui.
  • Tempatkan semua sumber daya (seperti gambar, skrip, dll.) Yang ingin Anda tetapkan kedaluwarsa di masa mendatang ke dalam folder statis, lalu tambahkan file .htaccess ke folder itu yang menyertakan header yang kedaluwarsa.
  • Tempatkan sisa sumber daya yang Anda tidak ingin di-cache ke folder lain. Folder dengan sumber daya yang sering diperbarui juga harus berisi file htaccess, tetapi harus memiliki header tanpa cache yang dinyatakan secara eksplisit di dalamnya (berlawanan dengan folder lain). Ini memastikan konten tidak akan di-cache.
  • Jika situs Anda dibangun di atas kerangka kerja seperti CodeIgniter, cukup tambahkan sub-folder statis dalam folder gambar, css, dan skrip dan Anda dapat menambahkan file .htaccess satu per satu ke masing-masing dengan header kedaluwarsa yang sesuai.
  • Untuk situs .NET, Anda dapat memisahkan sumber daya tertentu dari halaman yang ingin Anda cache dengan cache fragmen. Pada dasarnya, Anda akan membuat kontrol Anda sendiri yang akan berisi header yang kedaluwarsa untuk sumber daya tertentu yang ingin Anda cache.
  • Cara lain yang direkomendasikan oleh Pengembang Google adalah dengan menggunakan sidik jari untuk menyimpan sumber daya yang berubah sesekali.

Kesimpulan

Artikel Terkait  Mau Jadi Programmer, Haruskah Pilih Jurusan Rekayasa Perangkat Lunak?

Setiap situs akan memiliki persyaratan yang berbeda dan kebutuhan fungsionalitas yang berbeda. Tidak semua sumber daya di situs benar-benar perlu di-cache.

Misalnya, html umumnya dimuat dengan cukup cepat sehingga biasanya tidak ada kebutuhan nyata untuk menyimpannya dalam cache terlepas dari seberapa lambat situs Anda mungkin.

Jika situs Anda lambat (terutama beranda Anda), kami sarankan untuk mempertimbangkan pertanyaan di atas dan berfokus pada sumber daya utama seperti gambar dan skrip yang cenderung menjadi penyebab utama situs lambat.

Jika Anda dapat menguasai caching kedaluwarsa dan memahami kapan itu sesuai dan tidak sesuai, Anda dapat sangat meningkatkan fungsionalitas, kegunaan, dan keramahan mesin pencari dari situs Anda.


Jasa Pembuatan Aplikasi, Website dan Internet Marketing | PT APPKEY
PT APPKEY adalah perusahaan IT yang khusus membuat aplikasi Android, iOS dan mengembangkan sistem website. Kami juga memiliki pengetahuan dan wawasan dalam menjalankan pemasaran online sehingga diharapkan dapat membantu menyelesaikan permasalahan Anda.

Jasa Pembuatan Aplikasi

Jasa Pembuatan Website

Jasa Pembuatan Paket Aplikasi

Jasa Pembuatan Internet Marketing

Subscribe Sekarang

Dapatkan beragam informasi menarik tentang Website, Aplikasi, Desain, Video dan API langsung melalui email Anda. Subscribe sekarang dan terus belajar bersama kami!

Kategori

Blog Post Ranking 10

Rekomendasi 10 Aplikasi Pembuat Animasi 3D Terbaik. Ayo Cek!

Apakah Anda bercita-cita untuk menjadi seorang animator profesional? Belajar membuat animasi kini sudah menjadi hal mudah yang bisa dilakukan...

Pengertian Internet & Dampak Positif dan Negatif Internet

Internet mungkin bukan sesuatu yang asing lagi, sebab semua kalangan pasti tahu apa itu internet. Hanya saja jika ditanya...

Proses Komunikasi: Encoding dan Decoding

Jika kita dapat melihat percakapan antar komputer, mungkin akan terlihat seperti ini: "010110111011101011010010110". Bahasa ini disebut dengan biner, encoding...

Cara Mudah Menambahkan Lokasi Alamat Bisnis Anda di Google Maps

Saat ingin hunting tempat makan atau tempat nongkrong terbaru, tak jarang beberapa dari Anda biasanya mendapatkan informasi terkini melalui...

Metadata Adalah? Fungsi dan Jenis-Jenis Metadata

Pernah mendengar istilah metadata? Mungkin, kita sering mendengar istilah metadata. Tetapi, banyak dari kita yang belum tahu arti dari metadata...

Jasa Pembuatan Website Untuk Toko Online

Perusahaan yang menyediakan Jasa pembuatan website untuk toko online bisa kita temukan dengan mudah di internet. Masing-masing dari perusahaan...

8 Contoh Search Engine Terbaik yang Paling Banyak Digunakan di Indonesia

Dulu jika ingin mencari informasi tentang apapun biasanya kita akan menanyakan kepada seseorang yang lebih mengetahui informasi, atau datang...

Membuat Aplikasi di Playstore dengan Mudah

Membuat aplikasi di Playstore bisa Anda lakukan dengan mudah. Terdapat beberapa situs yang bisa membantu Anda untuk membuat aplikasi...

Looping Adalah Algoritma Perulangan: Berikut Contohnya

Jika anda sudah mendalami atau sedang mendalami dunia pemrograman terdapat sebuah konsep yang dapat memudahkan anda dalam menyusun struktur...

Domain Google? Apa Bedanya Dengan Domain Biasa?

Saat memutuskan untuk membuat website menjadi salah satu bentuk media digital marketing Anda dalam bersaing di zaman digital ini,...

Bisnis

Online Service

Peluang Bisnis

Model Bisnis

Entrepreneurship

Uang

Ketrampilan

Outsourcing

Monetize

Pemasaran

SEO

Internet Marketing

Dasar Pemasaran

Strategi Pemasaran

Situs Web Analitik

Iklan

Teknologi

Teknologi Terbaru

AI

Komputer

Jaringan

Paling Sering dibaca
Mungkin Anda Menyukainya