Witaj gościu! Zaloguj się lub Zarejestruj aby móc korzystać ze wszystkich funkcjonalności jakie oferuje to forum! Rozpocznij zarabianie przez internet, poznaj korzysci pracy w domu! Rejestracja i korzystanie z forum jest całkowicie darmowe!
Praca w domu - Dodatkowa Praca - Zarabianie przez Internet
Poradnik
[v1] Optymalizacja strony pod SEO - przyśpiesz swoją stronę! - Wersja do druku

+- Praca w domu - Dodatkowa Praca - Zarabianie przez Internet (https://zarabiam.com)
+-- Dział: Pozycjonowanie (/Forum-Pozycjonowanie-398)
+--- Dział: Pozycjonowanie i Optymalizacja (/Forum-Pozycjonowanie-i-Optymalizacja-341)
+--- Wątek:
Poradnik
[v1] Optymalizacja strony pod SEO - przyśpiesz swoją stronę! (/Temat-v1-Optymalizacja-strony-pod-SEO-przyspiesz-swoja-strone-153169)

Strony: 1 2 3

[v1] Optymalizacja strony pod SEO - przyśpiesz swoją stronę! - painstream - 16-12-2017 22:43

[Obrazek: Bi8JyTJ.png]

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]

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]

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]

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]

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!

RE: [v1] Optymalizacja strony pod SEO - przyśpiesz swoją stronę! - Shadecaster2 - 17-12-2017 13:26

fajnie że przyspieszyło stronę ale nie wiem jak innym mi się strona rozwaliła Big Grin zdjęcia poznikały napisy poznikały itd

RE: [v1] Optymalizacja strony pod SEO - przyśpiesz swoją stronę! - pspsga - 17-12-2017 13:39

Na Wordpress Ci się strona rozsypała , czy na FTP ?

RE: [v1] Optymalizacja strony pod SEO - przyśpiesz swoją stronę! - Shadecaster2 - 17-12-2017 13:45

na wordpress i to tak totalnie przywrocilem stare pliki ale dalej cos nie tak hm

RE: [v1] Optymalizacja strony pod SEO - przyśpiesz swoją stronę! - painstream - 17-12-2017 13:53

(17-12-2017 13:45)Shadecaster2 napisał(a):  na wordpress i to tak totalnie przywrocilem stare pliki ale dalej cos nie tak hm

Co dokładnie zmieniałeś, jakie pliki? Po jakim dokładnie działaniu strona się posypała?

RE: [v1] Optymalizacja strony pod SEO - przyśpiesz swoją stronę! - Shadecaster2 - 17-12-2017 14:15

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>

po tym nie miałem zdjęć, na google chrome dzialalo wszystko ale po wejsciu na opera/firefox/explorer nie mialem zadnych zdjec

a potem jak zmniejszałem pliki css zaczęły sie robić błędy w skryptach i nie ładowały się wszystkie skrypty

RE: [v1] Optymalizacja strony pod SEO - przyśpiesz swoją stronę! - painstream - 17-12-2017 14:22

(17-12-2017 14:15)Shadecaster2 napisał(a):  
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>

po tym nie miałem zdjęć, na google chrome dzialalo wszystko ale po wejsciu na opera/firefox/explorer nie mialem zadnych zdjec

a potem jak zmniejszałem pliki css zaczęły sie robić błędy w skryptach i nie ładowały się wszystkie skrypty



Ten skrypt zmienia po prostu czas wygaśnięcia plików. Na innych przeglądarkach wystarczyło klikąć ctrl + r aby odświeżyć albo wyczyścić ciasteczka, wszystko by działało Wink 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ć Wink Pamiętaj że strona csscompressor służy tylko do plików które kończą się na .css! Co do zmniejszania HTML, wordpress korzysta z HTML + PHP głównie jeżeli kod kończy się na .php - strona gdy wprowadzasz inny kod przypomina o tym, że jest wprowadzony inny kod niż sam HTML. Na stronie do zmniejszania zaznaczyłeś po prawej stronie że właśnie taki typ kodu wprowadzasz? W tym miejscu:

[Obrazek: kiJN8sN.png]

RE: [v1] Optymalizacja strony pod SEO - przyśpiesz swoją stronę! - pasiak11 - 19-12-2017 10:23

Naprawdę świetny poradnik!

RE: [v1] Optymalizacja strony pod SEO - przyśpiesz swoją stronę! - jlde - 19-12-2017 17:24

Poradnik świetny, od wczoraj z niecierpliwością czekał na cześć o Audycie SEO Wink

RE: [v1] Optymalizacja strony pod SEO - przyśpiesz swoją stronę! - painstream - 19-12-2017 19:45

(19-12-2017 17:24)jlde napisał(a):  Poradnik świetny, od wczoraj z niecierpliwością czekał na cześć o Audycie SEO Wink

Wybacz, zapiłem dwa ostatnie dni i dzisiaj umieram, na dniach go zaktualizuję, na pewno o nim nie zapomnę Wink