Langkah Mudah Untuk Mempercepat Situs Web Berat Gambar Anda

Pemilik situs mungkin pada akhirnya ingin meningkatkan kecepatan unduhannya. Ini meningkatkan peringkat hasil pencarian; selain itu, lebih menyenangkan bagi pengunjung situs untuk bekerja dengannya dengan mendapatkan respons yang lebih cepat atas tindakan mereka.

Untuk mencari solusi yang cepat dan mudah, pemilik situs memasang sejumlah besar plug-in, yang pada gilirannya menghabiskan sumber daya dan hanya memperlambat kerjanya. Kami tidak menentang plugin pengoptimalan, tetapi mereka harus digunakan secara langsung dan dengan pengetahuan tentang prinsip-prinsip pekerjaan mereka.

Selain itu, pemilik situs yang tidak pernah mengalami administrasi sering salah paham tentang optimasi. Dalam pemahaman mereka, optimasi adalah percepatan skrip dengan biaya berapa pun. Tugas optimasi adalah menghasilkan kecepatan situs yang optimal dengan harga sumber daya yang optimal. Oleh karena itu, tidak mungkin ada instruksi universal untuk semua situs.

Untuk membuat situs web Anda cepat adalah tugas mendesak bagi setiap pemilik sumber daya atau webmaster. Bagaimanapun, kecepatan memuat halaman adalah salah satu faktor paling penting untuk keberhasilan sumber daya web, bersama dengan konten berkualitas tinggi dan desain grafis yang indah.

Pemuatan yang lambat meningkatkan kemungkinan kehilangan pengguna di waktu-waktu tertentu. Apalagi jika pengunjung datang dari perangkat mobile. Rekomendasi sederhana untuk mempercepat pemuatan situs, yang bahkan dapat diterapkan oleh pengguna yang tidak berpengalaman dalam praktiknya, akan membantu meminimalkan kemungkinan hilangnya lalu lintas.

1. Optimalkan HTML-Code dan CSS-, JS-Files

Pengoptimalan unduhan tidak mungkin dilakukan tanpa memperhatikan "kebersihan" kode yang dikirimkan ke browser pengguna saat memasuki situs. Sejumlah besar karakter dalam kode sumber secara signifikan mempengaruhi kecepatan pemuatan, sehingga singkatnya merupakan faktor penentu keberhasilan.

Cara meminimalkan kode untuk mempercepat pemuatan situs

Hapus karakter, elemen markup, dan tag kode sumber yang tidak perlu. Mengotomatiskan proses akan membantu menambahkan sisipan kecil di awal dan akhir kode HTML situs.

Metode buffering konten HTML ini cukup berguna, tetapi dapat membuat beban tambahan pada memori akses acak.

Kelompokkan jenis file CSS dan file JS yang sama. Aplikasi PHP gratis seperti JCH Optimize, Cloudflare atau Minify, yang disalin ke direktori terpisah dan melewati semua file situs, akan membantu menggabungkan elemen.

2. Hapus Permintaan HTTP Ekstra

Mengunggah elemen halaman (javascript, gambar, CSS, dan file flash) menghabiskan sebagian besar sumber daya sistem saat memuat situs. Permintaan HTTP untuk elemen seperti itu secara nyata memperlambat situs.

Untuk menghindari permintaan "ekstra", Anda perlu mengurangi jumlah komponen halaman. Ini akan menyebabkan penurunan proporsional dalam panggilan server dan akan mempercepat pemuatan situs.

Hal ini dapat dilakukan dengan beberapa cara:

• Gabungkan beberapa gambar menjadi satu file grafik (sprite CSS);
• Gunakan gambar sebaris (inline-pictures) di lembar gaya halaman;
• Beberapa file atau skrip CSS pada satu halaman digabungkan menjadi satu file;
• Minimalkan jumlah skenario dan plugin.

3. Atur JavaScript dan CSS dalam Urutan yang Benar

Disarankan untuk menempatkan file CSS di bagian atas kode halaman, dan JavaScript di bagian bawah. Setelah pengoptimalan ini, konten statis akan dimuat terlebih dahulu, dan kemudian hanya grafik dinamis.

Elemen flash atau animasi yang membutuhkan lebih banyak sumber daya untuk diunduh tidak akan “menarik” maju dan merusak kesan situs sejak detik pertama. Ini akan memastikan pengunduhan konten yang lancar dan meningkatkan daya tarik estetika sumber daya.

4. Kurangi Jumlah Script Eksternal

Skrip eksternal adalah potongan kode (teks) yang diakses melalui tautan eksternal. Tautan membuat permintaan tambahan ke banyak server berbeda, yang pada akhirnya memperlambat situs. Untuk menghindari hal ini, disarankan untuk menggunakan terutama skrip lokal yang tertanam dalam struktur kode sumber halaman.

Tentu saja, fokus pada skrip lokal akan membuat batasan tertentu dalam tampilan dan fungsionalitas situs. Tetapi keuntungan kecepatan unduhan yang dihasilkan sepadan dengan "pengorbanan" ini.

5. Aktifkan Flush

Fungsional PHP ini memungkinkan Anda untuk tidak menunggu sampai server pengguna memuat informasi dari sumber daya, tetapi untuk mengeluarkannya dalam beberapa bagian. Saat data dikirimkan ke browser, jendela yang terbuka tidak akan tetap kosong tetapi akan diisi dengan lancar dengan elemen situs yang dapat dimuat. Akselerasi seperti itu sangat diperlukan untuk sumber daya web dengan antarmuka yang kompleks dan lalu lintas yang tinggi.

Lebih baik menempatkan fungsi flush di awal kode sumber halaman, segera setelah kepala. Dari header, konten HTML akan terbuka lebih cepat, dan Anda juga dapat mengaktifkan pemuatan paralel elemen CSS dan JavaScript.

6. Cache Halaman

Caching menyimpan beberapa informasi dari halaman situs (flash, grafik, JavaScript dan CSS) ke browser pengguna. Saat dijalankan berikutnya, file-file ini langsung diunduh dari browser, memberikan kecepatan ekstra pada situs.

Anda dapat mengaktifkan caching dengan menambahkan header kedaluwarsa ke kode HTML. Situs WordPress mudah di-cache menggunakan instalasi plug-in dengan fungsionalitas gratis atau sebagian gratis, seperti W3 Total Cache, Cache Enabler, atau Zen Cach.

Untuk situs baru, lebih baik menggunakan caching hanya setelah kesiapan penuh untuk diluncurkan. Jika Anda mengaktifkan fitur selama pengembangan, perubahan lebih lanjut mungkin tidak ditampilkan dengan benar di situs.

7. Gunakan CDN

Jaringan Pengiriman Konten – rantai server yang tersebar di pusat data di seluruh dunia untuk meningkatkan kecepatan transfer konten ke pengunjung. Semakin dekat pengunjung secara geografis dari server CDN, semakin cepat paket data dari situs ditransmisikan.

Penggunaan CDN sangat penting untuk konten dan portal dengan beban tinggi, yang audiens utamanya sangat jauh dari server fisik. Layanan ini meminimalkan waktu tunggu untuk unduhan dari situs luar negeri, berkontribusi pada peningkatan peringkat mereka dalam hasil pencarian lokal. Lagi pula, konten diunduh dari penyimpanan server terdekat dengan pengguna di negaranya.

8. Optimalkan Grafik Dan Video

Anda harus memilih format grafik dan video yang benar, karena format file secara langsung mempengaruhi kecepatan penyampaian informasi kepada pengunjung.

Format yang disarankan untuk konten web yang berbeda:

• SVG – untuk logo vektor dan elemen antarmuka sederhana;
• PNG – untuk skema dan logo non-vektor;
• JPG – untuk foto dan gambar;
• MPEG4 – untuk video dan animasi.

Juga untuk video dan animasi, format WEBM yang relatif baru tersedia. Dalam kebanyakan kasus, ini memberikan ukuran video yang lebih kecil dengan kualitas yang sama. Namun, formulir memiliki dukungan browser yang terbatas (misalnya, tidak ada dukungan di browser Safari macOS / iOS). Oleh karena itu, disarankan untuk menggunakan file WEBM sebagai sumber video prioritas dan menginstal MPEG4 sebagai sumber alternatif. Anda juga dapat menggunakan satu-satunya MPEG4 jika berbagi tidak dapat diterima atau tidak nyaman.

Secara terpisah, kami mencatat bahwa format vektor (SVG) memungkinkan penskalaan tanpa kehilangan kualitas grafis.

Tahapan optimasi gambar

Langkah 1 – Mengurangi ukuran gambar.

Banyak CMS populer, seperti WordPress atau Joomla, memiliki plug-in bawaan untuk mengoptimalkan gambar dari aslinya. Tetapi metode ini menciptakan beban tambahan dan dapat memperlambat situs. Setiap kali halaman dimuat, browser pertama kali mengakses kode sumber, dan baru kemudian mengubah ukuran gambar dengan cepat.

