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

3 Cara untuk Mempercepat Situs Anda dengan PHP

by
Read Time:15 minsLanguages:

Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)

Saat ini, dengan norma koneksi broadband, kita tidak perlu banyak khawatir tentang kecepatan internet atau ukuran halaman kita. Namun, itu adalah bukan untuk mengatakan bahwa kita masih tidak boleh melakukannya. Jika Anda ingin mengurangi waktu load pada server Anda, kurangi jumlah permintaan HTTP, dan pergi sedikit tambahan untuk pengunjung Anda, ada beberapa teknik yang dapat Anda gunakan. Tutorial ini membahas sejumlah trik PHP, termasuk caching dan kompresi.

1. Penggabungan CSS dengan PHP

Sebagai pengembang web, kita sering memisah CSS kita antara beberapa file terpisah untuk menjaga pemisahan logis dan untuk membuat modifikasi yang lebih mudah. Namun, hal ini meningkatkan jumlah permintaan ke server, menghasilkan load halaman yang lebih lambat. Menggunakan beberapa PHP kita dapat memiliki yang terbaik dari kedua dunia; menjaga beberapa file pada akhir kita, dan menggunakan satu permintaan untuk mengambil semuanya.

Persiapan

Sebelum kita dapat mengoptimalkan file CSS, kita akan membutuhkan beberapa CSS untuk bekerja dengannya! Jadi mari kita membuat tiga file dan menempatkan beberapa CSS di dalamnya.

PHP

Kita perlu mendapatkan isi dari file-file ini dan menambahkan mereka ke satu sama lain dalam urutan tertentu. Jadi skrip kita harus menerima nama-nama file CSS melalui parameter URL, buka semua file-nya dan menempatkan mereka bersama-sama. Penjelasan dari kode berikut.

Memecahnya

Itu terlihat cukup rumit, tapi tetap dengan saya, itu benar-benar cukup sederhana.

Potongan kode ini menetapkan path untuk folder CSS dan memeriksa bahwa kita telah mengirim beberapa file untuk bekerja dengannya. Path CSS harus memiliki akhiran garis miring jika tidak kita akan menemukan diri kita pada sekumpulan dari kesalahan. Jika kita mau, kita bisa memeriksa secara otomatis untuk garis miring dan menambahkan jika diperlukan. Namun, demi kemudahan saya menghilangkan perilaku itu.

Selanjutnya kita memeriksa setiap nama file dan menghapus setiap perhentian penuh dan/atau garis miring. Hal ini untuk mencegah orang-orang dari menavigasi sistem file dengan melewatkan nama file seperti '../../secret/file'.

Sekarang kita harus membangun data CSS dari file individual. Untuk melakukan ini, kita loop melalui array file dengan foreach, buka masing-masing file dan menambahkan isi ke data kita. "\n" hanya menambahkan karakter baris baru untuk menjaga hal-hal yang bagus dan rapi. Fungsi filesize() ini digunakan untuk menemukan panjang dari file sehingga kita dapat memberitahu fread() berapa banyak yang kita inginkan (seluruh file).

Sedikit yang terakhir dari skrip ini adalah mengirim data CSS ke browser. Ini berarti kita harus memberitahu PHP bahwa kita mengirimkan data CSS, dan bahwa hal itu harus memberitahu browser. Kita melakukannya dengan fungsi header, pengaturan jenis konten untuk 'text/css'. Kemudian kita mengirim CSS ke klien. Pertama kita periksa jika ada data CSS untuk dikirim. Jika tidak ada, maka ini berarti bahwa tidak ada nama-nama file CSS yang dikirim. Jika hal ini terjadi kita hanya membalas dengan komentar CSS yang mengatakan begitu. Namun, jika, kami memiliki beberapa data untuk dikirim, maka kita dapat mengirimnya dan menambahkan pesan merinci ketika ia dihasilkan. Jika Anda ingin, misalnya, menambahkan beberapa informasi hak cipta ke semua CSS Anda dalam sekali jalan, maka ini akan menjadi tempat yang ideal.

Menempatkannya untuk Diuji

