Portltechnolgia BSc 12.

SEO

Tartalom
 SEO  Szemantikus web  Oldal optimalizlsi s teljestmnyjavtsi technikk

SEO
 Search engine optimization  Keres marketing  Clja, hogy a weboldalt a webes keres k megtalljanak s a tallati listban minl el rbb mutassanak.

Keres motorok
 4 legismertebb keres motor  10-20 tallat a mrvad  SEM (search engine marketing keres marketing)
azok a mdszerek, technikk, melyek rvn nvelhet a keres oldalak fell bejv forgalom

 Crawlerek

Ajnlott technikk
 Konkurencia felmrse  Relevns kulcsszavak kitallsa  Domain nv  Meta tag-ek  Linkek
PageRank: oldal relevancija

SEO arany hromszge

 Szem vizsglat bebizonytotta
Els 3 tallat a legjobb

Arany hromszg II.

Linkek

SEO lehet sgek a Joomlban

 Search Engine Friendly URLs
index.php/more-about-joomla

 Use Apache mod_rewrite

index.php eltntetse az URL-b l

 Add suffix to URLs - .html az URL vgre

Metadata Settings

<meta name="keywords" content="joomla, Joomla" /> <meta name="description" content="Joomla! - the dynamic portal engine and content management system" />

SH404SEF
 Joomla plug-in  Search engine friendly  Tmogatott komponensek
VirtueMart Fireboard Community Builder

Szemantikus web
 Cl: a gpek szmra is elemezhet legyen az Internet tartalma  Az internetre kerl informci metaadatokkal val elltsa  http://www.webdesignfromscratch.com/htmlcss/list-of-html-tags-with-semantic-usage/  http://brainstormsandraves.com/articles/semantics/ structure/

Plda
 <p>As Bill Gates said, &quot;640K should be enough for anybody.&quot;</p>

 <p>As <cite>Bill Gates</cite> said, <q cite="http://tinyurl.com/9dr2t">640K should be enough for anybody.</q></p>

Cloud computing

14

Cloud computing (Szmtsi felh )

 j fogalom  olyan llomnyokkal s programokkal dolgozunk, melyek fizikailag nem a sajt gpnkn vannak, hanem az interneten  egy ismeretlen helyen vannak, valahol a felh ben  A kvetkez lps az, hogy az adatokat feldolgoz nagy alkalmazsok is az interneten vannak, a sajt eszkzn csak egy kis terjedelm , n. kliens-alkalmazs fut
15

CC el nyei/htrnyai
 Adatok
e-mail naptrbejegyzsek cmjegyzkek

 El nyk
Brhonnan elrhet ek Akkor se vesznek el, ha a szmtgpnk lefagy

 Htrnyok
illetktelenek hozz tudnak frni nem biztos, hogy psgben marad
16

Content Delivery Network

17

CDN
 Adatok msolatait tartalmazza  A hlzat klnbz rszein helyezkedik el  Az igny felmerlshez legkzelebbi szerver szolgl ki => maximum svszlessg  A kliens az adat egy hozz kzel es msolatt ri el  CDN nlkl minden kliens ugyanazt a szervert ri el
18

P2P CDN
 Nem egy tradcionlis CDN technolgia  Alacsony kltsggel lehet hatkonyan vgfelhasznlkhoz adatot eljuttatni  Nagy igny esetn m kdik jl  Eleinte szerverr l tlti le az adatot, majd kritikus tmeg elrse utn csak ms kliensekt l

YSlow!

20

Oldal teljestmnye
 Oldal teljestmnynek mrse
Yahoo Yslow (2007. Jlius) Google Page Speed

 Yahoo mrnkei (front-end engineer)

22 kritikus pontot llaptottak meg, melyek hatssal vannak a portl teljestmnyre http://developer.yahoo.com/yslow/matrix/ YSlow for Mobile

Smush.it
 Smush.it kpeket tmrt  Tmrts utn elkszt egy reportot, hogy hny szzalkkal kevesebb helyet foglalnak a kpek  Lehetsges, hogy formtumot vlt  A kpek zip fileban letlthet ek  http://www.smushit.com/ysmush.it/
22

HTTP lekrsek minimalizlsa

 A vlaszid 80%-a a kliensoldalon veszik el
Vrunk a klnbz komponensek letltsre

 Megoldsok
Tartalmak kombinlsa (HTML-ben JS, CSS) CSS Sprite-ok, image map-ek hasznlata
tbb kp egy kpen DNS lekrsek szma kevesebb

Inline kpek: a kpet is a HTML-be gyazzuk be (data attribtum)

Content Delivery Network hasznlata

 A kliens kzelsge a szerverhez befolysolja a vlaszid t  A tartalmat klnbz helyekre kell elhelyezni  CDN
Web szerverek a Fld klnbz helyein

 20%-kal cskkentheti a vlaszid t

Expires or Cache-control header

 Statikus tartalmak lejrati ideje: ExpiresDefault "access plus 10 years
Ha vltozik a tartalom, vltoztatni kell a nevt, hogy letlt djn az j llomny

Tmrts - GZip
 Ha a kliens tmogatja a tmrtst: Accept-Encoding: gzip, deflate  90%-a a bngsz knek tmogatja  Gzip 70%-ot tmrt tlagosan

CSS
 Head tag-ba linkels  Fokozatosan jelenik meg (progressive)  Ha a dokumentum vghez tesszk
akkor nhny bngsz (IE) nem jelenti meg a tartalmat, nehogy ktszer kelljen jrarajzolnia a lapot

 HTML szabvny

