 |
| Lazy image - przyspieszenie otwierania strony internetowej |
Lazy Image - jak przyspieszyć ładowanie się strony internetowej - praktyki SEO
Optymalne praktyki SEO, których jest więcej, niż postów na blogu, są dość skomplikowane. Wymagają od nas zapoznania się, oraz nauczenia wielu, rzekł bym już nie podstaw, zaawansowanego poruszania się po kodzie HTML. Nie wspomnę już o programowaniu JAVA. Z pomocą przychodzą nam porady "ekspertów " SEO, którzy potrafią tak skomplikować wszystko do potęgi, że z prostej operacji, kopiuj - wklej, robi się lekcja programowania. Staram się unikać takich praktyk, sam uczę się wszystkiego na własnej skórze. Nie jestem ekspertem, a raczej gościem, który prowadzi bloga, uczy się nowych rzeczy, a to co się nauczę, staram się w prosty sposób zapisać tu, by kiedyś w przyszłości, jak będę czegoś potrzebował, to sobie odświeżę pamięć. Przy okazji, jeśli szukasz informacji i prostego HOW-TO, to właśnie jest to miejsce dla Ciebie.
Dziś skupimy się, na szybkości ładowania się strony, co na to mówi Google, jakie są opcje, by nie musiał ktoś czekać wieczność, na otworzenie się w pełni waszej strony, bloga.
Jest taka strona internetowa, zrobiona przez Google, która powie Ci jaka jest szybkość ładowania się Twojej strony internetowej. Na tej stronie Google prawdę Wam powie, jak kiepsko jest z Waszą stroną. Im więcej punktów, tym lepiej, aczkolwiek dobrze jest chociaż byś w grupie średniej ( pomarańczowej ). Ważne jest by skupić się na parametrach MOBILE. Te zawsze ładują się wolniej. Tak jak na mojej stronie, 80 punktów na DESKTOP, 20 punktów na MOBILE. Im więcej zdjęć na stronie, tym dłużej ładuje się strona.
Optymalizacja obrazów na stronie internetowej.
Optymalizacja obrazów, zdjęć jest ważna, tego chyba nie muszę mówić, zdjęcie które jest zrobione nowym aparatem, lustrzanką potrafi zajmować nawet ponad 20 MB pamięci, ściągnięcie takiego zdjęcia wraz ze stroną to jak przesłuchać piosenkę na YouTube. Dla tego ważne jest by zdjęcia były zmniejszone i zapisane w najnowszych formatach.
Ja używam takich rozszerzeń :
- .png - dla logotypów ( czyli obrazki jak logo )
- .jpg - dla zdjęć
- .webp - troszkę lepsza kompresja niż .jpg - zdjęcia na bloga
- .gif - tylko do animacji
- .bmp i .tiff - nigdy tego nie stosuj
Tu możesz załadować zdjęcie, zobaczyć który format najmniej miejsca zajmuje, zapisać w odpowiednim dla siebie formacie, i ściągnąć je na komputer.
Nazwa zdjęcia, alt atrybut i tytuł zdjęcia dla lepszego SEO
Tego kroku nie omijaj, jak spojrzysz na odwiedziny swojego bloga, strony internetowej, grafika to też często wyszukiwane frazy w Internecie. Jeśli Twoje zdjęcie nie będzie odpowiednio opisane, to nikt na nie nie wejdzie. Szkoda przepuszczać takiej okazji. Także po kolei. Zanim zapiszesz zdjęcie musisz mu dać odpowiednią nazwę. Ładowanie na bloga, czy stronę internetową zdjęcia o nazwie DCM01223, robotom Google nic nie powie. a zdjęcie o nazwie na przykład " domek na plazy " już dużo więcej. Pamiętaj, by nie używać polskich znaków, by nazwa była powiązana z tym o czym piszesz. Ja stosuje taką technikę, pierwsze zdjęcie zapisuje z nazwą taką jak tytuł artykułu jaki piszę, drugie i następne zmieniam kolejność z sensem wyrazów.
Dalej jest ALT atrybut, to też istotna nazwa. Postępuję z nimi tak samo jak z nazwą pliku. czyli słowa kluczowe z sensem i zrozumiałą treścią.
Tytuł zdjęcia za to, to nic innego na napisanie co widać na zdjęciu. To jest bardzo przydatne dla osób niewidzących, lub niedowidzących. Gdy mają włączoną opcję czytania tekstu - to jest dla nich informacja co znajduje się na zdjęciu.
Lazy image czyli opóźnione ładowanie zdjęcia - co to jest ?
I przyszła kolej na Lazy Image - to nic innego jak powiedzenie przeglądarce, że to zdjęcie ma się załadować tylko wtedy, gdy jest w polu widzenia. Czyli jeśli przewijasz stronę w miarę jej czytania, w między czasie ściągają się zdjęcia. Takim to sposobem oszczędza się czas na załadowanie całej strony, co Google traktuje znacznie lepiej, dając większe szanse na pojawienie się Waszej strony na wyższym miejscu w wynikach wyszukiwania. Poza tym, jak masz czekać zanim się cała strona załaduje, a trwa to tyle, że zdążysz wypić kawę, to cała przyjemność z czytania jakoś zanika. Natomiast strona, która ładuje się w mgnieniu oka, to już zmienia pierwsze wrażenie dla czytelnika.
Jak stosować Lazy Image, JAVA script, czy rozszerzenie
Tu zaczynają się schody, można zastosować script JAVA, który jest automatyczny, wklejasz odpowiedni kod na stronę i po wszystkim. Jednak ma on wiele wad, o których Ci powiem. Jedna, która zdecydowała, że poszedłem pod górkę, to fakt, że jak masz jakikolwiek slide na stronie, czyli przesuwające się zdjęcia, to nie będzie działać na telefonach. Przetestowałem tych skryptów wiele, żaden sobie z tym nie poradził. Czytelnik który wchodzi na waszą stronę i zamiast zdjęcia widzi zamglone coś, raczej się nie zachęci, by pozostać.
Najczęściej spotykanym skryptem jest ten co się go wkleja :
Blogger - Motyw - edytuj HTML, szukasz przez ctrl f </body> i nad nim wklejasz kod
<script type='text/javascript'>
// Jquery LazyLoad Script by www.Bloggersstand.com
//<;b.loaded=true}).attr("src",a(b).attr("original"))}});if("scroll"!=c.event){a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger("appear")}})}});a(c.container).trigger(c.event);return this};a.belowthefold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).height()+a(window).scrollTop()}else{var d=a(c.container).offset().top+a(c.container).height()}return d<=a(b).offset().top-c.threshold};a.rightoffold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).width()+a(window).scrollLeft()}else{var d=a(c.container).offset().left+a(c.container).width()}return d<=a(b).offset().left-c.threshold};a.abovethetop=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollTop()}else{var d=a(c.container).offset().top}return d>=a(b).offset().top+c.threshold+a(b).height()};a.leftofbegin=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollLeft()}else{var d=a(c.container).offset().left}return d>=a(b).offset().left+c.threshold+a(b).width()};a.extend(a.expr[":"],{"below-the-fold":"$.belowthefold(a, {threshold : 0, container: window})","above-the-fold":"!$.belowthefold(a, {threshold : 0, container: window})","right-of-fold":"$.rightoffold(a, {threshold : 0, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : 0, container: window})"})})(jQuery);$(function(){$("img").lazyload({placeholder:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGeN4eton33tHBgxaDgmsJ2JIwOo_8g_QdAoB8CrLvY2oSSdOERQmAB9jCVs1_JDMV1deX-3JfjhBXm9ebpbD0Ij5DQCr1zDXXvPKutxdAmiHzjORJWdTFMXQKQcVHbw4otEAzBo-mjDY/s1600/bloggersstand.gif",effect:"fadeIn",threshold:"-50"})});//]]></script>
Jeśli nie masz żadnych slajdów na stronie, to chyba najbardziej optymalna wersja dla Ciebie. Ja niestety mam ich trochę, stąd musiałem iść na pieszo.
W polu, w którym piszesz swoje artykuły masz dwa sposoby oglądania swoich wypocin. Jeden to widok tworzenia, i widok HTML. Nas tu będzie interesował ten drugi. Gdy go przełączysz będziesz widział dużo różnych znaczków i trochę tekstu.
Gdy już masz załadowane zdjęcia na blogu, stronie i wszystko poustawiane, to wybieramy Tryb Tworzenia HTML i szukamy :
<img alt
W tej linijce dodajemy między " <img " a " alt " wklejamy : loading="lazy"
lub może to wyglądać tak
<img src="image.png" loading="lazy" alt="…" width="200" height="200">Zapisujemy i gotowe. oszczędzamy dużo czasu na załadowaniu się strony. U mnie na blogu oszczędza to około 6 sekund, a to wieczność.
To jest to co pokazuje się w rubryce
"Deffer offscrean images "
Witaj, tu Tomasz, mam 44 lata i marzenie, by utrzymywać się online, może spróbujemy dojść do czegoś razem ? 
Brak komentarzy:
Prześlij komentarz