Google Fonts (i nie tylko) – dlaczego lepiej hotlinkować niż trzymać u siebie?

W niemal każdym poradniku o optymalizacji stron www można odnaleźć wskazówkę, że wszystkie zawartości wczytywane z zewnątrz powinno się umieścić lokalnie na stronie, i wczytywać razem z innymi elementami strony z jednego serwera. Koronnym przykładem jest tu Google Fonts – popularna usługa serwowania darmowych do użycia krojów czcionek.

Mówi się że hotlnikowanie (czyli linkowanie zdalne) spowalnia ładowanie strony i uzależnia ją od zewnętrznych usług.
W zasadzie prawda, ale:

Jeśli dana usługa jest bardzo popularna (na przykład jest to bardzo popularny font Open Sans) to istnieje bardzi duże prawdopowobieństwo, że użytkownik strony był już na innej stronie która używa tego kroju czcionek. Zatem – ten krój jest już zapisany u niego w przeglądarce, a ta widząc hotlink do tego samego miejsca, nie będzie ładowała czcionek z serwera Googla, tylko pociągnie z własnego cache’a, co jest około trzy biliony razy szybsze.

Ma to zastosowanie dla wszystkich popularnych treści hotlinkowanych.

A pod adresem
https://fonts.google.com/analytics są pełne statystyki użycia krojów z Google Fonts. Rządzą: Roboto, Open Sans, Lato (polska produkcja!), Oswald. Myślę że te kroje można spokojnie hotlinkować do woli. :)



Sposób na testowanie mobilnych www

browserstackTechnologie i techniki tworzenia mobilnych stron, mimo że są i działają, charakteryzują się jeszcze niedojrzałością i siermiężnością. No bo jak napisać złożoną stronę która będzie wyświetlała w 100% (i ani o 1% mniej) szerokości absolutnie na każdym urządzeniu mobilnym? Rzeź, przynajmniej na razie. Przeliczanie rozdzielczości natywnych, symulowanych, faktycznych i bóg wie jakich jeszcze, na niemal każdym urządzeniu działa inaczej. A do tego ta przeglądarka obsługuje viewport, a tamta nie, a jeszcze ina – częściowo i nie zawsze. Temat jest do ogarnięcia, ale pochłania mnóstwo czasu i pracy.

Najgorzej jest z testowaniem na różnych urządzeniach. Byłoby dobrze mieć pod ręką wszystkie typowe fizyczne sprzęty, ale to ze względów głównie finansowych – niemożliwe. Z pomocą przychodzą nam więc aplikacje/emulatory i symulatory. Nie dość dokładne -prawie wszystkie. Prawie – bo jest wyjątek. BrowserStack oferuje testowanie działania i wygladu stron na wielu popularnych sprzętach z iOSem i Androidem. Usługa jest płatna, ale (na ten moment) można za darmo testować działanie (na dokładnym, natywnym emulatorze) przez kilkadziesiąt minut oraz wykonać kilkadziesiąt screenshotów.

Każdy mobilny webdeveloper powinien znać to narzędzie. ;) A może są jakieś inne, podobne, o których nie wiem?

Na testowanie stron – Browserling

<a title=”Browserling” href=”http://browserling atorvastatin online.com/” rel=”http://browserling.com/” target=”_blank”>Browserling to ostateczne i idealne rozwiązanie problemów z testowaniem stron pod różnymi przeglądarkami.

„Przeglądarniątko” działa genialnie prosto i skutecznie – za każdym zapytaniem odpalają cały system operacyjny i w nim wybraną przez nas przeglądarkę, a w niej – pobrany adres strony. Całość jest „używalna” w 100% – czyli nie dostajesz screenshotu, ale otrzymujesz w pełni funkcjonalną stronę odpaloną w wybranym browserze, którą możesz przetestować także pod kątem interakcji i realnej użyteczności.

Strony testować można za pomocą przeglądarek IE, Firefox, Chrome, Opera i Safari, we wszystkich pełnych wersjach + najnowsze wersje prototypowe (nightly, itp.).

Łatwe, proste, przyjemne, szybkie – i o to chodzi. Jest tylko jedno „ale” – narzędzie nie jest do końca darmowe. Za free można używać do woli, ale sesja testowania jednej strony w jednej przeglądarce może trwać max 5 minut, a po opłaceniu $20 miesięcznie – czas testowania jest nieograniczony. Myślę jednak że wersja darmowa powinna wystarczyć wszystkim.