Oke, sekarang saatnya untuk menguji skrip; pertama kita perlu membangun struktur direktori dan kemudian menempatkan file skrip dan CSS kita. Silahkan lihat pada gambar di bawah ini dan cobalah untuk meniru strukturnya. Jika Anda ingin sesuatu yang berbeda, jangan lupa untuk mengubah path untuk mencerminkan perubahan tersebut.

Setelah semuanya berada di tempat yang tepat, kita dapat menguji skrip kita. Struktur direktori yang akan ditempatkan di folder 'htdocs' atau 'www' dari webserver dengan PHP (cukup banyak webserver pada saat ini). Arahkan ke file index.php. Anda akan disambut oleh satu komentar: 'Files not available or no files specified'. Ini berarti bahwa kita tidak diberikan file apa pun itu untuk menarik bersama-sama. Namun, kabar baiknya adalah bahwa ini adalah komentar CSS valid dan tidak akan menimbulkan masalah.

Mari kita memberikan sesuatu yang sedikit rumit; ketik 'index.php?q[]=main' Anda harus mendapatkan CSS dari file main.css utama Anda dan pemberitahuan di bagian bawah.

Jika kita ingin menarik beberapa file bersama-sama (karena hal ini benar-benar semua tujuan dari skrip ini) kita dapat mengirim permintaan ini: 'index.php?q[]=main&q[]=forms'. Seperti yang Anda lihat kami dapat mengulangi ' [q] =' sebanyak yang kita inginkan karena ini menambahkan setiap nilai ke array. Anda bisa berpotensi menambah 50 file CSS yang sama jika Anda ingin menggunakan skrip ini.

Penutup

Menggunakan metode ini dapat sangat berguna, dan dapat memberikan manfaat seperti mampu memiliki sebuah style sheet default untuk setiap halaman dan dan file CSS tambahan untuk halaman dengan form. Ini juga mudah untuk menerapkan jika Anda sudah menggunakan semacam pengolahan CSS dengan PHP. Jika Anda ingin, Anda bahkan dapat mengubah nama index.php ke indeks.css asalkan Anda mengatur .htaccess agar memperlakukan file CSS sebagai PHP.

Anda mungkin melihat bahwa saya memperlakukan perintah yang berbeda dari file CSS yang berbeda. Ini karena Anda mungkin ingin memiliki satu stylesheet yang menimpa lainnya dan karena itu urutan file adalah penting. Jika ini tidak masalah bagi Anda, Anda mungkin ingin melakukan fungsi penyortiran pada array file sebelum pengolahan.

Hanya sebuah peringatan; jika Anda menempatkan file index.php dalam folder lain yang berisi CSS maka Anda harus menulis path gambar latar belakang relatif Anda seolah-olah index.php adalah stylesheet Anda. Ini karena itulah yang browser berpikir seperti itu. Atau, Anda bisa menambahkan beberapa kode untuk menulis ulang URL ini, namun, itu adalah di luar cakupan tutorial ini.

2. Membuang Whitespace dari HTML dan CSS

Banyak dari kita menggunakan sejumlah besar whitespace ketika menulis kode. Kabar baiknya adalah bahwa spasi di PHP tidak benar-benar dikirim ke browser. Namun, itu dilakukan di HTML.

Browser yang cenderung hanya menampilkan satu ruang tidak peduli berapa banyak tab yang Anda gunakan dalam kode Anda. Ini berarti bahwa ada beberapa bandwidth yang terbuang. Namun, dengan beberapa PHP sederhana kita dapat menghapus whitespace penyedot bandwidth.

Persiapan

Sekali lagi, kita akan membutuhkan beberapa data mentah untuk bekerja dengannya; jadi copy contoh kode HTML dan CSS berikut. Simpan kode berikut ke dalam file .htm dan .css dalam folder di dalam direktori webroot dari server.

PHP

Salah satu keuntungan dari metode ini adalah bahwa skrip yang sama akan bekerja dengan HTML dan CSS. Script kita harus menerima nama file sebagai bagian dari permintaan. Setelah file dimuat, ini harus menghapus semua whitespace ke hanya satu karakter spasi. Ini karena kita tidak ingin menghapus semua spasi di antara kata-kata!

