JavaScript

JAVASCRIPTIIN LIITTYVÄÄ KOULUTUSTA VUONNA 2025!

Kurssit saatavilla kautta Suomen. Tule ja varaa oma koulutustapahtumasi heti! Koulutuksen järjestää asiantuntijasi Koulutus- ja konsultointipalvelu KK Mediat.

JavaScript koodin upottaminen verkkosivulle

JavaScript-koodia voi liittää verkkosivulle useilla eri tavoilla. Koodiin liittämistapa, sijainti, latausjärjestys (kuten async ja defer-attribuuttien käyttö), sekä lazy loading ovat tekijöitä joilla skriptin vaikutusta niin käyttäjäkokemukseen kuin Googlen PageSpeed-pisteytykseen voi ohjata.

Skriptin liittäminen osaksi verkkosivua

JavaScript-koodi liitetään verkkosivun HTML-koodiin script-elementin avulla. Yksinkertaisimmillaan se näyttää tältä: 


<script type="text/javascript">
// JavaScript koodi sijoitetaan tänne
</script>

Vaihtoehtoisesti JavaScript-koodin voi sijoittaa erilliseen tiedostoon, joka ladataan verkkosivulle erillisenä resurssina. Tämä tehdään määrittämällä script-elementille src-attribuutti, joka sisältää JS-tiedoston polun: 


<script src="/kansio/tiedosto.js" />

Yhteensopivuuden maksimoiminen

Nykyisin kaikki mainstream-selaimet tukevat script-elementin käyttöä. Tietyissä harvinaisissa tilanteissa kommenttimerkkien käyttö voi parantaa yhteensopivuutta vanhojen selainten ja harvinaisempien bottien kanssa. Näitä tilanteita varten JavaScript-koodin voi sijoittaa HTML-kommenttien sisään seuraavasti: 


<script type="text/javascript">
<!--
// JavaScript koodi sijoitetaan tänne
//-->
</script>

Mihin kohtaan HTML-koodia skriptit tulisi liittää?

Kun upotat JavaScript-koodia verkkosivulle, on tärkeää huomioida koodin vaikutus sivun suorituskykyyn ja hakukonenäkyvyyteen. Oikea sijoittaminen ja latausmenetelmät voivat estää turhia viiveitä ja parantaa sivun latausaikaa. Vastaavasti huonosti toteutettu koodi voi aiheuttaa merkittäviäkin ongelmia.

Asynkroninen ja viivästetty lataus

async- ja defer-attribuuttien käyttäminen on tehokas keino parantaa suorituskykyä. Näiden avulla skriptien lataamista ja suorittamista voidaan ohjata tehokkaammaksi:

Esimerkki asynkronisesta skriptin lataamisesta: 


<script src="tiedostopolku.js" type="text/javascript" async > </script>

Esimerkki defer-ominaisuuden käyttämisestä:


<script src="tiedostopolku.js" type="text/javascript" defer >  </script>

Huom! Script-elementissä ei voi käyttää samanaikaisesti sekä async- että defer-attribuuttia. Käytä vain yhtä kerrallaan.

Skriptin sijoittaminen body-elementtiin

Jos skripti ei ole riippuvainen sivun visuaalisesta sisällöstä, on suositeltavaa sijoittaa skriptit HTML:n body-elementin loppuun. Näin toteutettuna selain lataa sivun sisällön (teksti, kuvat, jne.) ennen skriptin suorittamista – mikä nopeuttaa sivun renderöintiä selaimessa. 


<body>
  <!-- Sivun sisältö -->
  <script src="tiedostopolku.js" type="text/javascript" defer >  </script>
</body>

Lazy Loading JavaScript

Sivuston suorituskyvyn parantamiseksi voit hyödyntää myös nk. lazy loadingia. Tällöin JavaScript-ladataan vasta tietyn tapahtuman - esimerkiksi painikkeen painamisen tai sivun latautumisen - tapahduttua. Esimerkiksi Google Analytics ja Google Tag Manager hyödyntävät tätä suunnittelutapaa toteutuksissaan: 


<button id="loadScript">Lataa lisää sisältöä</button>

<script>
  document.getElementById('loadScript').addEventListener('click', function() {
    var script = document.createElement('script');
    script.src = 'dynaaminen-skripti.js';
    document.body.appendChild(script);
  });
</script>

Artikkelin tiedot

Otsikko: JavaScript koodin upottaminen HTML-sivulle

Kuvaus: Opi liittämään JavaScript-koodi HTML:ään. Tutustu script-elementin käyttöön ja hyödynnä async-, defer- ja lazy loading -ominaisuuksia suorituskyvyn parantamiseksi.

Julkaisija: Koulutus- ja konsultointipalvelu KK Mediat

Viimeksi päivitetty: