📝 Esittely
“Garage21” on autokorjaamo Kalamatassa, Kreikassa. Heidän vanha verkkosivunsa oli teknisesti vanhentunut, hidas eikä toiminut kunnolla mobiililaitteilla.
Rakensin heille uuden sivuston alusta asti. Toisin kuin muissa projekteissani, en käyttänyt tässä raskaita kehyksiä, vaan luotin perinteiseen ja kevyeen koodiin (HTML & SCSS). Tavoitteena oli maksimaalinen nopeus ja luotettavuus.
✨ Tärkeimmät ominaisuudet:
- 📱 Täysin responsiivinen: Sivu näyttää hyvältä kaikilla laitteilla, mikä on tärkeää, sillä asiakkaat etsivät apua usein tien päällä puhelimella.
- 📍 Google Maps integraatio: Upotettu kartta auttaa asiakkaita löytämään korjaamon helposti.
- 📩 Yhteydenottolomake: Asiakkaat voivat varata ajan tai kysyä huollosta suoraan sivun kautta ilman sähköpostiohjelman avaamista.
- 🇬🇷 Paikallinen SEO: Sivusto on optimoitu kreikankielisille hakusanoille (kuten “autokorjaamo Kalamata”), jotta paikalliset löytävät sen.
🛠️ Käytetyt teknologiat:
- Kielet: HTML5, SCSS (Sass)
- Lomakkeet: Netlify Forms (serverless)
- Hosting: Netlify
- Optimointi: Lazy loading kuville ja kartoille
🎯 Tarkoitus ja tavoite
Asiakkaan suurin ongelma oli vanha verkkosivualusta, joka oli buginen ja vaikea käyttää. He menettivät asiakkaita, koska yhteystiedot ja palvelut eivät löytyneet helposti.
Tavoitteeni oli luoda “huoleton” sivusto: sellainen, joka ei mene rikki päivitysten myötä ja joka latautuu salamannopeasti myös hitaalla 3G-yhteydellä.
Tämän projektin “tähti” on sen tekninen yksinkertaisuus. Koska sivusto on pelkkää HTML:ää ja CSS:ää, se on käytännössä mahdotonta “hakkeroida” ja se toimii millä tahansa laitteella, jopa vanhoilla selaimilla.
🔧 Tekniset haasteet ja ratkaisut:
Haaste: Lomakkeet ilman taustajärjestelmää. 📨
Halusin sivustolle yhteydenottolomakkeen, mutta en halunnut pystyttää raskasta palvelinta (backend) tai tietokantaa pelkästään sitä varten.
✅ Ratkaisu: Käytin Netlify Forms Lisäämällä HTML-lomakkeeseen pienen netlify-attribuutin, Netlify hoitaa viestien vastaanottamisen ja lähettää ne automaattisesti asiakkaalle sähköpostilla. Tämä on turvallinen ja ilmainen ratkaisu pienyritykselle.
Haaste: Kartan latausnopeus. 🗺️
Google Maps kartan upottaminen (iframe) yleensä hidastaa sivun latautumista merkittävästi.
✅ Ratkaisu: Lisäsin karttaan loading="lazy" attribuutin
Tämä kertoo selaimelle, että kartta ladataan vasta sitten, kun käyttäjä vierittää sivua alaspäin kohti karttaa. Sivun yläosa aukeaa siis heti ilman viivettä.
📊 Mittarit & Standardit
Yksinkertaisen rakenteen ansiosta sivusto saa huippupisteet suorituskyvystä.
⚡ Suorituskyky (Performance):
- Koska sivustolla ei ole JavaScript-kehyksiä hidastamassa, se saa Googlen nopeustesteistä täydet pisteet.
- Kaikki kuvat on optimoitu WebP-muotoon ja niissä on width ja height mitat, mikä estää sivun “hyppimisen” latauksen aikana
🔍 Hakukoneoptimointi (SEO):
- Sivulla on tarkat kreikankieliset avainsanat (keywords) ja kuvaukset (description), jotka auttavat Googlea ymmärtämään, että kyseessä on paikallinen palvelu.
- Sosiaalisen median jaot näyttävät ammattimaisilta oikeiden otsikoiden ja kuvien ansiosta.
🔒 Tietoturva (Security):
netlify.tomltiedostossa on määritetty tiukat tietoturvaotsikot, jotka estävät mm. XSS-hyökkäykset ja pakottavat salatun HTTPS-yhteyden.- Koska sivustolla ei ole tietokantaa tai dynaamista koodia, hyökkäyspinta-ala on olematon.
👁️ Yksityisyys (Privacy):
- Sivusto kunnioittaa yksityisyyttä. Ei Google Analyticsia tai mainosevästeitä.
- Koska seurantaa ei ole, raskaita evästebannereita ei tarvita, mikä parantaa käyttökokemusta.
♿ Saavutettavuus (Accessibility):
- Lomakekentissä ja linkeissä on selkeät kuvaukset ruudunlukijoille.
- Tekstin ja taustan värit täyttävät saavutettavuusstandardit.
🟢 Nykyinen tilanne
Sivusto on aktiivisessa käytössä ja palvelee korjaamon asiakkaita päivittäin. Se on osoitus siitä, että aina ei tarvita monimutkaista teknologiaa – joskus yksinkertainen on paras.
🎓 Opetukset
Opin, kuinka paljon pelkkä kuvien ja iframe-upotusten laiska lataus (lazy loading) vaikuttaa sivun nopeuteen mobiiliverkoissa.
