Facebook Chat – koszmar optymalizacji

Optymalizacja strony internetowej, abstrahując od ogólnych zasad SEO, jest balansem między szybkością wczytywania i wygodą interfejsu użytkownika skupiającą się w ramach UX/UI. Z jednej strony szybkość ładowania witryny podpowiada, że najlepiej trzymać czystą instancję WP, bez żadnych dodatkowych back-endów. A z drugiej przychodzi wygoda użytkownika, która jednak wymaga narzędzi do ułatwienia korzystania ze strony, np komunikacji z nami. Zamiast zmuszać odbiorcę do kopiowania naszego adresu email, logowania się na pocztę i dopiero pisania do nas możemy to ograniczyć do kliknięcia jednej ikony i rozmowy np. przez Facebook Chat. Może z marketingowego punktu widzenia FB Chat jest świetnym i wygodnym rozwiązaniem, ale ze strony optymalizacji (zwłaszcza szybkości wczytywania) jest koszmarem. Jak sobie z nim poradziliśmy? Zapraszam do lektury!

Background

Gdy przekuwaliśmy nasza pasję robienia stron na bardziej zarobkowe zajęcie pojawiła się potrzeba ulepszenia obszarów komunikacji, czyli poszerzenie go o nowe kanały. Jedna osoba woli pisać mejle, bo docelowo ma klienta poczty na komputerze. Inni wolą dzwonić, a jeszcze inni wolą nowocześniejsze rozwiązania jak komunikacja przez social media, więc naturalnym krokiem było wdrożenie Messengera. Tym bardziej, że Facebook uprościł to do kilku kliknięć i wygenerowania kilku linijek kodu, który wystarczy wkleić na stronie.
Z jednej strony uzyskaliśmy narzędzie komunikacji ułatwiające rozmowę, bo my widzieliśmy kto jest po drugiej stronie, a ta osoba nie musiała podawać nam żadnych danych – wystarczyło, że byliśmy oboje zalogowani na FB. Z drugiej jednak strony dostaliśmy 4 sekundy opóźnienia podczas ładowania strony i 110 ekstra zapytań HTTP – retromedia.pl ważyło tyle, co wózki zakupowe z makaronem i ryżem podczas pandemii.
Nie będę wam wrzucał screenów z naszych pomiarów, ale wklejam link do bloga , który pięknie obrazuje o czym piszę. Zwróćcie uwagę jak bardzo w 2017 roku facebookowy plugin spowalniał strony, mimo zapewnień z 2016 roku, że każda nowa odsłona wtyczki będzie lżejsza i szybsza. Mamy 2020 rok, wersję plugina 8.0 i koszmar trwa w najlepsze.

Szukamy rozwiązania

Założenie poszukiwań było bardzo proste. Znaleźć poradę, która pozwoli odchudzić maksymalnie kod lub requesty wtyczki, a zasoby które ładują się niepotrzebnie i obciążają stronę powinny się ładować na żądanie użytkownika lub z opóźnieniem.

Oczywiście pierwsze kroki zrobiliśmy do wujka Google, ale z kilkudziesięciu wyników jakie dostaliśmy większość dotyczyła głównie opisu samego zjawiska „najwolniejszej wtyczki dla stron internetowych” i zawierała radę, żeby to wywalić. Czasami spotykaliśmy alternatywną wersję tej odpowiedzi: „Wywal Facebook Chat, bo spowalnia, a zainstaluj naszą ultra lekką wtyczkę”. Teoretycznie to była jakaś opcja, ale sprowadzała się do trzech głównych wad. Po pierwsze musielibyśmy założyć nowe konto, a to oznaczało dodatkowy panel do obsługi i ekstra okno w przeglądarce. Po drugie darmowe profile alternatywnych chatów mają swoje ograniczenia i żeby je pokonać, to trzeba zapłacić – czyli wygenerować dodatkowy koszt, który w czasach kryzysów jak ten dzisiejszy są niewskazane. Pomijam już czas, który trzeba spędzić do zapoznania się z systemem i jego interfejsem. Jednak Facebook był pozbawiony tych wad i nie generował dodatkowej ceny (poza prywatnością oczywiście ?)