Sekali lagi, ada sekelompok PHP di sini, tapi saya akan pergi melaluinya berhati-hati dengan Anda.

Melihat Lebih Dekat

Yang satu ini tidak begitu rumit, tapi kita masih akan memecahkannya dan memastikan bahwa kita memahami apa yang terjadi.

Kita mendapatkan nama file melalui parameter yang dilewatkan dengan permintaan GET dan memeriksa untuk memastikan bahwa itu adalah jenis file yang diperbolehkan. Kemudian kita lanjutkan untuk mengambil data dan memprosesnya untuk membuang kelebihan spasi. Metode ini relatif primitif dan tidak akan menghapus semua spasi yang tidak perlu, tapi itu akan berurusan lebih banyak hanya beberapa baris kode!

Potongan ini hanya menetapkan beberapa variabel. Sekali lagi, kita melewatkan data kita melalui 'q' yang itu bagus dan singkat. Ini juga memberikan kita tempat menentukan direktori untuk file dan ekstrak file dengan ekstensi. Fungsi explode() merobek nama file setiap kali melihat '.' dan menempatkan potongan-potongan ke dalam sebuah array.

Di sini kita memeriksa untuk memastikan bahwa file tersebut baik CSS atau HTML. Jika itu adalah sesuatu yang lain yang kita mungkin menemukan diri kita sendiri memberikan hacker lubang ke situs kita seperti ingin menunjukkan kepada mereka settings.php! Jadi setelah memberikan hacker kibasan kita bisa melanjutkan ke proses pengolahan data kita!

Sekarang untuk daya tarik utama; semua yang kita benar-benar lakukan di sini adalah membuka file dan membacanya - seperti yang kita lakukan di skrip pertama - dan kemudian merobek spasi sebanyak mungkin. Ini dicapai melalui regular expression relatif sederhana yang melakukan pencarian melalui file untuk spasi, tab, atau baris baru dan kemudian menggantikan mereka dengan spasi tunggal.

Akhirnya kita mengirim ulang datanya, menetapkan header yang diperlukan jika kita berhadapan dengan CSS.

Tapi Apakah itu Bekerja?

Jika Anda pergi ke browser Anda dan arahkan ke 'index.php?q=css.css' kita harus melihat satu baris CSS di seluruh halaman. Hal ini menunjukkan bahwa semuanya baik-baik saja! Kita juga dapat melihat efek yang sama pada kode sumber dari contoh html. Bahkan dalam contoh kecil itu, kita mengurangi 314 karakter file CSS ke 277 karakter dan 528 karakter file html ke 448 karakter. Tidak buruk untuk 15 baris kode.

Kesimpulan

Jadi itu adalah contoh yang baik tentang bagaimana kita dapat melakukan cukup banyak hal dengan sedikit bekerja. Jika Anda telah melihat sumber dari halaman seperti Google, Anda akan menemukan bahwa mereka memiliki hampir tidak ada whitespace karena, ketika Anda menerima jutaan permintaan, beberapa kilobyte per permintaan benar-benar bertambah. Sayangnya, kebanyakan dari kita tidak begitu beruntung!

3. Caching dalam Skrip PHP

Di bagian ini, saya akan menunjukkan kepada Anda bagaimana untuk caching 'retrofit' ke skrip Anda menggunakan skrip di atas sebagai contoh. Tujuannya adalah untuk mempercepat hal-hal dengan tidak harus meregenerasi data setiap kali seseorang meminta sebuah file. Menghasilkan konten pada setiap permintaan adalah hanya sia-sia, terutama pada data statis seperti CSS kita.

Untuk menambahkan caching kita perlu menambahkan tiga hal ke skrip kita. Pertama, kita harus mengumpulkan masukan data untuk skrip dan membuat nama file yang unik untuk rangkaian input tersebut. Kedua, kita harus mencari sebuah file cache dan melihat apakah itu cukup pada baru-baru ini. Terakhir, kita harus menggunakan salinan cache atau menghasilkan konten baru dan men-cache untuk waktu berikutnya.

