Bab 4

Landasan Teori
Situs web adalah suatu halaman web yang saling berhubungan yang umumnya berada pada
peladen yang sama berisikan kumpulan informasi yang disediakan secara perorangan,
kelompok, atau organisasi. Sebuah situs web biasanya ditempatkan setidaknya pada sebuah
server web yang dapat diakses melalui jaringan seperti Internet, ataupun jaringan wilayah lokal
(LAN) melalui alamat Internet yang dikenali sebagai URL. Gabungan atas semua situs yang dapat
diakses publik di Internet disebut pula sebagai World Wide Web atau lebih dikenal dengan
singkatan WWW. Meskipun setidaknya halaman beranda situs Internet umumnya dapat diakses
publik secara bebas, pada praktiknya tidak semua situs memberikan kebebasan bagi publik untuk
mengaksesnya, beberapa situs web mewajibkan pengunjung untuk melakukan pendaftaran
sebagai anggota, atau bahkan meminta pembayaran untuk dapat menjadi anggota untuk dapat
mengakses isi yang terdapat dalam situs web tersebut, misalnya situs-situs yang menampilkan
pornografi, situs-situs berita, layanan surel (e-mail), dan lain-lain. Pembatasan-pembatasan ini
umumnya dilakukan karena alasan keamanan, menghormati privasi, atau karena tujuan
komersial tertentu.
Sebuah halaman web merupakan berkas yang ditulis sebagai berkas teks biasa (plain text) yang
diatur dan dikombinasikan sedemikian rupa dengan instruksi-instruksi berbasis HTML atau
XHTML, kadang-kadang pula disisipi dengan sekelumit bahasa skrip. Berkas tersebut kemudian
diterjemahkan oleh peramban web dan ditampilkan seperti layaknya sebuah halaman pada
monitor komputer.
Situs web dinamis merupakan situs web yang secara spesifik didisain agar isi yang terdapat
dalam situs tersebut dapat diperbarui secara berkala dengan mudah. Sesuai dengan namanya,
isi yang terkadung dalam situs web ini umumnya akan berubah setelah melewati satu periode
tertentu. Situs berita adalah salah satu contoh jenis situs yang umumnya mengimplementasikan
situs web dinamis.
Tidak seperti halnya situs web statis, pengimplementasian situs web dinamis umumnya
membutuhkan keberadaan infrastruktur yang lebih kompleks dibandingkan situs web statis. Hal
ini disebabkan karena pada situs web dinamis halaman web umumnya baru akan dibuat saat ada
pengguna yang mengaksesnya, berbeda dengan situs web statis yang umumnya telah
membentuk sejumlah halaman web saat diunggah di server web sehingga saat pengguna
mengaksesnya server web hanya tinggal memberikan halaman tersebut tanpa perlu
membuatnya terlebih dulu.
Untuk memungkinkan server web menciptakan halaman web pada saat pengguna
mengaksesnya, umumnya pada server web dilengkapi dengan mesin penerjemah bahasa skrip
(PHP, ASP, ColdFusion, atau lainnya), serta perangkat lunak sistem manajemen basisdata
relasional seperti MySQL.
Struktur berkas sebuah situs web dinamis umumnya berbeda dengan situs web statis, berkas-
berkas pada situs web statis umumnya merupakan sekumpulan berkas yang membentuk sebuah
situs web. Berbeda halnya dengan situs web dinamis, berkas-berkas pada situs web dinamis
umumnya merupakan sekumpulan berkas yang membentuk perangkat lunak aplikasi web yang
akan dijalankan oleh mesin penerjemah server web, berfungsi memanajemen pembuatan
halaman web saat halaman tersebut diminta oleh pengguna
pengunjung website cenderung terpengaruhi kepada kecepatan sebuah website bukan sekedar fitur
dan desainnya saja

Kecepatan download website yang lebih cepat dapat meningkatkan retensi pengunjung dan
loyalitas dan kepuasan pengguna, terutama bagi pengguna dengan koneksi internet yang lambat
dan perangkat mobile. Website yang lebih efisien juga berdampak lebih sedikit data yang di
transfer, yang pada akhirnya menurunkan konsumsi daya dan dampak lingkungan suatu situs
web. Beberapa aspek yang dapat mempengaruhi kecepatan pemuatan laman mencakup cache
browser / server, pengoptimalan gambar, dan enkripsi (misalnya SSL) , yang dapat
mempengaruhi waktu yang dibutuhkan halaman untuk dirender. Kinerja halaman web dapat
ditingkatkan melalui teknik seperti cache multi-layer, desain ringan komponen lapisan presentasi
dan komunikasi asinkron dengan komponen sisi server.
Optimalisasi kinerja web meningkatkan pengalaman pengguna (UX) saat mengunjungi situs web
dan oleh karena itu sangat diinginkan oleh perancang web dan pengembang web. Mereka
menggunakan beberapa teknik yang menyederhanakan tugas pengoptimalan web untuk
mengurangi waktu muat halaman web. Proses ini dikenal sebagai pengoptimalan front end (FEO)
atau pengoptimalan konten. FEO berkonsentrasi untuk mengurangi ukuran file dan
"meminimalkan jumlah permintaan yang dibutuhkan agar halaman tertentu dimuat."

Selain teknik yang tercantum di bawah ini, penggunaan jaringan pengiriman konten - sekelompok
server proxy yang tersebar di berbagai lokasi di seluruh dunia - adalah sistem pengiriman yang
efisien yang memilih server untuk pengguna tertentu berdasarkan kedekatan jaringan. Biasanya
server dengan waktu respon tercepat dipilih.