Następnie nasza uwaga skupiła się na Facebook for Developers i czytaniu dokumentacji. Dokumentacja jak to dokumentacja, podpowiedziała „co z czym się je”, ale nie dała żadnej sensownej solucji jak można przyśpieszyć to i owo. W sumie to mało mamy wpływu na kod wtyczki, bo generuje się on w inframe i bez dostępu do źródłowej strony za dużo nie zrobisz. Oczywiście są pewne tricki, ale nie chcieliśmy utrudniać sobie zadania, dlatego optowaliśmy za gotowym rozwiązaniem.
Kolejnym kierunkiem, jaki obraliśmy były wtyczki obsługujące FB Chat, które działałaby razem z WordPressem. Jednak okazało się, że praktycznie każdy plugin korzystał z tego samego kodu, który możesz sobie wygenerować na fanapage’u, dodatkowo instalując niepotrzebne tony swojego back-endu. Bardziej szukaliśmy wtyczki w formie „klienta facebookowego czatu” pisanego od podstaw, ale pobierającego potrzebne info z API. I tym razem nie powiodło się.

W pewnym momencie zaczęliśmy się zastanawiać czy może źle robimy, może źle zadajemy pytanie i Google nas nie rozumie. Dlatego postanowiliśmy zapytać wordpressową społeczność i pierwsze pytanie zadaliśmy na… WordPress Polska na Facebooku. To uświadomiło nas, że nie warto pytać na takich grupach i potem już nie robiliśmy takiego błędu. Pytanie brzmiało mniej więcej tak: „Facebook Chat spowalnia nam stronę. Czy znacie jakieś wtyczki odchudzające FB Chat albo jakieś alternatywne rozwiązania?”. Jakie mogłyby być odpowiedzi na WordPress Polska? A takie: „A dlaczego tak robicie?” ,”Tak się nie robi”, „A po co?”,”Wtyczek się nie używa!”, „Przerzuć sobie JS na koniec ładowania strony”. Generalnie wysyp Januszy z odpowiedziami nie na temat, ale jeden normalny Pan zainspirował nas sugestią, ze możemy przecież wrzucić ikonę i przekierować bezpośrednio na Messengera. To rozwiązanie ma taką wadę, że wymaga dodatkowego logowania, a nam chodziło o uproszczenie całego procesu. Jeśli już jesteś zalogowany do FB, to nie logujesz się osobno do Messengera, tylko klikasz „Kontynuuj jako…”. Niemniej – jak napisałem powyżej – Pan nas zainspirował, a zastosowane rozwiązanie znajdziecie poniżej.

Poznaj „Lite FB Chat”

Nasze rozwiązanie (czy bardziej trick) nazwaliśmy roboczo Lite FB Chat i kod, który znajdziecie poniżej uznaliśmy za wersję 0.1.
W ogóle na początku myśleliśmy nad zastosowaniem setTimeout() ale tylko opóźnilibyśmy, to co nieuchronne, nie mając kontroli nad zasobami. A docelowo chcieliśmy uzyskać chat tylko na komputerze, a nie na telefonie, bo na komórkach wolimy promować rozwiązania Call Button, czyli jeden przycisk, żeby na szybko do nas zadzwonić. Jednak nie było opcji wyłączenia iframe na komórce , a tylko ukrycie go przez CSS, co powodowało, że FB Chat nie był widoczny, ale i tak się ładował w tle.

