4 triki, aby ulepszyć swoją stronę internetową bez naginania budżetu

4 triki, aby ulepszyć swoją stronę internetową bez naginania budżetu

Posiadanie funkcjonalnej, użytecznej i superszybkiej strony internetowej nie musi wcale kosztować całego naszego majątku.

Jeśli zajmujesz się projektowaniem stron www, możesz użyć kilku fragmentów kodu lub kilku drobnych poprawek, aby zapewnić znacznie szybsze i bardziej atrakcyjne strony www.

Bez konieczności wydawania tysięcy złotych i bez konieczności zmiany podstawowej infrastruktury Twojej witryny. Oto cztery proste triki, które mogą dziś ulepszyć Twoją witrynę:

1. Użyj HTML5 DOM Storage (zamiast plików cookie), aby zapewnić szybszą witrynę 

W zależności od tego, jak duża jest  strona internetowa, jej ładowanie to pobieranie w jednym momencie sporej ilości danych i przepustowości, gdy korzystasz tylko z plików cookie. Kiedy strona jest ładowana wielokrotnie dla wielu użytkowników, w zależności od serwera, na którym jest hostowana, skutkiem może być wolniejsze jej działanie (ze względu na większe obciążenie dostępnych zasobów serwera), a docelowo zwiększone koszty hostingu.

Często dzieje się tak ze względu na sposób wykorzystywania plików cookie: pliki cookie są zwykle potrzebne tylko wtedy, gdy istnieje potrzeba komunikacji klient-serwer między przeglądarką użytkownika a serwerem.

Jeśli przeglądarka użytkownika nie musi wchodzić w interakcję z serwerem przed dokonaniem poszczególnych działań, należy rozważyć użycie pamięci DOM zamiast plików cookie.

Pamięć DOM może przybierać następujące formy:

sessionStorage, w którym przechowywane są dane w przeglądarce użytkownika dla bieżącej sesji
localStorage, w którym dane są przechowywane w przeglądarce użytkownika bez daty ważności,

Generalnie powinieneś skupić się na localStorage. Dzięki temu dane są przechowywane w przeglądarce użytkownika i nie zostaną usunięte, nawet jeśli zamknie on bieżącą sesję przeglądania. Zmniejszy to liczbę żądań połączenia z serwerem i sprawi, że Twoja witryna będzie znacznie szybsza dla użytkownika, co jak dowodzą badania ma spory wpływ na współczynnik odrzuceń.

Jak to działa? Zakładając, że chcesz przechowywać wartość „name” w przeglądarce użytkownika, na przykład otrzymasz wartość:

// Store
localStorage.name = „Imię Nazwisko”;

Aby pobrać wartość:

// Pobierz
dokument.getElementById („wynik”). InnerHTML = localStorage.name;

Aby usunąć wartość:

localStorage.removeItem („nazwisko”);

A jeśli chcesz sprawdzić, czy dostępna jest pamięć localStorage możesz użyć :

function obsługuje_html5_storage () {
try {
return 'localStorage’ w oknie && window [’localStorage’]! == null;
} catch (e) {
return false;
}
}

2. Osiągnij lepszą stylizację obrazu, używając elementu <Picture>

Żyjemy w świecie, który w dużym stopniu działa na obrazach. Badania pokazują, że nasze mózgi przetwarzają obrazy znacznie szybciej niż tekst – możliwość efektywnego manipulowania obrazami jest jedną z kluczowych zalet, jakie możesz stosować jako projektant stron internetowych. Takie działanie wykracza poza wyszukanie najlepszej aplikacji do edycji zdjęć .

Możliwość odpowiedniego wystylizowania obrazów to spewnością wartość dodana w projektowaniu stron internetowych z kilku kluczowych powodów:

  • To znacznie przyspiesza proces tworzenia stron internetowych, ponieważ możesz kontrolować, kiedy i jak obrazy powinny się ładować.
  • Daje dużą elastyczność, jeśli chodzi o to, który obraz / wersję projektu użytkownicy powinni zobaczyć w zależności od ich urządzenia.
  • Umożliwia obsługę różnych obrazów / formatów graficznych dla różnych typów przeglądarek.
  • Pozwala zaoszczędzić pieniądze, które w innym przypadku zostałyby wydane na tworzenie różnych wersji projektu z różnymi elementami obrazu.

Jak więc chcesz to osiągnąć? Dzięki efektywnemu wykorzystaniu znacznika HTML <picture>.

Oto przykładowy kod:

<picture>
<source media = ”(min-width: 600px)” srcset = ”img001.jpg”>
<source media = ”(min-width: 250px)” srcset = ”img123.jpg”>
<img src = ” img234.jpg ”alt =” Header ”style =” width: auto; ”>
</picture>

W istocie powyższy kod obejmuje trzy obrazy; oryginalny plik „img234.jpg”, który zostanie wyświetlony. Jednak pod pewnymi warunkami mogą być wyświetlane inne obrazy. Na przykład kod mówi, że „img001.jpg” powinien być obsługiwany dla urządzeń o minimalnej szerokości 600 pikseli, a „img123.jpg” dla urządzeń o minimalnej szerokości 250 pikseli. Możesz dodać więcej linii kodu, aby określić więcej możliwości.

