tentang import css dan tag template html5 untuk load speed website

1. import css gan, misal ane punya banyak file css yang mau di load.. file css : Induk.css, file-1.css, file-2.css, file-3.css, file-4.css, file-5.css, file-6.css

gimana metode load yang baik untuk file css tersebut..? ane menggunakan sass gan.. jadi file yang ane load hanya css Induk.css menggunakan <link>, dan di file Induk.scss ane isi nya cuma :kode @import 'file-1.scss'; dan sterus nya..

jadi pas di complie Induk.scss nya ke Induk.css semua file-1,2,-6 udah ter write .

apakah metode import itu lebih baik.. dari pada gunakan <link> satu persatu file.css..? apakah bisa berpengaruh dengan load speed website..?

2. tag template html5 fungsi tag template html5 apa aja gan..?, yang ane liat kalau menggunakan tag template, content di dalamnya gak akan ke render..

ane mau manfaatin fungsi template ini. buat wrapping content web ane.. contoh:


<body>
  <template>
    <span>ini content</span>
  </template>
</body>
<script>
var content = $('template').html();
$('body').html(content);
<script>

terus ane gunakan javascript untuk nampilin content template ke dalam tag body, setelah semua html ready. apakah metode itu baik digunakan.. untuk mempengaruhi load speed website..? ataukah ada pengaruh buruk jika menggunakan metode itu..?

mohon pencerahannya gan :) mobil tank tabrak kayu.. tengkyu.. gan :)

avatar arepsv
@arepsv

100 Kontribusi 64 Poin

Diperbarui 6 tahun yang lalu

1 Jawaban:


apakah metode import itu lebih baik.. dari pada gunakan <link> satu persatu file.css..?
apakah bisa berpengaruh dengan load speed website..?

betul gan, semakin banyak file yang harus diload --> semakin banyak http request --> semakin lambat. ada baiknya di production, semua file2 js dijadiin satu, dan css juga dijadiin satu. (semakin dikit http request, semakin ngebut website) selain itu bisa juga ditambah minify/uglify filenya, biar tambah kecil filenya (semakin cepet lagi) caranya bisa pake webpack atau buildtools seperti gulp

agan bisa baca tulisan saya tentang gulp kalau belum tahu, disini https://sekolahkoding.com/forum/apa-itu-taskrunner-build-tools-apa-itu-gulp. kalau udah tau abaikan saja ~~ hehehe

avatar timelord
@timelord

140 Kontribusi 86 Poin

Dipost 6 tahun yang lalu

Login untuk ikut Jawaban