Piafka

Dobry projekt strony www

czwartek, 15 października 2015
| 8 komentarzy
Dobrze zaprojektowana strona - wizualizacja filiżanki

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 związanych z bardziej informatyczną częścią. Pokażę Wam kilka ciekawych stron, 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 bardzo 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. Projektowanie szablonu jest bardzo satysfakcjonujące, ale także czasochłonne. Wygląd tego bloga powstaje już dwa tygodnie, a niestety jeszcze trochę mu brakuje do końca.

wizualizacja miejsca pracy

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
  1. WIDGETY
  2. 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? 

  3. GRAFIKI
  4. 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: 

    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.

  5. SKRYPTY
  6. 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ę. 
wizualizacja miejsca pracy

Inne przydatne narzędzia 

Skąd wiedzieć czy nasza strona ładuje się szybko, czy wolno? Polecam Wam  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 poprawiające wyniki naszej 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). 



wizualizacja miejsca pracy
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?









P.S. Mój balkon można zobaczyć w listopadowym Moim Mieszkaniu! Świetny konkurs, w którym startowały kobiety z przepięknymi tarasami, werandami i balkonami. Tym bardziej główna nagroda była zaskoczeniem, ale bardzo miłym :) 
O balkonie na pewno będziecie tu mogli jeszcze poczytać. 


Follow my blog with Bloglovin
8 komentarzy
  1. Zwabiłaś mnie informacją o plakatach i nie żałuję - dużo przydatnej wiedzy ty znalazłam, idę testować!
    Dzięki!

    OdpowiedzUsuń
    Odpowiedzi
    1. Powodzenia :) Ale uprzedzam, że to strasznie wciąga! Tych sztuczek jest tyle, że całą serię wpisów trzeba by napisać :)

      Usuń
  2. Muszę przyznać, że pięknie tu u Ciebie. Ładne gniazdko sobie uwiłaś :)

    OdpowiedzUsuń
    Odpowiedzi
    1. 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ń
    2. 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ń
  3. Bardzo ciekawy wpis, zapisuję sobie do analizy na potem, gdy już będę tworzyć lepszą wersję swojego bloga.
    PS. Wiesz że masz szablon nieresponsywny? Przynajmniej do mojego laptopika się nie dostosował i 2/3 paska bocznego są poza ekranem.

    OdpowiedzUsuń
    Odpowiedzi
    1. 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ń
  4. Mój blog właśnie powstaje, dlatego ogromnie przyda mi się Twój wpis! Dzięki! :)

    OdpowiedzUsuń