Kompresja obrazów on-line

Bardzo często umieszczamy na naszych stronach internetowych wszelkiego rodzaju zdjęcia i grafiki. Jeśli jest to nasza strona firmowa to pokazujemy nasze biuro/sprzęt/pracowników czy portfolio. Gdy stworzymy jakąś infografikę ta również ląduje na stronie jako obraz. Niejednokrotnie umieszczamy także zdjęcia zajmujące cały ekran czy to do paralaksy czy jako grafika witająca użytkowników zaraz po wejściu na stronę. Zdjęcie o rozmiarach 1920x1200px czy infografika o długości kilku tysięcy pikseli potrafi „ważyć” nawet ponad jeden megabajt a nawet kilka. Co prawda żyjemy w czasach szerokopasmowego dostępu do Internetu w naszych domach i Internetu LTE w naszych urządzeniach mobilnych, ale pobranie kilku megabajtów i tak zajmuje trochę czasu. Tutaj pojawia się pewien problem gdyż nie chcemy zrezygnować ze zdjęć ale jednocześnie nie chcemy by nasza strona ładowała się kilkanaście sekund (chyba każdy z nas irytuje się gdy strona, którą odwiedzamy nie jest widoczna po maksymalnie kilku sekundach).

Na szczęście istnieją narzędzia, które potrafią zmniejszyć rozmiar naszych zdjęć czy grafik i to niekiedy nawet do 80%. Ich działanie polega na usunięciu metadanych dołączanych do obrazu przez aparaty fotograficzne czy programy graficzne (przykładowo metadane zdjęcia z aparatu zawierają nawet informacje czy do zdjęcia została użyta lampa błyskowa, na naszej stronie ta informacja jest kompletnie zbędna) a także zastosowanie algorytmów kompresji stratnej lub bezstratnej.  Dzięki temu przy niezauważalnej lub praktycznie niezauważalnej utracie jakości możemy znacząco zmniejszyć rozmiar naszego obrazu. A skoro obraz „waży” mniej to potrzebny jest krótszy czas na jego pobranie a co za tym idzie uzyskujemy szybsze załadowanie się naszej strony.

Poniżej przedstawiam listę trzech kompresorów on-line.

  1. Compressor.io – Narzędzie, które nie pozwala na kompresowanie wielu plików na raz ani zmiany poziomu kompresji ale, nie wiem dlaczego korzystam z niego najczęściej;)
    compressor-compressor
  2. Compressnow.com – pozwala na kompresję wielu obrazów na raz oraz posiada suwak do określenia poziomu kompresji
    compressnow-compressor
  3. Optimizilla.com – pozwala na kompresję wielu obrazów na raz oraz posiada suwak pozwalający na określenie z ilu kolorów ma się składać skompresowany obrazek.
    optimizilla-compressor

Przenoszenie WordPressa bez pomocy wtyczek

Gdy tworzymy swój motyw bądź konfigurujemy jakiegoś „gotowca” to nie robimy tego na docelowej domenie a gdzieś, w ukryciu przed robotami indeksującymi i ewentualnymi odwiedzającymi. Jest to podyktowane względami SEO bo nie chcemy aby roboty zindeksowały naszą witrynę z frazami „Lorem Ipsum” lub zawartością „demo”. A gdy na przykład odświeżamy layout to nie chcemy by nasi klienci/czytelnicy widzieli stronę, która się „rozjeżdża”.

