Kategoria: Web Development

  • <meta name=”theme-color”> – Mała zmiana, przyjemny efekt

    Meta tag <meta name=”theme-color”> pozwala kontrolować kolor elementów interfejsu przeglądarki (takich jak pasek adresu), szczególnie na urządzeniach mobilnych – działa w przeglądarkach opartych o Chromium, np. Google Chrome na Androidzie. Tag meta umieszczamy w sekcji head strony internetowej.

    Poniżej przykład dla koloru #202020:

    <meta name="theme-color" content="#202020" />

    Poniżej zrzut ekranu:

    Warto dodać do swoich projektów – tym bardziej, że jest to tylko jedna linia kodu. Chyba, że strona obsługuje tryb light/dark – wtedy dwie linie – można ustawić kolor per tryb za pomocą tagu media:

    <meta  name="theme-color" content="#202020" media="(prefers-color-scheme: dark)" />
    
    <meta name="theme-color" content="#cccccc" media="(prefers-color-scheme: light)" />
    Czy meta theme-color wpływa na SEO?

    Bezpośrednio nie, ale poprawia estetykę strony mobilnej, co pośrednio może wpłynąć na zaangażowanie użytkowników.

    Czy theme-color działa we wszystkich przeglądarkach?

    Nie. Najlepsze wsparcie oferują przeglądarki Chromium (Chrome, Edge, Opera), szczególnie na Androidzie.

    Czy warto używać theme-color przy trybie dark/light?

    Tak. To drobny detal, który robi bardzo dobre wrażenie i zwiększa spójność interfejsu.

  • Strony internetowe w czasach AI

    Dzisiejszy post typowo refleksyjny. W ostatnich latach ze względu na rozwój sztucznej inteligencji powstaje coraz więcej stron w pełni wygenerowanych przez narzędzia AI. Często są do siebie bardzo podobne. Czy to źle? Moim zdaniem nie. Przed erą AI popularne były przecież zakupy gotowych szablonów. Te najpopularniejsze były sprzedawane w tysiącach licencji – więc finalnie wiele stron wyglądało dokładnie tak samo. Wraz z rozwojem przedsiębiorstwa potrzebne były zmiany – dedykowany branding, inne (wygodniejsze) ułożenie contentu etc. Co wysyp stron „klepanych” przez AI oznacza dla Web Developera? Może paradoksalnie – więcej potencjalnej pracy.

    Często zauważam wygenerowane strony, które są bardzo słabej jakości. Napchana jest masa ciężkich animacji, zbyt pstrokate wyróżniki wymieszane z generycznymi grafikami. Takich twórców będzie coraz więcej – bo wykonanie czegoś takiego to kwestia średniej jakości prompta do AI. Czasami widać też strony lepsze, ładniejsze oraz wygodniejsze, które też mają vibe w pełni wygenerowanej strony – ale wygląda to tak jakby czuwał nad tym ktoś kto się zna na temacie i chociaż zwracał uwagę narzędziom, że X tak nie powinno wyglądać/działać.

    Dlaczego zatem więcej pracy? Wykonanie generycznego landingu jest banalne – ale jego modyfikacja skrojona pod wymagania już niekoniecznie. Trzeba pamiętać, że każda firma chce się wyróżniać i ma dedykowaną wizję. Czasami wykonanie z pozoru prostej zmiany bez znajomości kodu „kopiąc się” z AI będzie bardzo czasochłonna + efekt finalny może być niezadowalający. Biorąc pod uwagę skalowalność (np. przy sklepach internetowych) bezrefleksyjne pakowanie wszystkiego co podsunie AI może być opłakane w skutkach – wolna strona, poważne luki bezpieczeństwa etc. W skrajnych przypadkach błąd krytyczny i brak backupu. Przed erą AI przecież też można było skorzystać z gotowców i stworzyć prosty landing w parę minut podmieniając po prostu treść. Kluczowy jednak był i jest rozwój, modyfikacje i utrzymanie.

    Wielu właścicieli stron dojdzie do momentu gdzie stwierdzi, że woli oddelegować modyfikowanie strony doświadczonemu developerowi. Trzeba wziąć pod uwagę, że strona to nie tylko strona. Zawsze warto mieć chociażby repozytorium gita, przy większych projektach jest to must have.

    Próg wejścia do Web Developmentu i ogólnie szeroko pojętego programowania przy pomocy narzędzi AI bardzo się obniżył. Ale nadal trzeba chcieć zrozumieć i się uczyć – aktualnie zdecydowanie więcej niż wcześniej.

    Traktuję AI jako świetnego pomocnika. To dobre narzędzia, które mogą znacznie ułatwić czy przyspieszyć pracę. Osobiście korzystam na co dzień. Jak każde inne narzędzie wymaga jednak pojęcia osoby korzystającej.

    Ostatnio natrafiłem na stronę, która była wolna. Bardzo wolna. W sumie to mało powiedziane – ciężko znaleźć odpowiednie określenie. Był to onepage reklamujący usługi freelancera. Byłem ciekaw co na tak prostej stronie może aż tak drenować przeglądarkę i jej zasoby. W kodzie znalazłem animację, która polegała na podmianie relatywnie dużych plików svg (w środku był jpg w base64) co kilka milisekund. Sekcja była tak mała, że nawet nie zwróciłem na niej uwagi. Obciążenie, które generowała było w sumie bez sensu. W kodzie były przesłanki, że całość została wygenerowana – np. typowe dla AI nadmiarowe komentarze.

    A Ty jak widzisz tę kwestię? Zapraszam do dyskusji w komentarzach.

  • PageSpeed – wskaźnik CLS

    Jednym z głównym wskaźników testu prędkości strony internetowej od Google (PageSpeed Insights) jest CLS. Rozwinięcie skrótu to Cumulative Layout Shift.

    Nie zagłębiając się w techniczne nazewnictwo wskaźnik określa stabilność tego co widzi użytkownik. Jeśli elementy „skaczą”/przesuwają się po inicjalizacji – wskaźnik będzie miał wysoką wartość.

    Stabilność viewportu jest bardzo ważna, wskaźnika CLS nie należy pomijać. Ma sporą wartość punktową w wyniku a często jest relatywnie najłatwiejszy do poprawienia. Nie patrząc tylko na wynik – wysoki CLS może znacząco obniżyć UX strony internetowej.

    Dlaczego stabilność viewportu jest ważna? Spora część użytkowników działa bardzo szybko. Strona nie zdąży się jeszcze się w pełni wczytać a chcą już wykonywać jakieś akcje (np. kliknięcie boxa z promocją). Użytkownik najeżdża kursorem na element, klika – ale w tym momencie elementy zaczęły się przemieszczać. Finalnie nie trafił tam gdzie powinien.

    Co najczęściej powoduje przesunięcia? Elementy, których zachowanie jest zmieniane za pomocą JavaScript. Skrypty potrzebują chwili żeby się wykonać, bazowy kod HTML i CSS powinien być „przygotowany” na doładowanie skryptu. Idealnym przykładem mogą być slidery. Załóżmy, że w sliderze są 3 zdjęcia – skrypt po inicjalizacji ukrywa wszystkie oprócz pierwszego, przerabia strukturę, dodaje nawigację (strzałki, kropki). Po stronie HTMLa i CSSa te pozostałe elementy powinny być ukryte bazowo. Jeśli nie będą – wstępnie na krótką chwilę użytkownik zobaczy 3 zdjęcia, skrypt się wykona, dwa nadmiarowe znikną. Elementy się przesunęły, wskaźnik CLS podskoczył również.

    Jak temu zaradzić? Sprawdź, które elementy powodują przesunięcie. Można to wyłapać odświeżając stronę lub skorzystać z wtyczek do przeglądarek (nie polecę konkretnej bo mi zazwyczaj najwygodniej zlokalizować odświeżając w DevToolsach). Następnie określ czemu przesunięcie następuje – może np. inne klasy po doładowaniu JS’a? Często wystarczy ustawić minimalną wysokość elementu (min-height).

    Masz pytania? Napisz komentarz poniżej.

    Czy CLS różni się między desktopem a mobile?

    Tak. CLS często jest wyższy na urządzeniach mobilnych – szczególnie ze względu na mniejszy viewport.

    Czy CLS wpływa bezpośrednio na SEO?

    CLS jest jednym z Core Web Vitals, które według specjalistów są sygnałem rankingowym Google. Opinie na temat tego czy prędkość strony/wynik testów ma bezpośredni/znaczący wpływ na pozycje w wyszukiwarce są bardzo mieszane – niemniej jednak ważniejszy jest wpływ pośredni. Wysoki CLS znacznie pogarsza UX co może skutkować większym współczynnikiem odrzuceń.