Niektóre podelementy i atrybuty, których można użyć w tym tagu, obejmują:

  • Element   podrzędny <source> służący do określania zasobów multimedialnych.
  • <Img>  podelement zdefiniowaćnia obrazu.
  • Srcset atrybut, który jest używany do określenia różnych obrazów, które mogą być ładowane w zależności od wielkości ekranu; używasz tego, gdy masz do czynienia z zestawem obrazów, a nie tylko jednym obrazem.

3. Włącz kompresję GZIP przez .htaccess, aby zwiększyć szybkość witryny

Bez względu na to, jak dobrze zaprojektowana jest strona internetowa, cały efekt może zepsuć niska szybkość jej ładowania dla użytkowników.

Dlatego ważne jest, aby włączyć odpowiednią kompresję, co pozwoli zminimalizować liczbę plików, które trzeba załadować, a co za tym idzie, przyspieszyć działanie witryny. Najlepszym sposobem na to jest kompresja GZIP.

Możesz włączyć kompresję GZIP, dodając następujący kod do pliku .htaccess serwera WWW:

<IfModule mod_gzip.c>
mod_gzip_on Tak
mod_gzip_dechunk Tak

mod_gzip_item_include plik (html? | txt | css | js | php | pl). $
obsługi mod_gzip_item_include ^ cgi-script $
mod_gzip_item_include mim ^ tekst /.*

mod_gzip_item_include mim ^ application / x-javascript . *
mod_gzip_item_exclude mime ^ image /.*
mod_gzip_item_exclude rspheader ^ Content-Encoding:. * gzip. *
</ifModule>

Jeśli twój serwer WWW nie ma .htaccess, istnieją również instruncje dla  NGINX ,  Apache i  Litespeed .

4. Połącz czcionki, aby uatrakcyjnić swój projekt

Powszechnie uważa się, że typografia jest najważniejszą częścią projektu, więc używane czcionki w dużym stopniu wpłyną na postrzeganie projektu.

Bardzo dużo napisano już o wyborze czcionek , więc nie będę tego ponownie omawiał w tym artykule. Jednym z trików, które chciałbym polecić, jest jednak połączenie wielu czcionek.

Możesz połączyć dwie, trzy lub więcej czcionek, aby projekt witryny wyglądał o wiele bardziej atrakcyjnie. Czcionki można łączyć w logo, układ lub sam projekt strony internetowej, łączenie czcionek może znacznie zmienić wygląd Twojej witryny.

Istnieje tak naprawdę kilka zasad, których możesz się trzymać, jeśli chcesz uzyskać wyniki z połączenia fontów. Obejmują one:

  • Wybieranie czcionek z tej samej nadrodziny. Jest to szczególnie ważne, jeśli jesteś początkującym projektantem lub nie wiesz, jak sparować czcionki.
  • Jeśli nie masz pewności, od czego zacząć, możesz zacząć od sparowania czcionki szeryfowej z czcionką bezszeryfową i zobacz, jak to wygląda.
  • Podczas łączenia czcionek weź pod uwagę przepływ treści w projekcie sieci Web – ponieważ czcionki wpływają na czytelność treści, chcesz mieć pewność, że używane czcionki pasują do informacji, która zostanie wyświetlona.
5 1 głos
Ocena artykułu
Subskrybuj
Notify of
guest
0 komentarzy
Inline Feedbacks
View all comments

Jak zaprojektować stronę internetową MVP?

Nauka projektowania strony internetowej lub witryny MVP może być jedną z najlepszych rzeczy, jakie możesz zrobić jako twórca witryn w dzisiejszym cyfrowym świecie. W szybko …

Czytaj dalej →
Joomla czy Wordpress

Joomla czy WordPress – który CMS jest lepszy?

Próbujesz wybrać między Joomla a WordPressem dla swojej następnej witryny? Chociaż istnieje mnóstwo dobrych powodów, aby korzystać z WordPressa , zdajemy sobie sprawę, że WordPress nie jest jedynym systemem …

Czytaj dalej →
Pozycjonowanie czy Google Ads?

Pozycjonowanie (SEO) czy Google Ads (Adwordsy). Co wybrać?

Porównywanie SEO lub Google Ads, wcześniej znanych jako Adwords, jest jak porównywanie jabłek z pomarańczami – oba pomagają wprowadzić Twoją markę w SERP przed potencjalnymi …

Czytaj dalej →

Jak przygotować się do badania UX w Twoim projekcie

Nie sposób przecenić znaczenia badań naukowych. Badania użytkowników są kluczowe dla sukcesu każdego projektu UX, a ten artykuł wyjaśni dlaczego tak jest. Warto posiąść taką wiedzę, …

Czytaj dalej →

Czas na Pythona! Poradnik jak przygotować prosty projekt w Pythonie – krok po kroku

Jak zainstalować Pythona w oknie i wydrukować „Hello World”. Python to jeden z popularniejszych języków programowania (Lista najpopularniejszych TUTAJ) w obecnej rzeczywistości. Charakteryzuje się dość …

Czytaj dalej →

Jak szybko wdrożyć Bootstrapa w swoich projektach?

Obecnie Bootstrap jest jednym z najpopularniejszych frameworków w społeczności programistów. Jedno z najprostszych dostępnych rozwiązań front-endowych metod programowania, Bootstrap umożliwia użytkownikom dostęp do wygodnych komponentów CSS …

Czytaj dalej →
Katalog stron