Gdy uznamy, że nasza strona jest już gotowa do tego by można ją było pokazać światu musimy wykonać kilka czynności aby po wpisaniu jej adresu była ona widoczna. Istnieje kilka sposobów na migrację strony, w tym wpisie pokażę jak zrobić to bez pomocy zewnętrznych pluginów typu Duplicator, ten sposób opiszę w kolejnym wpisie. Tak więc zaczynamy.

  1. Jeśli migrujemy z innego serwera to za pomocą klienta FTP skopiujmy sobie pliki naszego WordPressa na nasz komputer. Jeśli strona była tworzona lokalnie to punkt ten oczywiście pomijamy. (Bardziej zaawansowani użytkownicy mogą przenieść sobie pliki bezpośrednio pomiędzy serwerami za pomocą SSH).
  2. Logujemy się do phpMyAdmin tworzonej strony, przechodzimy do zakładki „Eksport” i eksportujemy sobie naszą bazę danych (Niektóre hostingi pozwalają na eksport bazy z poziomu swoich paneli zarządzania)
    phpmyadmin-eksport-compressor
  3. Pobrane wcześniej pliki kopiujemy do folderu docelowej strony
  4. Na docelowym hostingu tworzymy sobie nową bazę danych i logujemy się do niej za pomocą phpMyAdmin
  5. Wybieramy zakładkę „Import” i importujemy plik stworzony w punkcie 2.
    phpmyadmin-import-compressor
  6. Po zaimportowaniu bazy przechodzimy do zakładki SQL i wklejamy kod poniższego zapytania
    phpmyadmin-sql-compressor
    UPDATE wp_options SET option_value = replace(option_value, 'http://www.staradomena.pl', 'http://www.nowadomena.pl') WHERE option_name = 'home' OR option_name = 'siteurl';
    UPDATE wp_posts SET guid = replace(guid, 'http://www.staradomena.pl','http://www.nowadomena.pl');
    UPDATE wp_posts SET post_content = replace(post_content, 'http://www.staradomena.pl', 'http://www.nowadomena.pl');

    Gdzie oczywiście zamieniamy http://www.staradomena.pl na adres na którym tworzyliśmy witrynę a http://www.nowadomena.pl na adres docelowy. Po zmianie danych klikamy „Wykonaj”

  7. Wracamy do naszego klienta FTP i gdy skopiowały się nam już wszystkie pliki to otwieramy sobie do edycji plik wp-config.php
  8. W pliku wp-config.php znajdujemy sekcje:
    /** Nazwa bazy danych, której używać ma WordPress */
    define('DB_NAME', 'database_name');
    
    /** Nazwa użytkownika bazy danych MySQL */
    define('DB_USER', 'username');
    
    /** Hasło użytkownika bazy danych MySQL */
    define('DB_PASSWORD', 'password');
    
    /** Nazwa hosta serwera MySQL */
    define('DB_HOST', 'localhost');

    Gdzie define('DB_NAME', 'database_name'); – to nazwa naszej nowej bazy danych utworzonej w punkcie 4
    define('DB_USER', 'username'); – to nazwa użytkownika w/w bazy
    define('DB_PASSWORD', 'password'); – to hasło do bazy danych
    Po wypełnieniu w/w danych wysyłamy plik na serwer.

  9. Przechodzimy pod adres naszej nowej strony i powinniśmy ją zobaczyć.
  10. Może się zdarzyć tak, że zobaczymy komunikat „Błąd łączenia z bazą danych”. Należy wtedy sprawdzić dane podane w pliku wp-config.php gdyż być może wkradła nam się literówka bądź spacja. Możliwe jest również, że nasz hosting posiada inny adres bazy danych. Wtedy musimy znaleźć w panelu sterowania hostingu ów adres i zamienić go w linii /** Nazwa hosta serwera MySQL */
    define('DB_HOST', 'localhost');

    Ponownie zapisujemy plik i wysyłamy go na serwer.

W teorii, dobrze napisany motyw powinien zacząć działać po wykonaniu wyżej wymienionych czynności. W praktyce może być inaczej i na przykład nie będą nam się wyświetlały niektóre obrazy. Co prawda miało być bez pluginów ale w takim przypadku może być pomocna wtyczka Velvet Blues Update URLs w której podajemy stary i nowy adres a ona zajmie się ich podmianą. Może się również zdarzyć tak, że w motywie jakieś URLe są wpisane „na sztywno” (choć nie powinny bo od tego są funkcje WP jak get_template_directory_uri() ) – wtedy nie pozostaje nic innego jak edycja plików motywu i ich podmiana.

Zabezpieczanie WordPressa

