Kategorie
Narzędzia Strony www

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.
WAWA NEWS

Portal informacyjny dotyczący stolicy i całego województwa mazowieckiego.

Piszemy, relacjonujemy, dbamy i pozycjonujemy. Tę stronę także wykonaliśmy od początku do końca.

Wordpress
Google
HTML5
php
AUTO CENTRUM GROUP

Strona internetowa grupy motoryzacyjnej, która zrzesza w swoich szeregach specjalisót z branży MOTO.

Zrealizowaliśmy stronę od A do Z dbając o wysoką jakość treści na niej się pojawiającej. Pozycjonujemy i administrujemy całą stroną.

Wordpress
Google
HTML5
php
IZO-PUR IZOLACJA

Strona opisuje usługi związane z ociepleniem pianą PUR poddaszy, ścian różnego rodzaju budynków.

Strona internetowa została zaplanowana, opracowana i zrealizowana z dbałością o szczegóły. Zajmujemy się także opieką i pozycjonowaniem strony www.

Wordpress
Google
HTML5
php
SERWIS DOMKÓW HOLENDERSKICH

Firma zajmuje się serwisowaniem, konserwacją i naprawą domków holenderskich i wszelkich instalacji.

Strona internetowa została zaplanowana, opracowana i zrealizowana z dbałością o szczegóły. Zajmujemy się także opieką i pozycjonowaniem strony www.

Wordpress
Google
HTML5
php
INFO DLA POLAKA

Info dla Polaka to jeden z naszych portali informacyjnych, który z miesiąca na miesiąc zyskuje nowe rzesze stałych czytelników.

Portal informacyjny to inny rodzaj strony internetowej, w której największej uwadze należy poświęcić podstronom artykułów, która musi być przyjazna i funkcjonalna dla każdego czytelnika.

Wordpress
Google
HTML5
php
SEO WARSZAWA

To jedna z naszych stron internetowych, gdzie oferujemy profesjonalne usługi pozycjonowania dla firm z Warszawy i okolic.

Strona została przygotowana w oparciu o bootstrap i HTML5 na indywidualnym i przygotowanym przez nas szablonie.

Google
HTML5
EDMAR KASACJA

Edmar to jedna z największych stacji demontażu pojazdów w środkowej Polsce.

Oprócz stworzenia strony www na indywidualnym szablonie kompleksowo zajmujemy się administracją, opieką, przygotowaniem tekstów i pozycjonowaniem strony z sukcesami na trudne frazy lokalne.

php
Google
Wordpress
HTML5
POMOC DROGOWA POLSKA

To portal skupiający osoby zajmujące się pomocą drogową, lawetami czy holowaniem na terenie całego kraju.

Portal został zrealizowany od początku do końca, zajmujemy się także wszelkimi działaniami reklamowymi i pozycjonowaniem.

php
Google
Wordpress
HTML5
SKUP AUT WARSZAWA

Firma skupuje samochody z Warszawy i całego województwa mazowieckiego. Są zainteresowani zarówno samochodami sprawnymi, jak i uszkodzonymi czy powypadkowymi.

Stronę wykonaliśmy w oparciu o nowoczesną technologię i z uwzględnieniem najbardziej popularnych fraz kluczowych. Zajmujemy się kompleksowo administracją strony, pozycjonowaniem i reklamą.

php
Google
Wordpress
HTML5