Gyorsítsa fel az oldal betöltést
Gyorsítsa fel az oldal betöltést
Miért kellene foglalkoznia az oldal gyorsaságával? A Kissmetrics szerint egész 47% -a a felhasználóknak elhagyja az oldalt 2 másodperces betöltés után, 40%-a pedig 3 másodperc után.
A Google oficiálisan bevonta a web gyorsaság paramétert a kereső algoritmusba már 2010 áprilisában. Több saját belső kutatás alapján indult ki, amelyek kimutatták, hogy lassú weboldalon a felhasználók sokkal kevesebb időt töltenek.
Röviden összefoglalva: kevesebb „lepattanó” látogató (bounce rate arány), jobb pozíció a keresőben (SEO), a látogató több tartalmat tekint meg és nyugodtabb lesz, ha nem fog kellenie 10 másodpercet várni erre.
Amennyiben az FTP szerveren nem látja az adott fájlt, a FileZilla-ban válassza ki a felső menüben a „Server”-t és kattintson a „Force showing hidden files”-ra.
Hogyan teszteljük le az oldal gyorsaságát
Az internet számos lehetőseget kínál szabadon elérhető eszközökre a web gyorsaságának mérésére:- PageSpeed Insights – egyenesen a Google Developers műhelyéből, analyzálja a web mobil verzióját is.
- GTmetrix – nagyon ügyes és áttekinthető eszköz, amely útmutatókat is kínál, hogyan javítsunk weboldalunk gyorsaságán.
- WebPageTest – beállíthatja, melyik városban fog végbemenni a teszt és milyen berendezésen (iPhone, iPad, Nexus 5/7, …). Asztali teszt esetén kiválaszthatja a keresőt (Internet Explorer esetében a verziót is).
Milyen értékekre kell összpontosítani
- Page Load Time / az oldal betöltés ideje – rögtön az első mutató, amely nagyon fontos. Ha ez a szám több mint 7 másodperc, akkor Önnek joggal lesznek rémálmai. 2 másodpercen alul már szép teljesítménynek számít. Ha a betöltés ideje 1 másodpercig tart, akkor gratulálunk (abban az esetben, ha az oldalon valós tartalom található).
- Total Page Size / az oldal teljes nagysága – vagy „mennyi dolgot kell lehúznia a látogatónak a számítógépbe”. Ismét, minél kisebb szám, annál jobb. Ha az oldal nagysága 7MB, tükörbe kellene néznie és mélyen elgondolkodnia. 1,5 MB és kisebb számok már szépek, de a mobil felhasználók továbbra is átkozni fogják, ha nincs 4G-jük.
- Requests / követelmények mennyisége – javascript ide, css oda. Ez minden olyan fájl összesége, amelyekre szüksége van az oldalnak a megjelenítéshez. Ott található az összes betűtípus, kép, szkript, Facebook plugin… Minél kisebb szám, annál jobb. Statikus oldalaknak Javascript efektekkel kb. 10-15 követelményt kellene tartalmazniuk. WordPress oldalaknak kb. 25-40-et. WordPress WooCommerce-l vagy prémium sablonnal 70-80-at. Ha több mint 150 követelménye van, át kellene néznie a pluginok és szkriptek mennyiségét (néhány WordPress plugin nem a legjobban van megírva és maguktól képesek rengeteg „szemetet” produkálni Önnek).
Munkára fel!
Ha WordPress CMS-t használ, ne halmozza el oldalát 50 pluginnal, amik semmit se érnek. Amennyiben valamelyik pluginra nincs szüksége, kapcsolja ki. Csak azokat a pluginokat használja, amikre szüksége van. Az oldal cache-elésére használhat WP Super Cache plugin-t vagy W3 Total Cache-t. Mindkettő jó, de mindig csak egyet telepítsen. Ügyesbbek részére – kerülje ki a prémium sablonokat és amennyiben lehetséges, írjon saját sablonokat WordPress-ben. Prémium sablonokban feleslegesen sok JavaScript és CSS található, amelyek feleslegesek és csak leterhelik az oldalt. Jó kezdőpontként szolgálnak az alap WordPress sablonok, melyeket úgy tud módosítani, hogy felismerhetetlenek lesznek. Néha kis változás is elég WOW hatás elérése érdekében. Változás alatt a .hatccess fájl módosításást értem. A .htaccess fájlt a web root könyvtárában leli meg. Ahhoz, hogy hozzáferjen ehhez a fájlhoz, tudnia kell az FTP szerverre a hozzáférési jelszavakat. Miután bejelentkezik az FTP-re (pl. a FileZilla programon keresztül), keresse meg az adott fájlt és húzza le a gépbe.
Amennyiben az FTP szerveren nem látja az adott fájlt, a FileZilla-ban válassza ki a felső menüben a „Server”-t és kattintson a „Force showing hidden files”-ra.
Alap .htaccess WordPress-ben:
Ha nincs WordPress CMS-e, valószínűleg a .htaccess üres lesz vagy egyáltalán nem fogja meglelni.# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress
A .htaccess-be adja hozzá a következőt magic-et:
Amenyiben van WordPress-e, ezt a magic-et rakja be az alap .htaccess mögé (ne törölje ki azt, ami már ott van). Ha nincs WordPress-e, helyezze a kódot a .htaccess-be. Ha ilyen fájlja sincs, akkor nyissa meg a jegyzetfüzetet, rakja be a kódot és mentse el „.htaccess” név alatt. Fájl típusának adja meg txt. helyett az „All files”-t és „Encoding”-nak állítsa be az „UTF-8”-at (ezen futnak a szerverek és a legbiztonságosabb módnak számít).
## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
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 text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>
## EXPIRES CACHING ##
## compress text, html, javascript, css, xml:##
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
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
AddType x-font/otf .otf
AddType x-font/ttf .ttf
AddType x-font/eot .eot
AddType x-font/woff .woff
AddType image/x-icon .ico
AddType image/png .png
<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>
<IfModule pagespeed_module>
ModPagespeed on
ModPagespeedEnableFilters
extend_cache,combine_css,combine_javascript,collapse_whitespace,move_css_to_head
</IfModule>
# BEGIN Cache-Control Headers
<IfModule mod_headers.c>
<filesMatch ".(ico|jpe?g|png|gif|swf)$">
Header set Cache-Control "public"
</filesMatch>
<filesMatch ".(css)$">
Header set Cache-Control "public"
</filesMatch>
<filesMatch ".(js)$">
Header set Cache-Control "private"
</filesMatch>
<filesMatch ".(x?html?|php)$">
Header set Cache-Control "private, must-revalidate"
</filesMatch>
</IfModule>
# END Cache-Control Headers
Probléma: Bejátszottam új .htaccess-t és semmit sem változott a gyorsaság
A gyorsaságot a fent említett eszközök segítségével mérje. Szabad szemmel és becache-ezett webbel nem fogja észrevenni a változást. Ha az eszközök se nyilvánítanak ki változást, megtörténhet, hogy a weboldala Nginx szervereken fut (a fenti kódok Apache-ra vannak). Dobjon ki mindent, amit beírt és helyettesítse ezzel:server {
gzip on;
gzip_types text/html text/css application/x-javascript text/plain text/xml image/x-icon;
}
location ~* .(jpg|png|gif|jpeg|css|js)$ {
expires 500h;
}
