AXNDatan SEO Työkalut: JS pakkaus
JS pakkaus
Syötä JS koodi pakattavaksi
Syötä jopa 10 tiedostoa Koko rajoitus 2mb per tiedosto
Haluatko pakata kotisivusi JS tiedostot? Kokeile meidän ilmaista työkalua joka pakkaa automaattisesti JS tiedostot. JS tiedostojen pakkaaminen nopeuttaa scriptin latautumista jolloin myös kotisivusi latausnopeus parantuu. Huomioithan että arvostamme yksityisyyttäsi ja kun lisäät koodisi tai lataat tiedostosi niitä ei säilytetä meidän palvelimella vaan selaimesi hoitaa pakkaamisen puolestamme eli tämä työkalu on turvallinen käyttää emmekä varasta koodiasi!
HUOMIO: Jquery tiedoston pakkaamiinen sekoittuu sivustolla koska meidänkin sivustomme käyttää tuota tiedostoa, Jquery voidaan pakata tällä testillä mutta älä säikähdä sivuston ulkoasun muutosta pakkaamisen jälkeen. Saat napattua kuitenkin optimoidun Jquery tiedoston ja liitettyä sen oman Jquery tiedostosi tilalle.
Miksi pakata JS tiedostot?
Jokainen Javascript tiedosto hidastaa omalta osaltaan kotisivun latautumista, tällöin kannattaa pakkaa JS tiedostot jolloin scripti tiedoston koko pienentyy ja latautuminen nopeutuu. Useimmat kotisivut tarvitsevat javasript tiedostoja sivuston toimivuuden kannalta, kannattaa myös katsoa onko javascript koodissa joitakin käyttämättömiä rivejä tai kokonaisia javascript tiedostoja joita ei käytetä. Javascript tiedostot voidaan laittaa latautumaan sivuston Footer osiossa eli kaiken sisällön jälkeen tällöin scripti tiedoston eteen laitetaan joko "async" tai "defer" tagi joka nopeuttaa sivuston latautumista.
Mikäli palvelimellasi on käytössä HTTP/2 tai uudempi protokolla ei javascript tiedostoja tarvitse lähteä yhdistämään kun HTTP/2 protokolla mahdollistaa useamman resurssin saman aikaisen lataamisen.
Mitä tarkoittaa DEFER?
Kun scriptiin lisätään ennen src="sripti.js"> defer tagi eli siis <script defer src="scripti.js"></script> kerrotaan selaimelle että sen ei tarvitse odottaa scriptin latautumista jolloin scripti tiedosto voidaan sijoittaa mihin tahansa sisällössä, DEFER tagi ei koskaa estä renderöintiä.
Mitä tarkoittaa ASYNC?
Kun scriptiin lisätään ennen src="sripti.js"> async tagi eli siis <script async src="scripti.js"></script> kertoo selaimelle että sen ei tarvitse ladata scripti tiedostoa juuri nyt, lisäksi muut javascript tiedostot eivät odota async scriptin latautumista jolloin muu DOM sisältö ladataa ennenkuin async scriptiä aletaan lataamaan, async on siis paras tapa lisätä esimerkiksi analytiikka tai mainos scriptejä sivustolle koska ne eivät vaikuta sivuston latautumiseen kun async javascript tiedostot ladataan vasta kun kaikki muu sisältö on ladattu. Async javascript tiedostot siis ladataan taustalla ja otetaan käyttöön vasta kun niitä tarvitaan, jos sivustolla on useampi async scripti tiedosto ne eivät odota toistensa latautumista vaan ne otetaan käyttöön silloin kun ne on ladattu jolloin sivuston latautuminen nopeutuu!
VINKKI: Kokeile google chromella painaa F12 jolloin aukeaa dev tools palkki, klikkaa oikealta yläosasta "Network" kohtaa ja paina F5 jolloin sivusi ladataan uudestaan, tällöin saat selville kuinka nopeasti sivusto latautuu sinun selaimessasi ja sinun nettiyhteydellä.
Lue myös artikkeli: Kotisivun latausnopeuden parantaminen
Lue myös artikkeli: WordPress sivuston latausnopeuden parantaminen