Untuk menghindari hilangnya kecepatan saat memuat gambar, editor grafis yang terpasang di OS, seperti Pratinjau (Mac) atau Microsoft Paint (Windows), serta layanan online dengan fungsi serupa akan membantu. Bekerja dengan mereka akan membutuhkan keterampilan minimal dalam bekerja dengan grafik.

Langkah 2 – Kompres file sebelum mengunduh.

Bahkan setelah mengoptimalkan ukuran gambar, “berat”-nya biasanya masih jauh dari optimal. Layanan yang nyaman dan gratis seperti ImageResize atau TinyPNG membantu mengurangi ukuran tanpa kehilangan kualitas gambar. Sebagian besar proses di sini otomatis. Pengguna hanya perlu mengunggah file dan mengunduh yang sudah dikompresi ke ukuran gambar yang optimal.

9. Terapkan Kompresi File Gzip

Gzip adalah metode sederhana untuk mengompresi file situs untuk menghemat sumber daya saluran dan mempercepat pemuatan. Menggunakan Gzip, file dikompresi menjadi arsip yang dapat diunduh lebih cepat oleh browser, lalu unzip dan tampilkan kontennya.

Mengaktifkan penggunaan Gzip cukup sederhana – Anda hanya perlu menambahkan beberapa baris kode ke file .htaccess. Misalnya, saat menggunakan server web Apache, modul mod_gzip tersedia untuk webmaster, untuk mengaktifkan Gzip, dalam hal ini Anda perlu menambahkan kode tersebut ke .htaccess

Kompresi file gzip dilakukan untuk mengurangi jumlah permintaan ke server dari browser. Intinya, teknologi ini mengurangi bobot awal file hingga 70% untuk mempercepat pengunduhan.

Cara Menyematkan Kompresi Gzip

Tambahkan cuplikan kode berikut ke file konfigurasi server web “.htaccess”.

Di server Apache

# BEGIN GZIP COMPRESSION
<IfModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</IfModule>
# END GZIP COMPRESSION

Di server Nginx

gzip on;
gzip_comp_level 2;
gzip_http_version 1.0;
gzip_proxied any;
gzip_min_length 1100;
gzip_buffers 16 8k;
gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;
gzip_disable "MSIE [1-6].(?!.*SV1)";
gzip_vary on;

10. Ganti Hosting

Metode paling dasar untuk mempercepat unduhan adalah dengan mengubah penyedia hosting. Menghemat alokasi sumber daya sering menyebabkan penurunan kualitas layanan yang signifikan, yang merusak semua upaya untuk mempercepat situs pada pokoknya.

Jika manipulasi dengan konten, kode, dan plugin tidak membawa hasil, inilah saatnya untuk berpikir tentang memilih "rumah" yang lebih layak untuk situs tersebut. Pada hosting berkualitas dengan ketersediaan tinggi dan dukungan teknis yang bijaksana, sumber daya Internet akan menerima dorongan kuat untuk meningkatkan kecepatan kerja. Dan ini akan dihargai oleh penonton yang berterima kasih.

Hal yang paling penting adalah…

Penting untuk berusaha mengakses situs tidak lebih dari 2-3 detik. Tidak masalah jika situs terbuka selama 2 atau bahkan 3 detik, tetapi jika ada lebih, maka ini adalah alasan untuk berpikir tentang mempercepat pemuatan situs.

Anda juga perlu memahami bahwa ada dua parameter untuk kecepatan memuat halaman.

Yang pertama adalah kecepatan konten ditampilkan (pada titik ini halaman sudah terbuka dan ditampilkan kepada pengguna, sedangkan indikator halaman transparan masih ditampilkan hingga semua file statis dan skrip asinkron terhubung).

Terlebih lagi, yang kedua adalah kecepatan pembentukan halaman yang sebenarnya, ketika semua yang harus terhubung telah terhubung. Anda perlu fokus pada parameter pertama yaitu, tidak lebih dari tiga detik harus berlalu sebelum tata letak situs ditampilkan.

Kesimpulan

Anda tidak dapat mengabaikan angka seperti kecepatan memuat situs. Dialah yang sejak detik pertama, menciptakan lingkungan yang nyaman bagi pengunjung. Semakin cepat pengguna mendapatkan konten yang diinginkan, semakin tinggi kemungkinan citra positif dari sumber daya akan terbentuk dan loyalitas terhadapnya terbangun.