Nopeuta Calendly-integraatiota

Nopeuta Calendly-integraatiota

Calendly on erinomainen online-ajanvarausohjelmisto! Calendly integroituu työkalenteriisi ja antaa muiden varata tapaamisia suoraan kanssasi. Monet asiakkaani käyttävät Calendlyä ja se toimii todella hyvin!

Calendlyn integrointi verkkosivustollesi

Calendlyn integroimiseen verkkosivustollesi on periaatteessa 3 tapaa. Joko i-framen, klikattavan linkin kautta tai painikkeen kautta. Prosessi on yksinkertainen, klikkaa upotuskoodia, valitse koodi kopioitavaksi ja liitä se verkkosivustollesi. Voilà, olet nyt upottanut Calendlyn sivullesi. Mutta kaikki ei ole ruusuista, sillä olet saattanut myös hidastaa verkkosivustoasi.

Miten Calendly hidastaa Core Web Vitals -mittareitasi?

Upotettuna Calendly lisää i-framen sivustollesi. Jos toteutus tehdään oikein, piirtomittarit (Largest Contentful Paint ja First Contentful Paint) eivät kärsi merkittävästi Calendlyn i-frame-integraatiosta. I-frame vaikuttaa Interaction to Next Paint -mittariin hieman, mutta useimmissa käyttötapauksissa se on hyväksyttävää.

'Ongelma' Core Web Vitals -mittareiden kanssa syntyy, kun lisäät Calendlyn joko Popup widget- tai Popup text -menetelmällä. Sinulle esitetty koodi pyytää lisäämään tyylitiedoston (https://assets.calendly.com/assets/external/widget.css) ja skriptin (https://assets.calendly.com/assets/external/widget.js) sivustollesi.

<!-- Calendly badge widget begin -->
<link 
 href="https://assets.calendly.com/assets/external/widget.css" 
 rel="stylesheet">
<script 
  src="https://assets.calendly.com/assets/external/widget.js" 
  type="text/javascript" 
  async>
</script>
<a href="#" 
   onclick="Calendly.initPopupWidget(
      {url: 'https://calendly.com/corewebvitals/pre-audit-meet'});
   return false;">
   Schedule time with me
</a>
<!-- Calendly badge widget end -->

Tuloksena on huimat 370ms viive, jonka Calendlyn tyylitiedosto aiheuttaa. Tämä johtuu siitä, että sivun head-osion tyylitiedostot ovat oletuksena renderöintiä estäviä. Tämä on loogista, koska ilman tyylejä selain ei tiedä, miltä lopullisen HTML:n tulisi näyttää. Siksi on niin tärkeää, että tyylitiedostot ovat optimoituja Core Web Vitals -työssä.

Asynkroninen skripti kilpailee myös varhaisista resursseista, mutta koska se on asynkroninen, sen aiheuttama viive on paljon pienempi kuin tyylitiedoston aiheuttama viive.

Ratkaisu:

Ratkaisu on tehdä Calendlystä ei-renderöintiä estävä ja bonuksena parantaa ajoitusta. Tähän on helppo ja hieman vaikeampi (ja parempi) tapa. Aloitetaan!

Helppo korjaus

Helpoin tapa on tehdä tyylitiedostosta ei-renderöintiä estävä käyttämällä 'preload-tekniikkaa'. Katso koodiin tekemäni muutokset lihavoituna. Tyylitiedosto ladataan nyt ennakkoon (ja ennakkoladatut resurssit ladataan rinnakkain). Kun tyylitiedosto on latautunut, preload-linkki muutetaan stylesheet-linkiksi, mikä käytännössä lisää tyylitiedoston, joka ei estä renderöintiä!

<!-- Calendly badge widget begin -->
<link
 href="https://assets.calendly.com/assets/external/widget.css" 
 rel="preload"
 as="style" 
 onload="this.rel='stylesheet';this.onload=null;"
>
<script 
  src="https://assets.calendly.com/assets/external/widget.js" 
  type="text/javascript" 
  async>
</script>
<a href="#" 
   onclick="Calendly.initPopupWidget(
      {url: 'https://calendly.com/corewebvitals/pre-audit-meet'});
   return false;">
   Schedule time with me
</a>
<!-- Calendly badge widget end -->

Parempi korjaus

Vaikka helppo korjaus parantaa varmasti piirtomittareitasi, en silti pidä Calendlyn ajoituksesta. Kukaan internetin historiassa ei ole koskaan harmistunut siitä, ettei ajanvarausta voinut tehdä ensimmäisen 100ms:n aikana sivun latauksesta. Priorisoin mieluummin sivun tärkeämmät elementit, kuten LCP-elementin ja kriittiset skriptit, jotka esimerkiksi käsittelevät valikon vuorovaikutusta.

Hyödynnetään tätä tietoa ja ladataan sekä skripti että tyylitiedosto, kun sivun HTML on jäsennetty.  Tämä tapahtuma lähetetään sivulle ja sitä kutsutaan DOMContentLoaded-tapahtumaksi. Kun tämä tapahtuma laukaistaan, lataamme tyylitiedoston ja skriptin asynkronisesti. Kun molemmat ovat latautuneet, luomme klikattavan linkin (callback-funktiossa), joka näyttää ponnahdusikkunan linkkiä klikattaessa. Hienoa, eikö?

document.addEventListener('DOMContentLoaded', function () {

    var stylesheetPromise = new Promise(function (resolve, reject) {
        var stylesheet = document.createElement('link');
        stylesheet.rel = 'stylesheet';
        stylesheet.href = 'https://assets.calendly.com/assets/external/widget.css';
        stylesheet.onload = resolve;
        stylesheet.onerror = reject;
        document.head.appendChild(stylesheet);
    });

    var scriptPromise = new Promise(function (resolve, reject) {
        var script = document.createElement('script');
        script.src = 'https://assets.calendly.com/assets/external/widget.js';
        script.onload = resolve;
        script.onerror = reject;
        document.head.appendChild(script);
    });

    async function yieldToMainThread() {
        if ('scheduler' in window && 'yield' in window.scheduler) {
          return await window.scheduler.yield();
        }
        return new Promise((resolve) => {
          setTimeout(resolve, 0);
        });
      }

    Promise.all([stylesheetPromise, scriptPromise])
        .then(function () {
            const clickEl = document.getElementById('demo');
            clickEl.innerHTML = '<a>Book a Demo</a>';
            document.getElementById('demo').addEventListener('click', async function () {
                this.innerHTML = 'Loading...';
                await yieldToMainThread();
                Calendly.initPopupWidget({ url: 'https://calendly.com/corewebvitals/pre-audit-meet' }); return false;
            });
        })
        .catch(function (error) {
            console.error('Error loading resources:', error);
        });
});

Demo

Kokeile demoa klikkaamalla alla olevaa linkkiä (ja jos tarvitset auditoinnin, varaa aika)

Varaa demo