Gyorsítsunk az oldal betöltésen

img

A közösségi portálok gyors és egyszerű kódokkal segítik a szolgáltatásaik beágyazását weboldalunkba. Egyszerű copy-paste (másolás-beillesztés) az egész. De ezzel van egy aprócska probléma. Minden ilyen közösségi oldal JavaScript kódot használ, ennek a "gördülékeny" megoldásához. Persze van lehetőség iframeben beilleszteni vagy egyéb finomságokkal játszani, de vegyük az átlagos esetet, mikor egyszerűen a Facebook HTML5 kódját használjuk. Tehát ehhez mindenképp kelleni fog egy JS kód is.

A JavaScript használata egyetlen gondot fog nekünk okozni, mégpedig, újabb lekéréseket fog indítani a céloldal felé. Ezzel növeli a betöltési időt, még több HTTP lekérést indít. Tehát egyetlen szóval: rossz.

Mi a jó megoldás? Használjuk helyette a megosztás linkeket.

Miért jó ez nekem? Most persze szintén a Facebookból indulok ki, és a saját megfigyeléseimből. Tehát, ha megosztasz valamit a Facere, akkor az a hírfolyamodban egyből megjelenik, hogy "XY shared a link". Végig görgetem a hírfolyamot és sehol sem látok olyat, hogy "XY liked a link", ez persze a chat felett jelenik meg a Tickerben. Arra nagyjából hetente 1x nézek rá, amikor az online ismerőseim között keresem azt, akire rá szeretnék írni.

Gyorsítsunk az oldal betöltési idején

Ezt már régóta tudjuk, de azért leírom. Az oldal betöltési ideje nagyban függ a felhasznált források méretétől és betöltési idejétől. Ez pedig, hogy a mobilok és tabletek egyre nagyobb mértékben veszik át a hatalmat a webezésben, kiemelten fontos. Annak, akinek okos telefonja van, az esetek nagy részében van mobilinternet előfizetése is. Tehát, ha mi több adatot töltünk be az oldalunkon - tök egyszerű - a felhasználóinknak nagyobb lesz az adatforgalma.

Számolgassunk:

Közösségi oldalFájlok számaFájlméret
Facebook373,3KB
Google+115,1KB
Twitter452,7KB
LinkedIn247,7KB
Pinterest312,9KB
Tumblr11,5KB
Összesen14203,2KB

Ez tehát összesen 14 lekérést indít a külső szolgáltatók felé. Egy átlagos internet kapcsolat esetén ez olyan 1-4 másodperc plusz a betöltési időben. Ha developer toolsban átállítjuk a kapcsolatot EDGE hálózatra, akkor ez már 7-8 másodperc a betöltésnél.

Nem hangzik túl jól. Erre szintén egy személyes példám van. A DicsakBuksi, amit nemrég zártam be, 4 közösségi portál összes elérhető gombját helyezte ki. Egy oldalon 10 bejegyzés, ezekhez Google+, Facebook, Twitter és Pinterest gombokat töltött be. Az oldal volt, hogy 10 másodperc alatt sem tudott felállni, mert még mindig a gombokat töltögette a háttérben. Persze a teljes letöltésig az oldal szinte be volt fagyva. Se görgetni, se kattintani nem tudtak a felhasználók. Ez így nem jó.

Másik fontos kérdés, amit ma egyre többször hoznak fel a felhasználók, a személyes adatok védelme. Azzal, hogy a fent is említett közösségi portálok felé - beágyazható gombok által - kéréseket küld az oldalunk, a közösségi portálok képesek követni a felhasználókat. Erről volt is vita például a Facebook esetében.

Tehát, a megosztással - ami elérhető minden portál esetében egy egyszerű linken keresztül - nem csak az oldalunk betöltését tudjuk felgyorsítani, de a felhasználóink követését is megakadályozhatjuk. Ez szerintem - bár nem mintha a legtöbb magyar netező ezzel tisztában lenne - egy jó pont a számunkra.

Használjunk megosztás linkeket

Tehát elérkeztünk a fő célunkhoz. Mint már említettem, minden közösségi portál biztosít egy egyedi linket, amin keresztül a megadott paraméterek alapján, a felhasználóink meg tudják osztani a tartalmat. És ami a legfontosabb, mivel ezek linkek, nem használnak JavaScriptet.

Az egyik legfontosabb dolog a megosztási linkek használatakor, hogy a paraméterben átadott URL mindig encode-olva legyenek.

Egy encode-olt URL így néz ki az oldalamnál:

http%3A%2F%2Fwww.leoamros.com%2F

PHP-ban ez baromi egyszerű:

<?php echo urlencode('http://www.leoamros.com/'); ?>

Vagy mivel sokáig Smartyt használtam:

<a href="?xy={$shareLink|escape:'url'}">Share</a>

Tehát ez mondjuk egy Facebook megosztásnál valahogy így nézne ki a weboldal HTML kódjában:

<a href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fwww.leoamros.com%2F"
    target="_blank">Megosztás a Facebookon</a>

Így már lehet szépen formázgatni saját kódba illő gombokkal:

<a href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fwww.leoamros.com%2F"
    target="_blank" class="btn btn-facebook btn-md">
    <i class="fa fa-facebook"></i> Megosztás</a>

Jajj, de szép.

Több paraméteres megosztási linkek

A Facebook nem gatyázott, egyetlen paramétert kér, az u-t, ami a megosztandó linket tartalmazza. Ezzel szemben például a Twitter 3 paramétert fogad, text, url és via.

text: megosztandó szöveg

url: megosztandó link

via: Twitter felhasználónév

Tehát a fenti példa átültetve Twitter linkre:

<a href="https://twitter.com/intent/tweet/
        ?text=Ezt%20az%20oldalt%20mindenképp%20meg%20kell%20nézned!
        &url=http%3A%2F%2Fwww.leoamros.com%2F
        &via=Leoamros"
    target="_blank">Megosztás a Twitteren</a>

És ezt is formázhatjuk:

Vigyünk bele egy kis saját JavaScriptet

Miután kizártuk az oldalunkról a közösségi portálok JavaScript fájljait, azért a saját JS kódunkba még írhatunk néhány sort. Ennek lényege, hogy nem új ablakban fogjuk megnyitni a megosztást, hanem egy popup ablakban. Ezzel kicsit pofásabbá tehetjük a megosztást. Körülbelül hasonló képernyőt dobálnak fel a közösségi oldalak is, tehát a felhasználó nagyjából a megszokott módon oszthatja meg a tartalmat.

function socialPopup(url, width, height) {
    //meghatározzuk, hogy a képernyő közepére kerüljön a felugró ablak
    var left = ((screen.width - width)/2),
    top = ((screen.height - height) / 2);

    window.open(
        url,
        "",
        "menubar=no,toolbar=no,resizable=yes,scrollbars=yes, \
        width=" + width + ",height=" + height + ",top=" + top + ",left=" + left
    );
}

Mi az a \ jel a JavaScript kódban?

Ezzel létrehoztunk egy függvényt, amit minden linkhez hozzá kell csatolnunk, amin keresztül megosztást végzünk. Erre a legegyszerűbb, ha egy új CSS osztályt hozunk létre, mondjuk popup-social-share néven és ehhez kötjük hozzá a felugró ablakot.

jQuery-ben ez így néz ki:

$('.popup-social-share').on('click', function(e) {
    e.preventDefault();

    socialPopup($(this).attr('href'), 600, 400);
});

A gombunk pedig kibővül a popup-social-share osztállyal:

<a href="https://twitter.com/intent/tweet/
        ?text=Ezt%20az%20oldalt%20mindenképp%20meg%20kell%20nézned!
        &url=http%3A%2F%2Fwww.leoamros.com%2F
        &via=Leoamros"
    target="_blank"
    class="popup-social-share">Megosztás a Twitteren</a>

Persze ezt nem kötelező jQueryvel megoldani, simán natív JavaScriptben is megoldható, csak így rövidebb és általában a legtöbb oldalon használunk jQueryt.

És a végeredmény:

Közösségi portálok megosztó linkjei:

A kódot kénytelen vagyok több sorba törni a könnyebb olvashatóság kedvéért. Ha a minta kódokat kimásolod és beilleszted a saját kódodba, töröld a felesleges szóközöket és új sorokat!

Minden paraméternek urlencode-olva kell lennie!

Oda írhatnám minden link alá, de nincs értelme!

Facebook megosztás

<a href="https://www.facebook.com/sharer/sharer.php
        ?u=http%3A%2F%2Fwww.leoamros.com%2F"
    target="_blank">Facebook megosztás</a>

A Facebooknak egyetlen paramétere van:

  • Az u, ami kötelező és a linket kell tartalmaznia.

Google+ megosztás

<a href="https://plus.google.com/share
        ?url=http%3A%2F%2Fwww.leoamros.com%2F"
    target="_blank">Google+ megosztás</a>

A Google Plusnak két paramétere van:

  • Az url, ami kötelező és a linket kell tartalmaznia.
  • A hl paraméter, ami nem kötelező és a felugró ablak nyelvét tudjuk vele kiválasztani.

Google Plus megosztás dokumentációja

LinkedIn megosztás

<a href="https://www.linkedin.com/shareArticle
        ?mini=true
        &url=http%3A%2F%2Fwww.leoamros.com%2F
        &title=Leoamros.com
        &source=http%3A%2F%2Fwww.leoamros.com%2F
        &summary=Rövid%20leírás"
    target="_blank">LinkedIn megosztás</a>

A LinkedIn-nek összesen öt paramétere van:

  • A mini, ami kötelező és az értéke mindig true.
  • Az url, ami kötelező és a linket kell tartalmaznia.
  • A title, ami természetesen a megosztás címe lesz, nem kötelező.
  • A source, ami a weboldal vagy applikáció címét, nevét tartalmazza, nem kötelező.
  • A summary, ami a megosztás leírása, nem kötelező.

LinkedIn megosztás dokumentációja

Pinterest megosztás, vagyis PinIt