Według w3techs.com udział WordPressa w wynku CMSów wynosi 59,6%. Dodatkowo jest na nim oparta praktycznie co czwarta strona internetowa w sieci (26,6%). Popularność WP wiąże się z tym, że jest przeprowadzane wiele ataków na strony na nim oparte. Wyobraźcie sobie, że spammerzy znajdują bardzo poważną lukę i ich boty atakują jedną czwartą internetu umożliwiając rozsyłanie spamu, ataki ddos czy wstrzykują na strony swoje linki. Oczywiście popularność WordPressa to również wiele ludzi, którzy pracują nad tym aby był on jak najlepiej zabezpieczony. Niestety zawsze pojawią się jakieś dziury, które są błyskawicznie wykorzystywane. Dodatkowo każda strona korzysta z wtyczek i motywu, które nie są rozwijane przez ogólnoświatową społeczność a przez małe grupy ludzi i to właśnie wtyczki czy motywy są najczęściej źródłami problemów (jak na przykład dziura w bardzo popularnym Revolution Slider, która doprowadziła do wycieku danych w aferze „Panama Papers”).

Dlatego jeśli decydujemy się na wykorzystanie WordPressa do stworzenia naszej witryny musimy się nią na bieżąco zajmować.

Najważniejsze jest instalowanie aktualizacji bo te prócz wprowadzania różnych udogodnień i nowych funkcjonalności, łatają również dziury w zabezpieczeniach. Ale dobra konfiguracja WP, dzięki której znacząco zmniejszamy ryzyko uszkodzenia naszej strony to nie tylko aktualizacje.

Już na etapie tworzenia strony warto jest skorzystać z tej prezentacji, która w bardzo przystępny sposób opisuje na co zwrócić uwagę, czego się wystrzegać, o co dbać oraz, co najważniejsze, jak zabezpieczyć naszego WordPressa.

Prezentacja „Wyczaruj sobie spokój”
http://wpmagus.pl/pliki/prezentacje/wyczaruj-sobie-spokoj/#/

Naprawa „Witryna jest tymczasowo niedostępna”

Gdy aktualizujemy wtyczki lub samego WordPressa przełącza się on w tryb konserwacji. Oznacza to tyle, że podczas tych kilku sekund gdy następuje aktualizacja, ktokolwiek wejdzie na naszą stronę zobaczy komunikat o pracach konserwacyjnych.

Komunikat konserwacja wordpress

Zwykle po zakończeniu aktualizacji nasz WordPress powinien wrócić do swojego normalnego działania, ale może się zdarzyć tak, że ów komunikat nie znika.

Rozwiązanie tego problemu jest bardzo proste. Musimy połączyć się z naszym serwerem FTP (na przykład przy pomocy klienta FTP jak Filezilla), wejść w katalog w którym znajdują się pliki WordPressa oraz usunąć plik o nazwie .maintenance

konserwacja

Własny kolor paska adresu w mobilnym Chrome

Mobilna wersja przeglądarki Chrome dla systemu Android posiada bardzo fajną funkcjonalność, która pozwala na zmianę koloru paska adresu na dowolny, wybrany przez nas. Po wczytaniu strony pasek może przyjąć kolor, na przykład, nagłówka naszej strony co tworzy efekt całości z przeglądarką.
Pasek adresy przeglądarki
Pasek adresy przeglądarki
Uzyskanie tego efektu jest bardzo proste. Wystarczy jedna linijka kodu dodana do sekcji <head> naszej strony.<meta name="theme-color" content="#4a148c">dzie #4a148c zamieniamy na wybrany przez nas kolor. 

Przyspiesz swoją stronę z HTTP/2

Nie dawno miała miejsce premiera nowej wersji protokołu HTTP czyli HTTP/2. Poprzednia wersja (HTTP 1.1) weszła w życie w 1997 roku i jest używana do dzisiaj.

