Informatyka (obok medycyny) jest jedną z najszybciej rozwijających się dziedzin nauki. Co było nowoczesne pięć lat temu, dziś może okazać się przestarzałe, niedostosowane do obecnie panujących standardów lub co gorsze przepisów. Jeśli posiadasz własną stronę internetową, to koniecznie przeczytaj poniższy artykuł i sprawdź, czy wszystkie poniższe wytyczne są wdrożone na Twojej stronie internetowej. Jeśli tak nie jest, to czym prędzej nanieś poprawki lub zleć to komuś.
I. Zabezpieczenie strony certyfikatem SSL
Bezpieczeństwo danych przesyłanych między użytkownikiem a serwerem jest jednym z kluczowych aspektów tworzenia stron internetowych.
Kwestia ta jest na tyle istotna, że została uregulowana prawnie przez Parlament Europejski. W myśl obowiązujących przepisów wszystkie strony internetowe powinny być zabezpieczone certyfikatem SSL.
Certyfikat SSL (Secure Sockets Layer) zapewnia szyfrowanie danych przesyłanych za pomocą strony www, co chroni je przed przechwyceniem przez nieuprawnione osoby. SSL działa poprzez utworzenie bezpiecznego połączenia między przeglądarką a serwerem, co jest szczególnie ważne w kontekście przesyłania wrażliwych danych, takich jak loginy, hasła czy informacje finansowe.
Spis treści:
Korzyści z posiadania certyfikatu SSL
Adres URL z przedrostkiem „https” oraz symbol kłódki w przeglądarce budzą większe zaufanie użytkowników. Strony bez tego zabezpieczenia są oznaczane przez przeglądarki jako „niezabezpieczone”, co może odstraszać potencjalnych klientów.
Google preferuje strony zabezpieczone SSL, co może poprawić ich pozycję w wynikach wyszukiwania. Od 2014 roku SSL stał się jednym z czynników rankingowych w algorytmach Google.
SSL chroni wrażliwe informacje, takie jak dane logowania czy dane karty kredytowej, przed kradzieżą. Szyfrowanie uniemożliwia odczytanie tych danych przez osoby trzecie podczas ich przesyłania między użytkownikiem a serwerem.
Implementacja SSL
Jeśli wybierzesz odpowiedniego dostawcę usług hostingowych, to wdrożenie certyfikatu SSL będzie znacznie prostsze, niż myślisz. Wiele firm hostingowych oferuje darmowe certyfikaty SSL od Let’s Encrypt jako część swoich usług. Wystarczy wymusić jego stosowanie poprzez w pliku .htaccess lub w panelu administracyjnym strony internetowej (o ile korzystasz z jakiegoś systemu zarządzania treścią.
Oprócz darmowych certyfikatów SSL są jeszcze płatne (np. Rapid SSL), które zapewniają nieco wyższy poziom wsparcia, ale jeśli przy pomocy strony nie przetwarzasz jakichś bardziej wrażliwych danych, to nie jest Ci on potrzebny.
Z własnego doświadczenia podpowiem Ci, że nie wszystkie firmy hostingowe zapewniają darmowe certyfikaty, więc nim wybierzesz usługodawcę, to koniecznie to sprawdź.
Nie bagatelizuj tej kwestii, gdyż użycie certyfikatu SSL ma również wpływ na pozycję Twojej strony w rankingu wyszukiwania Google.
II. Stosowanie zdjęć w formacie WebP
Optymalizacja obrazów jest kluczowa dla szybkiego ładowania strony internetowej. Format WebP, opracowany przez Google, oferuje wysoką jakość przy znacznie mniejszym rozmiarze pliku w porównaniu do tradycyjnych formatów, takich jak JPEG czy PNG.
WebP nie jest jedynym formatem, który skutecznie optymalizuje pliki graficzne, ale bez wątpienia jest najpopularniejszy i dzięki temu masz pewność, że zdjęcia użyte na Twojej stronie internetowej wyświetlą się poprawnie na wszystkich przeglądarkach (o ile są one zaktualizowane do najnowszych wersji).
Format ten jest też obsługiwany przez wszystkie płatne programy do edycji plików graficznych (przynajmniej ja nie słyszałem o płatnym programie, który tego formatu nie obsługuje) oraz wiele darmowych. Z darmowych programów graficznych z czystym sumieniem mogę Ci polecić GIMP.
Zalety zdjęć w formacie WebP
Dzięki zaawansowanym algorytmom kompresji, obrazy w formacie WebP są mniejsze, co przyspiesza ładowanie strony. Mniejsze pliki obrazów oznaczają krótszy czas ładowania strony, co przekłada się na lepsze doświadczenie użytkownika.
WebP utrzymuje wysoką jakość obrazu przy znacznie mniejszym rozmiarze pliku. Użytkownicy nie muszą wybierać między jakością a wydajnością, ponieważ WebP oferuje oba te aspekty.
Większość narzędzi do tworzenia stron internetowych i CMS-ów bez problemu obsługuje tenże format.
Konwersja obrazów na WebP
Jeśli nie dysponujesz programem do edycji grafiki, który obsługuje format WebP, to możesz skorzystać z darmowych narzędzi online, które szybko i sprawnie przekonwertują Twoje pliki w formacie JPG lub PNG. Najpopularniejsze z nich, to Squoosh.app oraz konwertery dostępne na stronach Google.
Jeśli masz stronę internetową, która zbudowana jest na bazie jakiegoś CMS-a i w dodatku jest ona mocno rozbudowana, to edycja i podmiana każdego użytego do jej wykonania zdjęcia, może okazać się bardzo czasochłonna. W takim przypadku proponuję Ci zainstalowania odpowiedniej wtyczki, która automatycznie przekonwertuje wszystkie zdjęcia na Twojej stronie. Jeśli masz stronę zbudowaną na bazie CMS Joomla, to proponuję Ci dodatek W7 WebP, a jeśli masz WordPressa, to pobierz sobie EWWW Image Optimizer.
III. Optymalizacja szybkości ładowania strony zgodnie z wytycznymi PageSpeed Insights
Szybkość ładowania strony jest kluczowym czynnikiem wpływającym na doświadczenie użytkownika i SEO. Google PageSpeed Insights to narzędzie, które ocenia wydajność strony i wyświetla skrupulatnie przygotowany raport, w którym są konkretne wskazówki dotyczące jej poprawy.
Podobnie jak zastosowanie certyfikatu SSL czy zastosowanie formatu WebP, które opisałem powyżej, optymalizacja szybkości wczytywania strony www ma duży wpływ na pozycję strony w rankingu wyszukiwania.
Działania optymalizacyjne:
- Minifikacja CSS i JavaScript: Usunięcie zbędnych znaków z kodu, takich jak spacje i komentarze, co zmniejsza rozmiar plików. Minifikacja poprawia czas ładowania, ponieważ przeglądarka potrzebuje mniej czasu na pobranie i przetworzenie mniejszych plików.
- Lazy loading obrazów: Opóźnienie ładowania obrazów, które nie są widoczne na ekranie użytkownika, aż do momentu ich przewinięcia. To znacząco zmniejsza czas początkowego ładowania strony i oszczędza zasoby sieciowe.
- Wykorzystanie cache przeglądarki: Konfiguracja nagłówków HTTP, aby przeglądarki mogły przechowywać kopie stron lokalnie i ładować je szybciej przy kolejnych odwiedzinach. Cache zmniejsza obciążenie serwera i przyspiesza dostęp do często odwiedzanych stron.
- Zmniejszenie liczby żądań HTTP: Łączenie plików CSS i JavaScript w jeden plik oraz ograniczenie liczby zewnętrznych zasobów. Mniej żądań oznacza krótszy czas ładowania strony, ponieważ przeglądarka musi pobrać mniej zasobów.
Inne wskazówki PageSpeed Insights:
- Optymalizacja obrazów: Kompresja i zmiana rozmiaru obrazów, aby były one jak najmniejsze bez utraty jakości. Chodzi tu nie tylko o zastosowanie lekkich formatów plików graficznych, ale także o odpowiednie ich przeskalowanie. Załóżmy, że na stronie internetowej znajduje się obraz o szerokości 2000px, który fajnie wygląda na komputerze.
Jeśli otworzysz stronę na smartfonie, to obraz ten oczywiście zostanie odpowiednio przeskalowany i wyświetli się poprawnie, co nie zmienia faktu, że odbiorca zobaczy znacznie mniejsze plik, a smartfon i tak będzie musiał wczytać duży. To nie jest dobre rozwiązanie i PageSpeed Insight odejmuje za to punkty. Aby pozbyć się tego problemu, musisz zrobić kilka wersji danego obrazka i przy pomocy odpowiednich klas CSS ustawić odpowiednio ich wczytywanie. Jeśli korzystasz z jakiegoś CMS-a, to z pomocą przychodzi ci szereg różnego rodzaju wtyczek, które automatycznie skalują pliki graficzne (użyte zarówno w treści, jak i w tle strony internetowej) do rozmiarów odpowiednich dla urządzenia, przy pomocy którego użytkownik przegląda Twoją stronę. - Wykorzystanie CDN (Content Delivery Network): CDN przechowuje kopie strony na wielu serwerach na całym świecie, co skraca czas ładowania dla użytkowników z różnych lokalizacji.
- Zmniejszenie czasu odpowiedzi serwera: Poprawa wydajności serwera, na przykład poprzez optymalizację bazy danych lub wykorzystanie szybszych technologii serwerowych.
IV. Konfiguracja strony z Google Search Console
Google Search Console (dawniej Google Webmaster Tools) to darmowe narzędzie oferowane przez Google, które pomaga monitorować i utrzymywać widoczność strony w wynikach wyszukiwania.
Aby dodać stronę do konta w Google Search Console, musisz udowodnić, że jesteś właścicielem strony. Możesz to zrobić na dwa sposoby. Zalecanym sposobem jest przesłanie specjalnego pliku, napisanego w języku HTML do głównego katalogu z plikami strony. Możesz też wkleić specjalnie wygenerowany w tym celu Meta Tag w sekcji HEAD pliku głównego.
Konfiguracja strony z Google Search Console jest niezbędna, jeśli chcesz otrzymywać bardzo cenne informacje dotyczące pozycji Twojej strony w wynikach wyszukiwania Google.
Główne funkcje Google Search Console:
- Monitorowanie ruchu i wydajności: Google Search Console dostarcza dane na temat tego, jakie zapytania przynoszą ruch na stronę, które strony mają najwięcej wyświetleń i kliknięć oraz jakie są średnie pozycje w wynikach wyszukiwania.
- Diagnozowanie problemów indeksowania: Narzędzie informuje o problemach z indeksowaniem strony przez Googleboty, takich jak niedziałające linki (404), problemy z dostępnością i inne.
- Przesyłanie map witryny: Google Search Console umożliwia przesyłanie mapy witryny XML, co pomaga Google w indeksowaniu wszystkich stron na witrynie. Mapa witryny ułatwia botom wyszukiwarek znajdowanie i indeksowanie zawartości strony.
- Sprawdzanie i naprawianie błędów: Narzędzie informuje o błędach, takich jak problemy z mobilnością strony, niedziałające linki i inne, co pozwala na szybkie ich naprawienie.
V. Konfiguracja strony z Google Analytics
Google Analytics to potężne narzędzie do analizy ruchu na stronie internetowej. Pozwala na zbieranie danych o odwiedzających, ich zachowaniu oraz skuteczności różnych działań marketingowych.
Kluczowe funkcje Google Analytics:
- Śledzenie ruchu: Google Analytics dostarcza szczegółowych informacji o liczbie odwiedzin, unikalnych użytkownikach, źródłach ruchu (np. organiczne, z płatnych reklam, z mediów społecznościowych) i wielu innych.
- Analiza zachowań: Narzędzie umożliwia analizę tego, jak użytkownicy poruszają się po stronie, które strony odwiedzają najczęściej i gdzie tracą zainteresowanie. Te dane pomagają zrozumieć, które części strony są najbardziej angażujące, a które wymagają poprawy.
- Segmentacja użytkowników: Możliwość tworzenia segmentów użytkowników na podstawie różnych kryteriów, takich jak demografia, zachowania, źródła ruchu czy technologie (np. urządzenia mobilne vs. stacjonarne). Segmentacja pozwala na bardziej szczegółową analizę i personalizację działań marketingowych.
- Śledzenie konwersji: Google Analytics umożliwia śledzenie konwersji, czyli określonych działań wykonywanych przez użytkowników, takich jak zakupy, wypełnienie formularzy czy zapisanie się do newslettera. Dzięki temu można mierzyć efektywność kampanii marketingowych i analizować, które działania przynoszą najwięcej konwersji.
Jak skonfigurować Google Analytics:
Aby założyć konto, zaloguj się do Google Analytics i załóż nowe konto, podając jego nazwę, nazwę witryny oraz jej adres URL.
Google Analytics wygeneruje dla Twojej witryny unikalny kod śledzenia, który należy dodać do każdej zakładki. Kod ten można dodać ręcznie do kodu HTML strony lub skorzystać z gotowych wtyczek, jeśli używasz systemu zarządzania treścią (CMS).
Niezwykle istotną kwestią jest konfiguracja celów i konwersji. W przypadku posiadania sklepu internetowego ważne będą dla Ciebie zupełnie inne dane niż w przypadku zwykłej strony informacyjnej. W sekcji „Administracja” można skonfigurować cele, które chcesz śledzić, takie jak wypełnienie formularza kontaktowego, dokonanie zakupu lub inne działania istotne dla Twojej witryny.
Aby uzyskać jeszcze bardziej szczegółowe dane, możesz połączyć Google Analytics z innymi narzędziami Google, takimi jak Google Ads czy Google Search Console.
VI. Wykorzystania Systemów Zarządzania Treścią (CMS)
CMS-y ułatwiają tworzenie, edytowanie i zarządzanie treściami na stronie internetowej osobom, które nie mają zielonego pojęcia o zasadach kodowania. Najpopularniejsze CMS to WordPress, Joomla i Drupal.
Zalety Wykorzystania CMS:
Systemy zarządzania treścią mają intuicyjny interfejs, który pozwala na szybkie tworzenie i edytowanie treści. Nawet osoby bez doświadczenia w programowaniu mogą łatwo zarządzać stroną internetową, dodając nowe posty, zdjęcia czy strony.
Nie bez znaczenia jest też duża możliwość rozszerzenia funkcjonalności strony za pomocą wtyczek i modułów. CMS-y oferują tysiące darmowych i płatnych wtyczek, które dodają różnorodne funkcje, od formularzy kontaktowych po kompleksowe sklepy internetowe.
Wiele CMS-ów oferuje wbudowane narzędzia do optymalizacji SEO, takie jak zarządzanie meta tagami, mapami witryn, przekierowaniami 301 i integracją z narzędziami analitycznymi. Wtyczki takie jak Yoast SEO dla WordPressa pomagają w optymalizacji treści pod kątem wyszukiwarek.
Systemy zarządzania treścią są też regularnie aktualizowane, co zapewnia bezpieczeństwo i wprowadza nowe funkcje. Aktualizacje obejmują poprawki błędów, ulepszenia wydajności oraz nowe funkcjonalności, co pozwala na utrzymanie strony na najwyższym poziomie.
Najpopularniejsze systemy zarządzania treścią to:
- WordPress: Większość firm wykonujących strony internetowe korzysta z WordPressa, ale mi on jakoś nie podchodzi. W sumie spośród wszystkich CMS-ów jest on najprostszy w obsłudze, ale moim zdaniem jest znakomity do wykonania bloga, a nie do formowej strony informacyjnej.
- Joomla: Mój ulubiony CMS. To właśnie na podstawie Joomli wykonuję strony dla moich klientów. Z pomocą Joomli można zbudować zarówno prostą stronę informacyjną, jak i sklep internetowy. Wystarczy tylko pobrać i zainstalować odpowiednie komponenty.
- Drupal: Moim zdaniem najmniej intuicyjny i najtrudniejszy w opanowaniu system zarządzania treścią. Najczęściej jest on wykorzystywany do wykonania różnego rodzaju portali internetowych.
Mam nadzieję, że powyższy artykuł dostarczył Ci przydatnych informacji, które pomogą w rozwoju Twojej obecnej lub przyszłej strony internetowej. Jeśli jeszcze nie masz własnej witryny, to powyższe informacje bardzo Ci się przydadzą w rozmowie z firmą zajmującą się projektowaniem stron internetowych.
Podczas rozmowy porusz opisane tu tematy, a sprawisz, że projektant stron, z którym będziesz rozmawiać, nabierze przekonania, że znasz się na rzeczy i z pewnością mocniej się przyłoży do pracy.
Opracował i napisał TS-PROJEKT Tomasz Suwała – tworzenie stron internetowych.