Teknik berikut biasanya digunakan tugas pengoptimalan web dan banyak digunakan oleh
pengembang web:
Browser web membuka koneksi Transmission Control Protocol (TCP) yang terpisah untuk setiap
permintaan Protokol Transfer Hiperteks (HTTP) yang dikirimkan saat mendownload halaman
web. Permintaan ini total jumlah elemen halaman yang diperlukan untuk diunduh. Namun,
browser dibatasi hanya untuk membuka sejumlah koneksi simultan ke satu host tunggal. Untuk
mencegah kemacetan, jumlah elemen halaman individual dikurangi dengan menggunakan
konsolidasi sumber daya dimana file yang lebih kecil (seperti gambar) digabungkan menjadi satu
file. Ini mengurangi permintaan HTTP dan jumlah "round trip" yang dibutuhkan untuk memuat
halaman web.
Halaman web dibangun dari file kode JavaScript dan Hypertext Markup Language (HTML).
Seiring bertambahnya halaman web dalam kompleksitas, begitu juga file kode mereka dan
kemudian waktu muatnya. Kompresi file dapat mengurangi file kode sebanyak 80%, sehingga
meningkatkan responsivitas situs.
Optimasi Caching Web dapat mengurangi beban server, penggunaan bandwidth dan latensi.
CDNs menggunakan perangkat lunak caching web khusus untuk menyimpan salinan dokumen
yang melewati sistem mereka. Permintaan selanjutnya dari cache dapat terpenuhi jika kondisi
tertentu berlaku. Web cache terletak di sisi client (forward position) atau sisi web-server (reverse
position) dari CDN. Selain itu, browser web juga dapat menyimpan konten web untuk digunakan
kembali.

Code Minification membedakan perbedaan antara kode yang ditulis oleh pengembang web dan
bagaimana elemen jaringan menafsirkan kode. Minification menghapus komentar dan spasi
tambahan serta nama variabel crunch untuk meminimalkan kode, mengurangi ukuran file
sebanyak 60%. Selain caching dan kompresi, teknik kompresi lossy (serupa dengan yang
digunakan dengan file audio) menghapus informasi header yang tidak penting dan menurunkan
kualitas gambar asli pada banyak gambar beresolusi tinggi. Perubahan ini, seperti kompleksitas
piksel atau gradasi warna, transparan kepada pengguna akhir dan tidak mempengaruhi persepsi
gambar. Teknik lain adalah penggantian grafis vektor dengan grafis raster resolusi-independen.
Substitusi raster paling cocok untuk gambar geometris sederhana.
Bab 5
Konsep Alat Bantu
Lighthouse adalah alat pengetesan website secara otomatis yang berfungsi untuk meningkatkan
kualitas aplikasi web Anda. Anda cukup memberi Lighthouse URL website yang ingin Anda
audit,ia akan mengetes terhadap halaman website, dan kemudian menghasilkan laporan tentang
seberapa baik halaman itu. Dari sini Anda dapat melihat tes apa saja yang gagal sebagai indikator
tentang apa yang dapat Anda lakukan untuk memperbaiki aplikasi Anda.
Lighthouse memiliki 4 Bagian Test Utama yang terdiri dari : Progressive Web App,Perfomance,
Accesibility dan Best Practice

Progressive Web Apps

user experiences that have the reach of the web, and are:
Reliable - Load instantly and never show the downasaur, even in uncertain network
conditions.
Fast - Respond quickly to user interactions with silky smooth animations and no janky
scrolling.
Engaging - Feel like a natural app on the device, with an immersive user experience.
This new level of quality allows Progressive Web Apps to earn a place on the user's home
screen.

Perfomance
o First meaningful paint measures when the primary content of a page is visible.
o First Interactive marks the time at which the page is minimally interactive
o Consistently Interactive marks the time at which the page is fully interactive
o Estimated Input Latency is an estimate of how long your app takes to respond to user
input, in milliseconds. There is a 90% probability that a user encounters this amount
of latency, or less. 10% of the time a user can expect additional latency. If your score
is higher than Lighthouse's target score, users may perceive your app as laggy.
 o Properly Sized Images Serve images that are appropriately-sized to save cellular
data and improve load time
o Server Response Time
Time To First Byte identifies the time at which your server sends a response
Accessibility
accessible, we mean that the site's content is available, and its functionality can be
operated, by literally anyone. As developers, it's easy to assume that all users can see
and use a keyboard, mouse, or touch screen, and can interact with your page content the
same way you do. This can lead to an experience that works well for some people, but
creates issues that range from simple annoyances to show-stoppers for others.
o Color Contrast Is Satisfactory
Helps improve the legibility of your content.
o Elements Describe Contents Well
make your content easier to understand for a user of assistive technology, like a screen
reader.
Best Practices
o Uses HTTPS to prevent intruders from tampering or listening on communication
between your website and user
o Images with appropriate aspect ratio
o Includes front-end JavaScript libraries with known security vulnerabilities: 2
vulnerabilities detected.Some third-party scripts may contain known security
vulnerabilities that are easily identified and exploited by attackers.
o Avoid Deprecated API
 Daftar Pustaka
https://startupbisnis.com/performa-website-pentingkah/
https://id.wikipedia.org/wiki/Situs_web
https://en.wikipedia.org/wiki/Web_performance
http://www.stevesouders.com/blog/2010/04/09/google-adds-site-speed-to-search-ranking/