Scriptek az oldal vgre

 Problma forrsa, hogy a scriptek blokkoljk a tbbszl letltst (HTTP1.1 szerint max 2/domain)  Kpeket tbb domainr l is lehet tlteni  Nha nehzkes (document.write)  deferred JS
http://www.websiteoptimization.com/speed/twe ak/defer/

Kerljk a CSS kifejezseket

 IE5-IE7  background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );  Sokszor rtkel dik ki:
Scroll Resize Egr

CSS/JS legyen kls file-ban

 Cache-elhet ek lesznek  HTML mretcskkens

Cskkentsk a DNS lekrseket

 DNS: domain -> IP  1 lekrdezs = 20-120 ezredmsodperc  Cache
IE 30 perc FF 1 perc

 Lekrdezsek szma = klnbz domainek szma a weblapon

Minify JS & CSS

 felesleges karakterek eltvoltsa
Kommentek Whitespace (space, newline, tab) JSMin, Yui Compressor 21% cskkens

 Obfuscate (sszezavar/kever)
Vltozk elnevezse 25% cskkens

Kerljk az tirnytsokat
 Felesleges adatcsere
JS Webszerver

HTTP/1.1 301 Moved Permanently Location: http://example.com/newuri Content-Type: text/html

ETag
 Entity Tags annak meghatrozsa, hogy a cache-ben lv file megegyezik a szerveren lv vel  Apache s IIS alapbl tmogatja HTTP/1.1 200 OK Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT ETag: "10c24bc-4ab-457e1c1f Content-Length: 12195

Legyen cache-elhet az AJAX

 Instant visszajelzs  Jelent s forgalomnvekedst eredmnyezhet  Javts
Gzip Kevesebb DNS lekrs Minify JS tirnytsok kerlse Etag hasznlata

 Jv beli Expires Header

Puffer korai rtse

 200-500 ms-ig tarthat a HTML elksztse a szerveren, amg a bngsz vr  PHP flush utasts elkldi a flig legenerlt outputot ... <!-- css, js --> </head> <?php flush(); ?> <body> ... <!-- content -->

Hasznljunk GET AJAX lekrseket

 POST
Header s data kt klnbz csomagban lesz elkldve

 GET
1 TCP csomagban lesz elkldve (cookie-k mrett l fgg en) IE-ben 2K mrethatr

Kpek
 Megfelel kpformtum hasznlata
JPG, GIF(paletta), PNG Optimalizls (EXIF trlse)

 CSS kpek optimalizlsa  http://www.google.hu/images/nav_logo28.png

Nincs kptmretezs
 Torzt  Felesleges informci <img width="100" height="100" src="mycat.jpg" alt="My Cat" />

Cookie mentes domainek

 Kp lekrsekor is elkldi a bngsz a szervernek a cookie-kat, feleslegesen  Proxy-k nem biztos, hogy cache-elik a cookie-s lekrseket  static.example.com  YouTube ytimg.com

Iframe hasznltnak cskkentse

 El nyk
3. fl ltali lass oldalak nem befolysoljk az oldalunkat Security sandbox Prhuzamos letlts

 Htrnyok
Drga , mg ha res is Blokkolja a onload esemnyt Nem szemantikus

Tbb domain-t hasznljunk

 Max 2-4 domain (DNS lekrdezs miatt)  Prhuzamos letltsek kihasznlsa miatt

Komponensek el tltse
 El tltssel a vrakozsi id t ki tudjuk hasznlni  Sokszor hasznlt elemeknl el fordulhat, hogy mr cache-elve van s sokkal gyorsabban fog letlt dni az oldal  El tltsi tpusok:
Felttel nlkli: Onload esemny utn tltnk mindent (google.com sprite image) Feltteles: felhasznltl fggvnyben (search.yahoo.com) El zetes: j design el tt mr letltetik az elemeket a rgi weblappal

Komponensek uttltse
 Mi az amire mindenkppen szksgnk van az oldal megjelentshez?  JS nlkl is m kdjn az oldal  Diszkrt JS hasznlata

Diszkrt javascript
 HTML s a m kds klnvlasztsa  Ha a felhasznl bngsz je nem tmogatja vagy le van tiltva a Javascript, az oldal m kdik <input type="text" name="date" onchange="validateDate()" /> <input type="text" name="date" id="date" /> $(document).ready(function() { $('input').change(validateDate); } function validateDate() {}

45

Egyb I.
 Ne hasznljunk 404-es oldalt
Felhasznl lmny lasstsa Szerver er forrsokat pazarol

 Cookie-k mretnek cskkentse

Domain korltozs expire header megfelel hasznlata

Egyb II.
 DOM elrs minimalizlsa  @import helyett <link> hasznlata
@import IE-ben olyan mintha a lap vgn tltennk le az llomnyt

 Filterek mell zse (AlphaImageLoader)  Favicon legyen 1K alatt, cache-elhet  Legyenek a komponensek tmrtetlenl 25K alatt (iPhone)  Begyazott komponensek hasznlata  Ne hasznljunk IMG tag-et res src-vel

Alternatvk
 http://www.webpagetest.org/  http://code.google.com/intl/huHU/speed/page-speed/  http://www.woorank.com/  http://websitegrader.com/

Feladatok
 Teleptsd a Firebug-ot s a YSlow-t!  Elemezd az albbi oldalakat:
Sajt Joomla teleptsed Top 3 magyar/klfldi hrportl
Index, Origo, Bbc.co.uk, n24.de,

Yahoo.com, Google.com

 Egy kivlasztott oldal javtsra tegyl javaslatot!

Google 404
     HTML5 doctype idz jelek hinya zr tagek hinya head, body tagek hinya injektlt base64 kdolt kp