Menulis Kode CSS, mana yang lebih bagus dalam konteks pagespeed ?

Mau tanya pertanyaan newbie kakak….

diantara 3 penulisan CSS mana yang lebih bagus untuk urusan pagespeed ?

  • Inline
  • Internal
  • Eksternal

mohon bantu jawab ya kakak ?

Add Comment

INLINE

dengan keuntungan dan kerugian masing-masing penulisan sebagai berikut :

Internal CSS

Manfaat internal CSS:

    • Perubahan hanya terjadi pada 1 halaman

 

    • Class dan ID bisa digunakan oleh internal stylesheet

 

    • Tidak perlu meng-upload beberapa file karena HTML dan CSS bisa digunakan di file yang sama.

 

Kekurangan menggunakan Internal CSS:

    • Meningkatkan waktu akses website

 

    • Perubahan hanya terjadi pada 1 halaman – tidak efisien bila Anda ingin menggunakan CSS yang sama pada beberapa file.

 

 

External CSS

Manfaat CSS eksternal:

    • Ukuran file HTML menjadi lebih kecil dan strukturnya lebih rapi

 

    • Kecepatan loading menjadi lebih cepat

 

    • File CSS yang sama bisa digunakan di banyak halaman.

 

Kekurangan CSS eksternal:

    • Halaman belum tampil secara sempurna hingga file CSS selesai dipanggil.

 

 

Inline CSS

Manfaat Inline CSS:

    • Berguna jika Anda ingin menguji dan melihat perubahan

 

    • Berguna untuk perbaikan cepat

 

    • Permintaan HTTP yang lebih kecil

 

Kekurangan inline CSS:

    • Inline CSS harus diterapkan pada setiap elemen

 

 

Andhi Irawan
081212688567
W
ebsite Murah Berkualitas https://www.tokopedia.com/bazartemplates

 

 

 

 

Novice Answered on August 5, 2020.
Add Comment

Halo, mau bantu jawab kalo dari perbandingan penilaian lewat saran di Lighthouse Test-nya Google ya.

 

  1. Gunakan CSS eksternal hanya untuk styling yang tidak terlalu penting (opsional)
  2. Untuk CSS yang berperan langsung dalam layouting, gunakan inline atau internal CSS
  3. CSS Eksternal yang benar-benar gak penting, bisa ditaruh di body paling atas atau body paling bawah (sambil liat mana yang paling sesuai buat masing-masing web)

 

Sebisa mungkin hindari fetching file external untuk initial loading, karena akan mempengaruhi styling, layouting, sama rendering page nya.

Novice Answered on August 5, 2020.
Add Comment

Inline kak, karena jika kakak menggunakan tool seo audit mana pun yang mampu menghitung kecepatan website, maka pasti akan di sarankan mengenai inline

Novice Answered on August 5, 2020.
Add Comment

Makasih infonya kakak, tapi ane masih bingung antara penulisan inline dan penulisan internal kl ane tambahin kode di file function.php

 

misalnya ane punya kode begini, ini termasuk inline atau internal ?

apakah bagus menuliskan kode sbb :

 

// Teks di halaman login

add_action( 'woocommerce_login_form_start','wpjkt_login_text' );

function wpjkt_login_text() { ?>

<style type="text/css">p.login-teks {background-color:#f5f5f5;color:#3740ff;border:1px solid #71b02f;padding:0.4em 1em 0.5em 1em;box-shadow:2px 2px 4px #71b02f;margin-bottom:2em;}

</style>

<?php

if ( is_checkout() ) return;

echo '<p class="login-teks"><i><b>Informasi :</b><br>Lorem ipsum, atau ringkasnya lipsum, adalah teks standar yang ditempatkan untuk mendemostrasikan elemen grafis atau presentasi visual seperti font, tipografi, dan tata letak.</i></p>';

}

 

atau harus di tulis kode fungsinya aja terus atur cssnya lewat additional css ?

Novice Answered on August 6, 2020.
Add Comment

Itu termasuk internal gan. Kalau dibuat jadi inline itu jadi gini :

<p style="
background-color:#f5f5f5;
color:#3740ff;
border:1px solid #71b02f;
padding:0.4em 1em 0.5em 1em;
box-shadow:2px 2px 4px #71b02f;
margin-bottom:2em;">
<i><b>Informasi :</b><br>Lorem ipsum, atau ringkasnya lipsum,
adalah teks standar yang ditempatkan untuk mendemostrasikan elemen grafis atau
presentasi visual seperti font, tipografi, dan tata letak.</i>
</p>

 

Setahu saya mau internal / inline sudah ga masalah kalau ditinjau dari segi speed, sama2 cepet load speednya

Novice Answered on August 6, 2020.

oh jadi kl css inline itu langsung nempel sama element htmlnya ya ?

 

makasih pencerahannya om

on August 6, 2020.

Iya bener gan, semoga membantu

on August 7, 2020.
Add Comment

Your Answer

By posting your answer, you agree to the privacy policy and terms of service.