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 zrobić stronę pod SEO?

Jak stworzyć stronę przyjazną dla Google?

Projektowanie stron internetowych SEO to sposób na projektowanie i tworzenie stron internetowych tak, aby były przyjazne dla wyszukiwarek. Stworzenie witryny przyjaznej SEO oznacza, że ​​Google i …

Czytaj dalej →
Dlaczego nie warto postawić strony na Wix?

5 powodów, dla których nie warto używać Wix.com dla swojej strony internetowej

Często zdarzało mi się, że klienci przychodzili do mnie po użyciu Wix  do budowy strony internetowej i proszą o pomoc w zwiększaniu widoczności ich witryn. …

Czytaj dalej →
Czy warto inwestować we własny serwer?

Czy warto zainwestować w swój serwer sieciowy?

Rozejrzyj się po swoim biurze. Czy w sieci jest więcej niż cztery lub pięć komputerów? Jeśli tak, w jaki sposób zarządzasz tymi komputerami, aby zapewnić bezpieczeństwo danych …

Czytaj dalej →
Ciekawe animacje CSS i CSS3

30 świetnych przykładów zastosowania CSS do tworzenia ciekawych animacji na Twojej stronie www

Animacje CSS lub CSS3 w projektowaniu stron internetowych, w tym szeroko stosowane animacje hover, animacje ładowania, animacje tła, animacje przejścia, animacje tekstu itp., są obecnie …

Czytaj dalej →
Co da wirtualny spacer Twojej firmie?

W jaki sposób wirtualny spacer może pomóc Twojej firmie?

Jeśli obraz jest wart tysiąca słów, wyobraź sobie, ile warty może być dla Twojej firmy wirtualny spacer. Wirtualne spacery to symulacje istniejących lokalizacji, zwykle składające …

Czytaj dalej →
Najlepsze wtyczki do Wordpressa 2021

Najlepsze wtyczki do WordPressa w 2021 roku

WordPress bez wtyczek nie byłby tym narzędziem, które jest. To dzięki nim i szerokiemu wsparciu stał się najpopularniejszym CMS’em na świecie. Poniżej przedstawiamy najlepsze naszym …

Czytaj dalej →
Katalog stron

Informujemy, że na tej stronie korzystamy z “ciasteczek” – plików cookies. Więcej informacji w Polityce prywatności.