Wtedy przyszło olśnienie! Przenieśmy kod generowany przez FB do osobnej strony pisanej w czystym html, która w ogóle nie jest częścią WordPressa, a tę stronę wywołajmy w nowym oknie prostym java scriptem korzystającym z onclick i window.open(). Oczywiście ciągle nie mamy kontroli nad requestami z Facebooka, ale zyskaliśmy 3 ważne rzeczy. Pierwsza to okno chatu, które jest generowane tylko wtedy, jeśli użytkownik je aktywuje i nic nie ładuje się w tle spowalniając stronę. Druga rzecz jest taka, że sam skrypt z Facebooka w czystym htmlu ładuje się miedzy 400 a 700 ms, a nie 3-4 s jak ze front-endem strony. Zatem użytkownik nie musi długo czekać i praktycznie ma okno wygenerowane od razu. A ostania rzecz to brak możliwości przejścia do nowego okna na komórce, bo zablokowaliśmy wyświetlanie się diva z ikoną urządzeniach mobilnych.

Reasumując FB Chat ładuje się:
– tylko kiedy użytkownik chce
– szybciej niż z CMSem
– tylko na komputerach.
To znaczy, że uzyskaliśmy wszystkie rzeczy, które nas interesowały! 🙂

Kody do skopiowania

Poniższy kod jest zwykłym dokumentem html i na potrzeby tego posta nazwijmy go facebook-chat.html i to będzie plik – jak nazwa wskazuje – z chatem z Facebooka.

<!DOCTYPE html>
<html lang="pl-PL">
<head>
<title>Facebook Messneger</title>
<meta charset="utf-8">
</head>
<body>

TU UMIEŚĆ KOD WYGENEROWANY Z FACEBOOKA

</body>
</html>

Przykładowy kod wygenerowany przez FB powinien wyglądać mnie więcej tak:

<!-- Load Facebook SDK for JavaScript -->
      <div id="fb-root"></div>
      <script>
        window.fbAsyncInit = function() {
          FB.init({
            xfbml            : true,
            version          : 'v8.0'
          });
        };

        (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = 'https://connect.facebook.net/pl_PL/sdk/xfbml.customerchat.js';
        fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));</script>

      <!-- Your Chat Plugin code -->
      <div class="fb-customerchat"
        attribution=setup_tool
        page_id="xxxxxxxxxxxxxxxxxxxxx" /*ID TWOJEJ STRONY*/
  logged_in_greeting="Cześć!"
  logged_out_greeting="Cześć!">
      </div>

A kod, który trzeba wkleić u siebie na stronie wygląda tak:

<!-- Lite FB Chat by RetroMedia.pl v.0.1-->
<a href="https://przykładowyadres.xyz/facebook-chat.html"
   onclick="window.open(this.href,'targetWindow',
                                   `toolbar=no,
                                    location=no,
                                    status=no,
                                    menubar=no,
                                    scrollbars=no,
                                    resizable=no,
                                    width=420,
                                    height=800`);
 return false;"> <div id="lite-fb-chat"><img src="https://przykładowyadres.xyz/facebook-messenger-icon.webp" alt="Lite FB Chat" width="70" height="70"></div> </a>
<style>
/** ustawia ikonę w prawym dolnym rogu strony **/
#lite-fb-chat{
	position:fixed;
	right:20px;
	bottom: 5px; 
	z-index:99;
	}
/** blokuje ikonę na ekranach z rodzielczością mniejsza niż 720p **/
@media only screen and (max-width: 719px){
#lite-fb-chat{
	display:none;
	visibility:hidden;
}
}
</style>

Kod po this.href powinien zostać w nowych liniach. Bez łamania linii powyższy kod może nie działać na starszych przeglądarkach.
Pamiętaj, żeby https://przykładowyadres.xyz/facebook-chat.html zmienić na swój właściwy adres, gdzie umieściłeś plik z oryginalnym kodem z Facebooka. Tak samo musisz zamienić https://przykładowyadres.xyz/facebook-messenger-icon.webp na link prowadzący do grafiki, która będzie się wyświetlać w formie logo messengera. Jeśli nie wiesz jak wygenerować kod Messengera dla strony www, to zajrzyj tutaj. Rozwiązanie działa na najnowszych windowsowych wersjach Chrome, Firefoxa, Opery i MS Edge i możesz go sam przetestować na naszej głównej stronie. W międzyczasie będziemy rozwijać kod, więc spodziewajcie się aktualizacji!

Pytania? Zadaj w komentarzu!