<a href="https://www.pinterest.com/pin/create/button/
        ?url=http%3A%2F%2Fwww.leoamros.com%2F
        &media=http%3A%2F%2Fwww.leoamros.com%2Ficon.png
        &description=Rövid%20leírás" 
    target="_blank">Pinterest megosztás</a>

A Pinterestnek összesen három paramétere van:

  • Az url, ami kötelező és a linket kell tartalmaznia.
  • A media, ami a megosztandó képre mutat, ha jól tudom nem kötelező, de ajánlott, máskülönben az oldalon található összes képet felajánlja választásra a Pinterest
  • A description, ami a megosztott tartalom rövid leírása, nem kötelező.

Pinterest megosztás dokumentációja

Twitter megosztás

<a href="https://twitter.com/intent/tweet/
        ?text=Ezt%20az%20oldalt%20mindenképp%20meg%20kell%20nézned!
        &url=http%3A%2F%2Fwww.leoamros.com%2F
        &via=Leoamros
        &hashtags=weblapkészítés,programozás"
    target="_blank">Twitter megosztás</a>

A Twitternek összesen hat paramétere van, ebből általánosságban a fenti négyet használjuk:

  • A text, ami a megosztandó rövid szöveg, opcionális, maximum 140 karakter
  • Az url, ami a megosztandó link, opcionális
  • A via, ami a megosztandó szöveghez kapcsolható Twitter felhasználó, mondjuk az oldal tulajdonosa, opcionális
  • A hashtags, ami a szöveg kulcsszavait tartalmazhatja, opcionális

Ami a fenti példában nincs

  • A related, további Twitter felhasználókat köthetünk az adott témához, opcionális
  • Az in-reply-to, egy korábbi beszélgetés azonosítója, mondjuk egy vita indításakor, az első Twitt azonosítója, opcionális

Twitter megosztás dokumentációja

Tumblr megosztás

<a href="https://www.tumblr.com/share
        ?posttype=link
        &tags=weblapkészítés,programozás
        &title=Ezt%20az%20oldalt%20mindenképp%20meg%20kell%20nézned!
        &content=http%3A%2F%2Fwww.leoamros.com%2F
        &caption=Rövid%20leírás
        &show-via=Leoamros"
    target="_blank">Tumblr megosztás</a>

A Tumblr-nek összesen hat paramétere van. Mivel ez egy kicsit bonyolultabb, így itt nem fogom túlságosan elmagyarázni, csak nagyjából, itt hagyatkozz a dokumentációra:

  • A posttype, a megosztás típusától függően lehet text, photo, quote, link, chat vagy video. Mondtam, hogy bonyolult
  • A tags, a kulcsszavak listája vesszővel elválasztva.
  • A title, a bejegyzéshez tartozó cím
  • A content, a posttype függvényében lehet link, kép, beágyazható videó kódja. Nem ismétlem magam
  • A caption, a posttype függvényében lehet a link, video vagy kép leírása, idézetnél az idézet tulajdonosa.
  • A show-via, pedig hozzáfűzhetjük a forrást, mondjuk egy nevet.

Szóval eddig ez talán a legbonyolultabb, mivel itt a tartalom típusától függően, többféle beállítás létezik. Ha ezt be szeretnéd építeni:

Tumblr megosztás dokumentációja

Reddit megosztás

<a href="http://www.reddit.com/submit/
        ?url=http%3A%2F%2Fwww.leoamros.com%2F"
    target="_blank">Reddit megosztás</a>

A Reddit egyetlen paramétert kér

  • Az url-t, ami a megosztandó link és kötelező

Reddit megosztás dokumentációja

Összegzés

Igaz, hogy néhány alap funkciótól elesünk, mivel például a Facebooknál nincs lehetőségünk egyedi leírást vagy képet beállítani, vagy épp nem tudunk számlálókat kitenni az oldalra, hogy lássák a felhasználóink, milyen sokan (vagy épp kevesen) osztották meg a bejegyzésünket/oldalunkat.

De rengeteg plusz dolgot nyerünk vele. Mondjuk jó pár másodperccel rövidebb betöltési időt, így kevesebb elkattintást oldalunkról. Szerintem ez már egy elég jó pont.

Vissza egy kicsit az adatvédelmi témához

Még menet közben kicsit gondolkodtam, hogy a fenti adatvédelemről szóló részbe bele lehet kicsit kötni, így ezt most tisztába rakjuk.

Tehát ezt a "szolgáltatását" oldalunknak főleg azok fogják élvezni, akik nem kattintanak a megosztás linkre. Mivel nem töltünk be külső JavaScriptet a közösségi oldalakról, így míg nem kattintanak rá a gombra, a közösségi oldal nem tudja követni a felhasználóinkat. Amikor rákattint már természetesen tudni fogja a külső oldal - ha mást nem a linkből - hogy épp nálunk tartózkodik a felhasználó. De a további nyomkövetés szintén lehetetlen.

Persze a Google Analytics, a külső CDN oldalak, és egyéb szépségek ettől még továbbra is el tudják helyezni a nyomkövető Cookiekat. Tehát itt most csak a közösségi oldalakat tudjuk kizárni a "versenyből".