Głównymi różnicami są m.in:

  • Ograniczenie ilości połączeń TCP potrzebnych do pobrania całej zawartości strony.
    http2-multiplexing
    Źródło: cloudflare.com
  • Server Push czyli wysyłanie komponentów zanim przeglądarka o nie poprosi.
    http2-server-push
    Źródło: cloudflare.com
  • Priorytety pobieranej treści. Jest to mechanizm przeglądarki pozwalający jej na ustalenie jakie zasoby będzie potrzebowała w jakiej kolejności. Oznacza to, że przykładowo najpierw zostanie pobrany HTML, następnie style a na koniec skrypty JS.
  • Kompresowanie nagłówków. Każde zapytanie wiąże się z wysłaniem nagłówków HTTP. Protokół w wersji 1.1 nie pozwalał na ich kompresję co powodowało wysyłanie kilkuset bitów do kilobajta w każdym żądaniu. Algorytm HPACK pozwala na skompresowanie nagłówków o 80-85% powodując znaczny spadek czasu ładowania strony.

Ale przejdźmy do konkretów, czyli do tego jak szybko i łatwo skorzystać z dobrodziejstw HTTP/2 i przyspieszyć ładowanie strony.

Po pierwsze kilka słów o wymaganiach:

  • W założeniu HTTP/2 nie wymaga by strona miała certyfikat. Niestety wszystkie obecne na rynku przeglądarki go wymagają. (http://caniuse.com/#search=http2).
  • Jeśli nasza strona posiada certyfikat czyli jej adres zaczyna się od „https://” to musimy sprawdzić czy serwer naszego hostingodawcy jest już przystosowany do obsługi HTTP/2 (https://tools.keycdn.com/http2-test).
  • Jeśli nie mamy certyfikatu lub nasz hosting nie wspiera HTTP/2 to polecam skorzystać z platformy cloudflare.com. Jest to CDN czyli serwis, który „kopiuje” naszą stronę na swoje chmury i serwuje je użytkownikom z tej, do której użytkownik ma najbliżej. Dodatkowo oferują oni darmowy certyfikat SSL, ochronę przed atakami czy kompresję plików. Opis jak skonfigurować Cloudflare z WordPressem znajdziecie tutaj -> https://www.marketingowy.net/konfiguracja-cloudflare-wordpress/

Ja korzystam z platformy Cloudflare, więc poniższe testy i ustawienia są wykonywanie właśnie na niej.

Na początek może przykład aby od razu zobrazować co można uzyskać z HTTP/2

Przed optymalizacją:
kursbootstrap-after-preload-3Po optymalizacji:
kursbootstrap-after-preload-2Jak widzicie czas ładowania spadł z 3,7s do 1,6s i ilość zapytań spadła o połowę. Co widać na poniższych wykresach. (te skoki są spowodowane odświeżaniem cache na serwerach cloudflare i kombinowaniem z ustawieniami)
kursbootstrap-after-preload

Jak widzicie, gra jest warta świeczki bo niewielkim nakładem pracy otrzymaliśmy ponad dwukrotny spadek czasu ładowania. W uzyskaniu wyniku pomogło nam zastosowanie Server Push czyli wysłanie wybranych zasobów zanim poprosi o nie sama przeglądarka.

Cloudflare pozwala na korzystanie z Server Push ale musimy je o tym poinformować. Co najlepsze, możemy to zrobić nie ingerując kompletnie w kod strony. Wykorzystamy do tego plik .htaccess

Aby skorzystać z Server push musimy w naszym pliku .htaccess dopisać kilka reguł, które mówią serwerowi, jaki pliki ma wysłać. Korzystamy wtedy z zapisu:

Header add Link '</wp-content/themes/internet-maker-theme/style.css>; rel=preload; as=stylesheet'

Gdzie w sekcji

as=*

możemy skorzystać z następujących parametrów:

consumerPreload directive
<audio>, <video><link rel=preload as=media href=...>
<script>, Worker’s
importScripts
<link rel=preload as=script href=...>
<link rel=stylesheet>, CSS @import<link rel=preload as=style href=...>
CSS @font-face<link rel=preload as=font href=...>
<img>, <picture>, srcset, imageset<link rel=preload as=image href=...>
SVG’s <image>, CSS *-image<link rel=preload as=image href=...>
XHR, fetch<link rel=preload href=...>
Worker, SharedWorker<link rel=preload as=worker href=...>
<embed><link rel=preload as=embed href=...>
<object><link rel=preload as=object href=...>
<iframe>, <frame><link rel=preload as=document
href=...>

Czyli przykładowo gdy chcemy wysłać plik CSS, JS i obraz nasz zapis w .htaccess będzie następujący:

Header add Link '</wp-content/themes/internet-maker-theme/style.css>; rel=preload; as=stylesheet'
Header add Link '</wp-includes/js/jquery/jquery.js>; rel=preload; as=script'
Header add Link '</wp-content/uploads/2016/01/internet-maker-logo.png>; rel=preload; as=image'

Należy pamiętać o podawaniu ścieżek względnych czyli z pominięciem adresu naszej witryny. Dodatkowo wszystkie zasoby muszą znajdować się na naszym serwerze.

Teraz kwestia tego, jakie pliki wysyłać za pomocą server Push. Wysyłamy tylko pliki, które wczytują się na wszystkich podstronach a nie tylko na wybranej. Nie chcemy przecież pobierać za każdym razem wszystkich obrazów z galerii gdy użytkownik przegląda pozostałe strony ale na przykład możemy pobrać logo gdyż te jest zawsze w nagłówku każdej naszej podstrony.

Skąd mamy się dowiedzieć jakie pliki są wczytywane? Tutaj istnieje kilka rozwiązań. Można na przykład wyświetlić sobie źródło strony (ctrl + u w Chrome) i szukać plików z rozszerzeniem *.css, *.js czy obrazów. Można otworzyć sobie narzędzia developerskie (F12 w Chrome) i w sekcji Sources wybrać swoją domenę i zobaczyć co się z niej pobierało. Możemy także wejść na stronę do testowania prędkości naszej witryny jak na przykład https://gtmetrix.com i po przeprowadzeniu testu kliknąć w zakładkę Waterfall, w której znajdziemy rozpiskę pobieranych stylów, skryptów czy obrazów.

Poniżej jeszcze jeden przykład, myślę, że na wykresie dość wyraźnie widać miejsce w którym został skonfigurowany Server Push. Czas ładowania spadł z 17 do 3 sekund ale pamiętajcie, że optymalizacja strony to złożone zagadnienie i samo HTTP/2 nie czyni cudów.

tp-1Pochwalcie się swoimi wynikami w komentarzach!

Cheat sheet / wyszukiwarka Bootstrap

Bootstrap jest zbiorem gotowych klas ułatwiającym tworzenie responsywnych stron WWW.
Dokumentacja Bootstrapa jest bardzo czytelna ale brakuje jej jednej, ważnej rzeczy – wyszukiwarki.
Nie znając dokumentacji na pamięć nie jest łatwo znaleźć poszukiwany element. Tutaj z pomocą przychodzi strona https://cheatsheet.kursbootstrap.pl/ która umożliwia wyszukiwanie po nazwie elementu bądź po jego klasie.

Jak zwiększyć efektywność kampanii AdWords?

Prowadzisz kampanię AdWords? Nie jesteś zadowolony z efektów? Sprawdź, jak zoptymalizować kampanię, by działania zaczęły przynosić zyski. Zerknij do praktycznego poradnika, który krok po kroku, przeprowadzi Cię przez proces optymalizacji kampanii. Czasem kilka prostych zmian, pozwoli zdecydowanie zwiększyć efektywność działań promocyjnych.

Optymalizacja kampanii to coś więcej niż korekta stawek CPC oraz dodanie wykluczeń. Połączyłeś poprawnie konto AdWords z Google Analytics? Ustawiłeś konwersje? Sprawdziłeś czy konwersje zliczane są poprawnie? Wyodrębniłeś kampanię brandową? Zastanawiałeś się czy komunikaty reklamowe są spójne ze strategią promocyjną firmy? A może wieje nudą i reklamy są zanadto sztampowe. Wyróżnij się. Sprawdź co jeszcze możesz zrobić, by wycisnąć swoją kampanię jak cytrynę! Do dzieła!