[aha: za cynk dziękuję mcbarlo i pośrednio grxmrx’owi]

25 narzędzi dla użyteczności stron www

Na blogu Hongicat.com jakiś czas temu znalazłem listę 25 narzędzi poprawiających użyteczność stron internetowych. Przynajmniej połowa z nich jest zdecydowanie warta uwagi. Prawdopodobnie niektóre narzędzia omówię w przyszłości na stronach bloga…

SmushIt

O bezstratnym zmniejszeniu rozmiarów plików grafiki w formacie PNG pisałem już kiedyś, we wpisie „Jak zmniejszyć PNG„. Do optymalizacji wielkościowej plików JPG używam świetnej pchełki offline „jpegoptim

Okazuje się, że istnieje narzędzie, optymalizujące w taki bezstratny sposób każdą grafikę. Mowa o SmushIt – jest to intuicyjna, prosta mini-web-aplikacja, zmniejszająca rozmiar plików graficznych „podanych” poprzez upload lub wskazanie adresu URL. Tak zoptymalizowany plik można oczywiście ściągnąć na dysk. Szybko, łatwo, bezboleśnie, dla wszelkich webowych rodzajów grafik.

Ranking najlepszych rozmiarów boxów AdSense

Na Webhosting.pl pojawił się ciekawy artykuł, w którym przedstawiono i zanalizowano wyniki badań zależności skuteczności (CTR) boxów reklam AdSense do ich rozmiarów i rodzajów.

Wbrew pozorom wyniki nie są oczywiste – okazuje się na przykład że bardziej opłacalna jest publikacja bionowego bannera 120×600 niż szerszego – 180×600. Oczywiście to nie koniec takich kruczków.

Aby nie kopiować treści, wkleję tutaj tylko ogólny wykres, a po bliższą analizę zapraszam do arta na Webhosting.pl.

Skuteczność AdSense

Jaką część Twojej strony widzą użytkownicy?

Browser Size Spece z Google opracowali bardzo proste i na swój sposób genialne w swojej prostocie narzędzie, pokazujące jaki procent użytkowników podanej witryny widzi daną część witryny po jej wczytaniu. Taka wiedza jest bardzo istotna na stronach, w których zmiana położenia kluczowego elementu (na przykład przycisku „Kup teraz”) lub innego typu optymalizacja ułożenia/wielkości elementów strony może znacząco zwiększyć dochody lub współczynnik konwersji.

Idea jest bardzo mało skomplikowana: Na obraz podanej strony nałożony jest wykres-diagram, ilustrujący obszary widziane przez użytkowników korzystających z konkretnych rozdzielczości ekranu i okna przeglądarki.

Może wygląd tego narzędzia nie jest najprzedniejszy, jednak nadrabia funkcjonalnością i jakością informacji, jakich dostarcza.
Adres aplikacji: http://browsersize.googlelabs.com.

UserFly – król podglądaczy

userfly.com Już kilkanaście razy podchodziłem do tematu śledzenia zachowań użytkowników na stronie – za każdym razem kończyło się to fiaskiem instalacji, zbyt zasobochłonnym skryptem lub niezadawalającą prezentacją wyników.
Wczoraj przetestowałem skrypt UserFly, służący do tego celu, i jestem zachwycony. Dlaczego?

  • UserFly rejestruje całą interakcję użytkownika z witryną (przewijanie, klikanie, wypełnianie formularzy itp.
  • UserFly przedstawia tą interakcję w formie „naturalnych” filmików do oglądnięcia
  • UserFly jest bardzo prosty w instalacji – w sekcji head należy wkleić tylko jedną linijkę (i to wszystko)

Ma tylko jedną wadę: nie jest za darmo – za nagranie powyżej 10 filmików trzeba zapłacić – jednak, jeśli komuś zależy na zbadaniu userów swojej strony – zdecydowanie polecam to narzędzie.

A o UserFly dowiedziałem się stąd.

Google Adsense – 9 mitów i faktów (i modyfikacja zasad)

O tutaj. Z wieloma z przytoczonych w rzeczonym artykule stwierdzeń nie zgadzam się całkowicie, ale mimo to postanowiłem wrzucić na Subiektyw.
Bajdełej: Ostatnio Adsense (ku niepocieszeniu większości) zabroniło pewnych dość lukratywnych ułożeń reklam na witrynach. Więcej tu.