Strona internetowa, także blogi, to nie tylko ładny szablon, piękne zdjęcia i świetne teksty. Żeby nasza witryna była uznana za wartościową przez wyszukiwarki, musi spełniać wiele kryteriów. Pokażę Wam kilka ciekawych miejsc w sieci, które mogą pomóc w ulepszeniu Waszej strony. Poradnik jest dla amatorów mających jakieś pojęcie o tworzeniu stron.
Kiedy lata temu zetknęłam się z blogosferą po raz pierwszy, królowały animowane nagłówki, spadający śnieg oraz wszystko, co się ruszało, zmieniało i grało. Współczesne trendy w projektowaniu stron zakładają jednak duży minimalizm - witryna musi się ładować szybko i być przystępna dla użytkownika. Większość dostępnych templatów, jakie testowałam było przeładowane skryptami i widgetami. Nieodpowiednio wykorzystane oraz bardzo uniwersalne mogą mocno opóźnić ładowanie się strony.
Wbrew pozorom podstawowa optymalizacja witryny nie wymaga specjalistycznej wiedzy. Mimo że skończyłam studia informatyczne, większość narzędzi poznałam dopiero w praktyce, tworząc strony. Tutaj dam Wam kilka wskazówek, które może wykorzystać każdy z Was.
Zmiany do wprowadzenia na blogu
Przyspieszanie witryny dobrze zacząć od zanalizowania swojej strony. Część z poniższych wskazówek dotyczy bloggera, ale większość z nich jest uniwersalna. Warto się przyjrzeć zwłaszcza kilku elementom
- WIDGETY Każdy dodatek jest napisany w taki sposób, żeby zakładał wiele różnych opcji. Zwykle macie możliwość wybrania ustawień danego elementu. Patrząc w kod html zobaczymy mnóstwo warunków typu: jeśli administrator nada tytuł, to go wyświetl, ale jeśli nie nada to pokaż komunikat, jeśli zaznaczy pierwszą opcję, zrób coś, a potem coś innego itd. Wszystko to wpływa na opóźnienie wczytywania strony. Zobaczcie czy na prawdę potrzebujecie aż tylu dodatków na swojej stronie?
- GRAFIKI Zdjęcia w nagłówku, ikony, logo - to wszystko grafiki, które muszą się wczytać, żeby strona była gotowa. Czy zwracacie uwagę na rozmiar i rozdzielczość wrzucanych zdjęć? Obrazek, który waży 6MB będzie się ładował stosunkowo długo nawet przy najlepszym łączu internetowym. Jeśli nie pokazujecie profesjonalnych zdjęć na pełnym ekranie, spokojnie możecie zmniejszyć wymiary do ok. 1200 px (a zwykle nawet mniej). Taką możliwość ma większość programów do obrabiania zdjęć. Zawsze można się pobawić i zmniejszać zdjęcie sukcesywnie tak długo, aż zachowuje dobrą jakość. Jednak sama rozdzielczość to nie wszystko. Pliki graficzne mają zapisane dużo informacji dodatkowych. Możemy "odchudzić" nasze obrazki korzystając z narzędzi do optymalizacji:
- SKRYPTY Często dodajemy do bloga widget zawierający dodatkowy kod HTML. Są to zwykle rozwijane menu, strzałki przenoszące do góry strony, media społecznościowe. Część z nich jest na blogu konieczna, ale część całkowicie zbędna i może zostać łatwo zastąpiona. Skrypty bardzo opóźniają ładowanie się strony. Podstawowe zasady to dodawanie informacji o asynchronicznym ładowaniu się skryptu oraz wczytywanie najpierw głównej zawartości strony, a dopiero potem dodatków. Zainteresowanych tą tematyką zachęcam do wpisania w googlu "Java Script Async". Tutaj możecie zobaczyć o co chodzi w praktyce. Dużo skryptów można zastąpić samym CSSem (czyli stylami naszej witryny; jest to korzystne, ponieważ css nie będzie aż tak obciążał strony). Zobaczcie np. tutaj, mnóstwo gadżetów gotowych do wrzucenia na stronę.
To tylko dwa przykłady stron, z których sama korzystam. Wystarczy wczytać grafikę, odczekać chwilę i pobrać "wypluty" plik. Często można uzyskać plik zajmujący nawet 80% mniej miejsca.
Inne przydatne narzędzia
Skąd wiedzieć czy nasza strona ładuje się szybko, czy wolno? Polecam Wam tę stronę. Wystarczy wpisać adres witryny i możemy poznać całkiem interesującą analizę wczytywanych treści. Rozwijając okienko "Settings" możemy przetestować szybkość wczytywania w różnych częściach świata.
Kolejnym bardzo przydatnym narzędziem jest Google Developers. Analizując w ten sposób naszą stronę zobaczymy nie tylko błędy, ale również podpowiedzi ich naprawienia. Część z nich wymaga bardzo specjalistycznej wiedzy, ale część to drobnostki typu za duże grafiki, za małe przyciski. Są to rzeczy łatwe do poprawienia, a wpływające na pozycjonowanie strony.
Na szybkość ładowania się strony wpływa także wielkość samego pliku zawierającego kod strony. Jego optymalizacja polega głównie na usunięciu wszystkich niepotrzebnych enterów i spacji. Na szczęście tego też nie musimy robić samodzielnie. Tutaj możemy zminimalizować CSS, tutaj kod Java Script, a tutaj kod HTML (ostatniego jeszcze nie testowałam w praktyce).
Chociaż moja strona dalej jest nieskończona, zmierza w coraz lepszym kierunku. Początkowo miała być bardzo minimalistyczna z jednym akcentem kolorystycznym (widać to na wizualizacji z tabletem), ale jednak zdecydowałam się na kobiecość i pastele. Jakbyście trafili na błędy, koniecznie dajcie znać, wszystkiego nie wychwycę sama :)
Wizualizacje w większej rozdzielczości możecie zobaczyć w moim portfolio. Grafiki widoczne na plakatach pochodzą od Kasi z Piatego pokoju. Świetne są, prawda?
Zwabiłaś mnie informacją o plakatach i nie żałuję - dużo przydatnej wiedzy ty znalazłam, idę testować!
OdpowiedzUsuńDzięki!
Powodzenia :) Ale uprzedzam, że to strasznie wciąga! Tych sztuczek jest tyle, że całą serię wpisów trzeba by napisać :)
UsuńMuszę przyznać, że pięknie tu u Ciebie. Ładne gniazdko sobie uwiłaś :)
OdpowiedzUsuńdziękuję serdecznie :) Mi się już nie podoba i myślę nad zmianami, ale to akurat głównie ze względu na optymalizację. Strona dalej jest nieskończona, doba jest za krótka! U Ciebie jest wspaniale <3 i do tego widzę dużo gimpa :D
UsuńZnam ten "ból". Dopiero kupiłam szablon i go dostosowałam, a już kolejne wpadają mi w oko ;) Szablon to jest mój odwieczny problem, mimo to miło mi czytać, że Ci się podoba.
UsuńBardzo ciekawy wpis, zapisuję sobie do analizy na potem, gdy już będę tworzyć lepszą wersję swojego bloga.
OdpowiedzUsuńPS. Wiesz że masz szablon nieresponsywny? Przynajmniej do mojego laptopika się nie dostosował i 2/3 paska bocznego są poza ekranem.
Dzięki, mam nadzieję, że się przyda w praktyce. Mój szablon jeszcze leży i kwiczy ;-) Ciągle brakuje czasu, na razie zrobiłam wersję podstawową, a muszę przepisać cały kod... i koniecznie zrobić RWD :) Warto w sumie zobaczyć też "w praniu" o czym się będzie pisało i jak blog się rozwinie i dopiero wtedy dostosować kategorie i podstrony.
UsuńMój blog właśnie powstaje, dlatego ogromnie przyda mi się Twój wpis! Dzięki! :)
OdpowiedzUsuńPowodzenia!
UsuńFajny wpis
OdpowiedzUsuńW sumie gdy chodzi o sam fakt posiadania strony internetowej to oczywiście na dzień dzisiejszy jest ona czymś bardzo ważnym. Ja jeszcze chcę dodać, że dla mnie takie rzeczy wykonywała agencja reklamowa https://haiku.com.pl/ więc tak naprawdę wszystko działa i wygląda jak należy.
OdpowiedzUsuń