Memecah Aliran

Bagian dari proses ini benar-benar tergantung pada skrip individu, namun saya akan menunjukkan di mana saya akan memecah aliran skrip ini untuk caching.

Memasukkannya ke dalam Aksi

Sekarang kita akan benar-benar menulis kode untuk caching ke skrip ini. Pertama saya akan menunjukkan skrip yang sudah selesai dan kemudian pergi melalui masing-masing bagian.

Penjelasan

Yang satu ini sedikit lebih sulit dan lebih sedikit kemungkinan untuk meninggalkan Anda menggaruk kepala Anda. Tapi jangan khawatir, tidak banyak yang telah berubah dan kita akan pergi melalui setiap bagian. Fitur tambahan yang kita miliki termasuk yang menyegarkan cache setiap 24 jam. Ini berguna agar jika Anda mengubah apa pun, Anda dapat menunggu 24 jam atau hanya mengosongkan direktori cache. Jika Anda ingin interval refresh yang berbeda cukup menghitungnya dalam hitungan detik.

Sedikit kode ini hanya mendapatkan nama file dan ekstensi, merekatkan mereka bersama-sama dan menambahkan direktori cache dan ekstensi '.tmp' yang tepat.

Di sini kita memeriksa jika kita memiliki file cache disimpan dan jika file cache dibuat dalam waktu 24 jam. Jika kedua kondisi ini terpenuhi maka kita membuka file dan mengekstrak isinya untuk menggantikan output skrip. Kita juga mengatur $isCached menjadi true sehingga kita dapat menampilkan beberapa pesan di akhir.

Sekarang kita caching output dari skrip untuk kita gunakan di permintaan kemudian. Kita cukup membuka file dalam modus menulis, dump data ke dalamnya dan kemudian menutupnya. Benar-benar Anda tidak harus menutup file-file tersebut dalam PHP tapi itu telah dianggap praktik baik sehingga saya melakukannya di sini.

Ini adalah bagian lain dari skrip yang telah dimodifikasi sedikit sehingga kita dapat menawarkan beberapa umpan balik melalui browser. Jika file yang diambil dari cache kita dapat menambahkan pesan ke output skrip. Perhatikan bahwa pesan untuk skrip CSS memiliki '\n' di akhir. Ini karena karakter '//' mengomentari seluruh baris kita dan '\n' mendorong segala sesuatu yang lain ke baris lain. Jika Anda ingin menonaktifkan pesan, semua yang harus Anda lakukan adalah mengomentari baris '$isCached = TRUE;'.

Memberikan putaran

Jika kita menggunakan skrip kita lagi, kita akan melihat tidak ada perubahan sampai kita me-refresh untuk kedua kalinya ketika kita akan melihat pesan yang menyatakan bahwa file diambil dari cache. Kesuksesan yang manis! Pengaturan caching ini juga dapat diterapkan ke skrip pertama dengan sedikit modifikasi, namun, yang ditinggalkan sebagai latihan bagi para pembaca.

Penutup

Mampu dengan cepat menambah caching sederhana namun efektif untuk setiap script yang Anda kerjakan adalah keterampilan yang sangat berguna. Itu hanya menambahkan sedikit tambahan skrip, mengurangi beban pada server Anda dan mempercepat situs bagi pengguna. Nah, itu adalah win-win!

Kesimpulannya

Dalam tutorial ini saya telah menunjukkan Anda beberapa cara sederhana tetapi berguna untuk mempercepat situs Anda dengan dash dari PHP. Saya benar-benar berharap bahwa Anda menemukan mereka berguna dan bahwa Anda dapat menerapkan mereka untuk sebuah proyek di masa depan. Bagaimana Anda meningkatkan kinerja situs Anda?

  • Ikuti kami di Twitter, atau berlangganan NETTUTS RSS Feed untuk lebih banyak tutorial dan artikel pengembangan web.


Advertisement
Did you find this post useful?
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.