Witam was serdecznie w poradniku w którym wytłumaczę w jaki sposób osiągnąć
100/100 w Google PageSpeed Insights, wysoki wynik w
Audytach SEO co pozwoli waszej stronie wystrzelić w wynikach. Pamiętajcie, że strona która jest linkowana, reklamowana a
nie jest zoptymalizowana ma bardzo pod górkę. Krok po kroku, na podstawie innych witryn i ich wyniku w Audytach pokażę wam jak uzyskać zadowalający nas wynik.
W poradniku będziemy będziemy posługiwali się dwoma stronami - secureglass, gdzie możemy znaleźć bardzo dobry Audyt SEO który jest całkowicie darmowy oraz Google PageSpeed Insights - narzędzie od googla które pokazuje w jakim stopniu nasza strona jest zoptymalizowana. Dobry wynik wynosi od 85 w górę, a tego wielu stronom brakuje.
Zaczynamy!
Google PageSpeed Insights -
Kliknij tutaj aby przejść,
Audyt SEO Secure Glass -
Kliknij tutaj aby przejść,
Pod ostrzał wezmę pierwszą z wyników google stronę która wyświetla nam się po wpisaniu jakże popularnej niszy "download gta 5 full game". Przechodzimy na stronę, potem na stronę główną i wklepujemy ją w Google PageSpeed Insights. Oto jaki wynik otrzymaliśmy:
![[Obrazek: srDWn5h.png]](https://i.imgur.com/srDWn5h.png)
Jak widzimy,
tragedia. No ale dajmy jej jeszcze szansę, wrzućmy ją w Audyt SEO, może tam popisze się dobrymi statystykami. Oto jak wypadł Audyt:
![[Obrazek: vLPo0O3.png]](https://i.imgur.com/vLPo0O3.png)
No, tutaj nie trzeba nic komentować. Strona jest
strasznie źle zoptymalizowana, pod SEO jak i szybkość działania. No dobra, ale zapytacie mnie,
co zrobić aby było dobrze?
1) Google PageSpeed Insights
Wykorzystaj pamięć podręczną przeglądarki
Pierwsza z rzędu rzecz o którą czepia się google, i pierwsza jedna z prostszych rzeczy do wyeliminowania. Jeżeli działacie na wordpressie i macie zainstalowaną wtyczkę Yoast SEO przechodzicie do niej, potem do pola Tools, następnie File Editor i tam macie plik .htaccess. Jednak jeżeli nie korzystacie z wordpressa, łączycie się z swoją stroną przez FTP, tam włączacie właśnie plik .htaccess - znajduje się on w głównym folderze z waszą stroną (np. public_html). Do pliku dodajecie taki wpis:
Kod:
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType image/x-icon "access 1 year"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresDefault "access 1 month"
</IfModule>
Zapisujecie, i
voilà! Nagle większość skryptów zniknęła. Czasami jednak gdy łączymy się z innym serwerem aby takie pliki pobierać, przykładowo z googlem gdy mamy podpięty Analytics pod naszą stronę, nadal się czepiają o plik analytics.js (przykładowo). Aby go wyeliminować na wordpressie, pobieracie prostą wtyczkę Autoptimize (
klik!) na wordpress. Do jej ustawienia przejdziemy potem, na dole. W każdym bądź razie, pozwoli ona na wyeliminowanie łączenia się z tymi skryptami. Póki co, po wyeliminowaniu błędów z tych plików które znajdują się na naszym serwerze,
przechodzimy dalej.
Zoptymalizuj obrazy
Część
najprostsza. Po prostu wasze zdjęcia które macie dodane na stronie za dużo ważą, przez co strona wolno się wczytuję. Aby je zoptymalizować pobieracie je i wrzucanie na tą stronkę -
klik!. Potrafi zdziałać cuda, na prawdę. Po zoptymalizowaniu obrazów nadpisujecie je po prostu tymi i wszystkie wasze obrazy zoptymalizują się. Nie polecam korzystania z wtyczek na wordpress które takie obrazki same kompresują, ponieważ dodają dużo kodu do naszej strony a poza tym mają wielkie ograniczenia jeżeli nie kupicie subskrypcji premium. Strona którą podałem całkowicie wam wystarczy.
Włącz kompresję
Jeżeli korzystacie z Wordpressa wtyczka Autoptimize którą jak wspomniałem skonfigurujemy na samym końcu powinna wam wystarczyć. Jednak jeżeli nie, możecie doinstalować sobie jeszcze jedną (
klik!), po ich zainstalowaniu wszystko powinno grać. Jednak zapytacie mnie "co, jeżeli nie mam tego pie... wordpressa?" - sprawa do rozwiązania prosta. Ponownie przechodzimy do pliku .htaccess, i tam wklepujecie taki kod:
Kod:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE application/x-httpd-php
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
Jednak oczywiście nie każdy serwer obsługuje moduł deflate, dlatego możemy dodać wpis który włączy u nas kompresję Gzip. Jest ona ważna, dlatego i tak warto ją dodać. I tutaj uwaga użytkownicy Wordpressa - wtyczki które niby taką kompresję włączają lecą w kulki, dlatego też to zróbcie. W pliku .htacces wklepujemy taki kod:
Kod:
<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>
i wszystko gra, kompresja gZip włączona. Proste?
Proste!
Zmniejsz JavaScript, CSS, HTML i inne
Teraz trochę bardziej poszperamy w kodzie. Jeżeli macie wordpressa, przechodzicie do wygląd -> Edytor, tam macie cały kod. Jeżeli macie stronę w HTML, po prostu przechodzicie do plików przez FTP. Patrzymy o co czepia się google, wygląda to przykładowo w ten sposób:
![[Obrazek: 5sX8sAW.png]](https://i.imgur.com/5sX8sAW.png)
Kopiujecie link, w linku na samym końcu pisze o jaki skrypt chodzi, przykładowo dla style.css będzie to (
http://twojastrona.pl/costam/style.css) - w takim razie, jeżeli google mówi nam że taki kod nie jest zoptymalizowany - zrobimy to. Przechodzimy do pliku, kopiujemy
cały kod i jeżeli chodzi o css'y polecam tą stronę (
klik!), wrzucacie cały skopiowany kod, na dole zaznaczacie
Highest, klikacie Compress i wychodzi wam skompresowany kod. Kopiujecie go, wklejacie w miejsce gdzie poprzednio był kod niezoptymalizowany i zapisujecie. Spokojnie, nic się nie posypie, będzie działało tak jak działało. Jednak teraz kod jest strasznie nieczytelny, więc jeżeli będziecie chcieli coś później zmienić przechodzicie ponownie na tą stronę, wklejacie nieczytelny kod i zaznaczanie Low, potem Compress i macie normalny kod. Zmieniacie to co chcecie i dalej kompresujecie.
No dobra, a jeżeli chodzi o HTML (HTML+PHP i inne cuda też) przechodzicie tutaj (
klik!) no i ta sama taktyka co przedtem. Wklejacie, kompresujecie, przeklejacie. To samo tyczy się plików .js, ta strona także je obsługuje, po prawej stronie zmieniacie po prostu code type na JavaScript, wklejacie i kompresujecie.
Proste? Proste! W ten sposób zoptymalizowaliście sobie kod, przez co wasza strona zmniejszyła swój rozmiar.
Nadaj priorytet widocznej treści oraz wyeliminuj blokujący renderowanie kod JavaScript i CSS z części strony widocznej na ekranie oraz skróć czas odpowiedzi serwera
---KONFIGURACJA AUTOPTIMIZE----
Tutaj na wordpressie pomoże nam wtyczka
Autoptimize. Przechodzimy do niej, klikamy w prawym górnym rogu "Pokaż ustawienia zaawansowane" i wyświetla nam się dużo opcji. Zaznaczamy te opcje (jeżeli jakiejś opcji nie wymieniam, to znaczy że ma być
odznaczona):
- Optymalizuj kod HTML? - TAK
- Optymalizuj kod JavaScript? - TAK
- Optymalizuj kod CSS? - TAK
- Usunąć Google Fonts? (Właśnie one powodują komunikat tego błędu, ja z tych Fonts'ów w ogóle nie korzystam więc zaznaczam tutaj) - TAK
- Łącz również CSS w treści strony? - TAK
No i to by było na tyle, większość błędów zniknie. Jednak gdy zainstalujemy daną wtyczkę ona doda niezoptymalizowane skrypty css (co za parodia, cnie?), przez co musimy zaznaczyć także jeszcze jedno pole w Autoptimize:
- Włączyć CSS w treść strony i opóźnić jego ładowanie? - TAK
Rozwinie wam się białe pole, w którym wklejacie niezoptymalizowany kod dotyczący wtyczki
autoptimize. Jak do niego przejść już wiecie, więc tego nie będę tłumaczył.
Jednak co zrobić, jeżeli nie mamy strony na wordpressie?
Możecie umieścić krótki kod .js, .css w kodzie w html'u! Robicie to w prostu sposób, wszystko dokładnie jest wytłumaczone na stronie samego google, o tutaj:
klik! no i jeszcze tutaj:
klik!
Optymalizacji tego kodu tutaj nie będę opisywał, ponieważ po prostu powieliłbym to co jest napisane na googlu. Jeżeli chodzi o Nadaj priorytet widocznej treści - prosta sprawa, wyświetla się gdy po prostu odkładacie ważny kod na wczytywanie później. Ogólnie na wordpressie autoptimize rozwiązuje ten problem po skonfigurowaniu, na HTML'u jeżeli nic nie zmaściliście nie powinien się wyświetlać... Jeżeli chodzi o czas odpowiedzi serwera - tak samo, Autoptimize problem rozwiązuje czyszcząc Cache. Jeżeli macie stronę na HTML zazwyczaj jest chuda więc błąd nie występuje, a jeżeli to po prostu korzystacie z słabego serwera, co więcej wam mogę poradzić - zmieńcie wtedy dostawcę.
Po dokonaniu wszystkich rzeczy które wymieniłem, wasz wynik będzie wyglądał w ten sposób:
![[Obrazek: kvYQbnQ.png]](https://i.imgur.com/kvYQbnQ.png)
Pamiętajcie że jest to narzędzie Googla, a jeżeli samemu Google'owi nasza strona się podoba, będzie podobać się tym bardziej w wyszukiwarce!
Tak więc to koniec pierwszej części, czyli optymalizacji Google PageSpeed Insights.
2) Audyt SEO SecureGlass
Już 18.12.2017 będzie tutaj opisane jak zoptymalizować stronę pod Audyty SEO!
Witaj serdecznie forum o zarabianiu Zarabiam.com
/
[v1] Optymalizacja strony pod SEO - przyśpiesz swoją stronę! ![[Obrazek: Bi8JyTJ.png]](https://i.imgur.com/Bi8JyTJ.png)
zdjęcia poznikały napisy poznikały itd
Co do kompresji plików css - tutaj ważne jest aby wszystko dokładnie skopiować, potem wkleić, nie zostawić żadnego taba czy dodatkowej literki bo to wszystko psuje ponieważ kompresor wtedy ją uznaje. Jeżeli kompresujesz pliki typu style.css wszystko działa, kod wczytuje się tak samo jak przedtem. Coś musiałeś zmaścić ![[Obrazek: kiJN8sN.png]](https://i.imgur.com/kiJN8sN.png)
