Komentarze Disqus w Hugo: Przewodnik po Integracji i Analiza Wydajności
Spis treści
Wstęp#
Disqus to prawdopodobnie pierwsze rozwiązanie, które przychodzi nam do głowy, gdy myślimy o komentarzach na stronach statycznych. Jest z nami od 2007 roku, obsługuje miliony witryn i zdejmuje z nas ciężar tworzenia własnego backendu.
Postanowiłem sprawdzić, jak wygląda jego integracja z Hugo w 2026 roku, ale przede wszystkim, jaki jest rzeczywisty koszt tej wygody. Przeprowadziłem testy wydajnościowe na tym blogu i wyniki mogą was zaskoczyć.
Czym właściwie jest Disqus?#
W skrócie: to „komentarze jako usługa”. My dostarczamy statyczny frontend, a Disqus bierze na siebie całą brudną robotę: hosting bazy danych, walkę ze spamem, moderację i logowanie użytkowników (Google, Facebook, Twitter).
Dostajemy gotowy kombajn z zagnieżdżonymi odpowiedziami, reakcjami i powiadomieniami mailowymi. Brzmi świetnie, prawda? Zobaczmy jednak, jak to wygląda pod maską.
Konfiguracja w Hugo – Krok po kroku#
Wdrożenie jest trywialne i to niewątpliwie największa zaleta tego systemu. Hugo ma wbudowane wsparcie dla Disqusa, więc nie musimy pisać skomplikowanych skryptów.
1. Założenie konta#
Zacząłem od wizyty na disqus.com. Po wybraniu opcji “I want to install Disqus on my site”, utworzyłem nową instancję i nadałem jej shortname (np. klikukliku). Na start wybrałem darmowy plan Basic.
2. Konfiguracja po stronie Hugo#
W pliku konfiguracyjnym hugo.toml wystarczyło zdefiniować jedną zmienną:
disqusShortname = 'twoj-shortname'
3. Przygotowanie widoków (Partials)#
Aby zachować porządek w kodzie, utworzyłem plik layouts/partials/comments/disqus.html. To tutaj ładujemy wewnętrzny szablon Hugo:
<div id="disqus_thread"></div>
{{ template "_internal/disqus.html" . }}
Dobrą praktyką jest stworzenie „dyspozytora” komentarzy. Dzięki temu, jeśli w przyszłości zmienimy system na inny, edytujemy tylko jeden plik.
W layouts/partials/comments.html:
{{- $commentSystem := .Site.Params.commentSystem -}}
{{- if eq $commentSystem "disqus" -}}
{{ partial "comments/disqus.html" . }}
{{- end -}}
4. Wpięcie w szablon posta#
Na koniec dodałem wyświetlanie komentarzy w pliku layouts/_default/single.html. Dodałem też prosty warunek, który pozwala wyłączyć komentarze dla konkretnego artykułu z poziomu Front Matter:
{{ if not (.Params.hideComments | default false) }}
{{ partial "comments.html" . }}
{{ end }}
5. Aktywacja#
Wystarczyło ustawić parametr w hugo.toml i gotowe:
[params]
commentSystem = "disqus"
Ważna uwaga: Podczas testów lokalnych (
localhost) widget się nie załaduje. Zobaczycie komunikat o braku dostępności. Aby sprawdzić działanie, musicie wdrożyć stronę na środowisko produkcyjne.
Analiza wydajności – twarde dane#
Tutaj kończy się entuzjazm, a zaczyna analiza. Zmierzyłem wpływ Disqusa na ładowanie strony w rzeczywistych warunkach. Porównałem wersję czystą (Baseline) z wersją uzbrojoną w widget.
Baseline (bez komentarzy):
- Requesty: 11
- Waga: 311 KB
- Czas ładowania: 1.20s
Z włączonym Disqus:
- Requesty: 59 (wzrost o 436%)
- Waga: 1152 KB (wzrost o 270%)
- Czas ładowania: 8.06s (wzrost o 572%)
Co tam tyle waży?#
Przeanalizowałem, co dokładnie jest pobierane. Disqus dociąga ponad 600 KB samego JavaScriptu (główny widget, UI, biblioteki współdzielone).
Do tego dochodzi:
- 17 obrazków (emoji reakcji ładują się, nawet jak nikt z nich nie korzysta).
- 6 plików CSS.
- Zewnętrzne skrypty śledzące (m.in.
launchpad.privacymanager.io).
Widać wyraźnie, że narzut jest ogromny. Dla prostego bloga tekstowego, potrojenie wagi strony tylko dla sekcji komentarzy to bardzo wysoki koszt.
Model biznesowy – na co uważać?#
Disqus w wersji darmowej (Basic) wyświetla reklamy. Co więcej, system jest sprytny – po rejestracji włącza nam 30-dniowy trial wersji płatnej.
Pro-tip: Pamiętajcie, aby ręcznie przełączyć się na plan darmowy przed upływem okresu próbnego. W przeciwnym razie system może próbować obciążyć was kosztami.
Podsumowanie i rekomendacja#
Muszę ocenić to rozwiązanie dwojako.
Wybierz Disqus, jeśli:
- Czas to pieniądz: Chcesz uruchomić komentarze w 5 minut i zapomnieć o temacie.
- Potrzebujesz kombajnu: Zależy Ci na zaawansowanej moderacji i walce ze spamem bez Twojego udziału.
- Masz nietechnicznych odbiorców: Użytkownicy znają ten interfejs i ufają mu.
Unikaj Disqusa, jeśli:
- Wydajność jest priorytetem: Dodanie prawie 1 MB danych i 7 sekund do czasu ładowania to zabójstwo dla Core Web Vitals i doświadczenia na mobile.
- Cenisz prywatność: Nie chcesz, aby Twoi użytkownicy byli śledzeni przez zewnętrzne skrypty reklamowe.
Mój werdykt: Disqus to solidne, dojrzałe narzędzie, ale technologicznie ociężałe. Jeśli nie potrzebujesz potężnych narzędzi moderacyjnych, sugeruję spojrzeć na lżejsze alternatywy.
Decyzja należy do Was. Czy wygoda wdrożenia jest warta spowolnienia strony?