{"id":5605,"date":"2009-06-04T09:37:06","date_gmt":"2009-06-04T07:37:06","guid":{"rendered":"https:\/\/www.dreamsworld.it\/emanuele\/?p=5605"},"modified":"2016-05-17T12:35:14","modified_gmt":"2016-05-17T10:35:14","slug":"costruire-un-tema-ottimizzazione-del-codice","status":"publish","type":"post","link":"https:\/\/www.dreamsworld.it\/emanuele\/2009-06-04\/costruire-un-tema-ottimizzazione-del-codice\/","title":{"rendered":"Costruire un tema: ottimizzazione del codice."},"content":{"rendered":"

Per mancanza di tempo, sono passati due mesi dall’ultimo post della serie “Realizziamo un tema per WordPress da zero”<\/em> riguardo le attenzioni che ho avuto io durante la costruzione del mio nuovo template, cos\u00ec… eccomi di nuovo qui.<\/p>\n

Facendo un veloce resoconto, nelle “precedenti puntate”<\/em> abbiamo parlato di layout<\/a>, di scelta delle dimensioni<\/a> e dei colori<\/a>, abbiamo parlato del testo (dimensioni e lunghezza<\/a>) e degli effetti speciali<\/a> che possono essere applicati ad una pagina per renderla pi\u00f9 “interattiva<\/em>” o quanto meno, pi\u00f9 al passo con le tendenze del web (qualcuno lo chiama 2.0<\/em>).<\/p>\n

Bene… il passo conclusivo (o quasi<\/em>) consiste nel mettere insieme<\/strong> tutto ci\u00f2 che abbiamo imparato in un documento che dovr\u00e0 esser letto – potenzialmente – dai browser dell’intero pianeta<\/em>. Ho gi\u00e0 parlato delle difficolt\u00e0 (e dell’importanza) del rendere un tema cross-browser<\/em> e cio\u00e8 capace d’esser letto da browser diversi (cellulari, netbook, etc.<\/em>) ma non dobbiamo neanche dimenticare un ulteriore aspetto delle nostre pagine: l’accessibilit\u00e0 passa anche da un buon codice<\/strong>.<\/p>\n

La sintassi di una pagina \u00e8 paragonabile ai costrutti lessicali di una lingua<\/strong>. “Io <\/em>posso <\/em>non\u00a0 parlerei cos\u00ec”<\/em>. Ecco. Usare costrutti errati o posizionati erroneamente pu\u00f2 portare a difficolt\u00e0 di interpretazione<\/strong> da parte dei browser tanto quanto vi \u00e8 venuto difficile capire il senso di quella frase.<\/p>\n

Il motore interno del vostro browser web, quando riceve una pagina, analizza prima i tag (che sono le indicazioni della nostra sintassi, per continuare il paragone) e in base a quelli costruisce<\/strong> un DOM<\/a> in cui posiziona i vari oggetti.<\/p>\n

Per capire meglio cosa succede durante<\/strong> il caricamento di una pagina date un’occhiata al seguente video.<\/p>\n

\/\/www.dreamsworld.it\/video\/2009-06-01_gecko_rendering_mozilla.mp4<\/a><\/video><\/div><\/div>\n

Questa operazione prende il nome di reflow di una pagina<\/strong> (quello nel video \u00e8 il reflow di Gecko per Mozilla.org<\/em>) e, per via della struttura dell’html, avviene ricorsivamente sempre pi\u00f9 in profondit\u00e0<\/strong>. Da questo si capisce anche perch\u00e9 solitamente su pagine molto pesante e piene di elementi i computer con processore pi\u00f9 datato impieghino qualche istante in pi\u00f9 nel visualizzare la pagina.<\/p>\n

Ecco che la parola chiave di un buon codice diventa ottimizzazione<\/strong>.<\/p>\n

L’ottimizzazione, passa per prima cosa, dalla validazione del codice<\/strong> secondo gli standard concordati dal consorzio W3<\/a>. Avere delle pagine con codice sintatticamente corretto aiuta sicuramente i browser durante il loro compito. E’ vero che i browser pi\u00f9 diffusi fanno miracoli<\/strong> e spesso accettano codice non del tutto corretto (ad esempio un tag <div> inserito dentro un tag <a><\/em>) ma evitare problemi alla lunga paga<\/strong>.<\/p>\n

Inoltre, non dobbiamo dimenticarci dei motori di ricerca<\/strong>. C’\u00e8 chi dice che internet senza Google<\/em> sarebbe ancora una grossa e asettica web-directory. Avere una pagina facilmente accessibile agli spider<\/strong> dei motori di ricerca significa ricevere un buon punteggio nelle loro liste di “siti preferiti” (semplificando di molto il discorso<\/em>) e un buon punteggio si traduce in una buona indicizzazione<\/strong> e… sono poche le persone che costruiscono un sito web senza volere che sia visibile (cos\u00ec come sono poche le persone che usano il balcone per nascondersi!<\/em>).<\/p>\n

Dunque, una regola fondamentale da ricordare \u00e8: i motori di ricerca apprezzano pagine leggere<\/strong>, veloci da caricare e sintatticamente corrette.<\/p>\n

Questo non mette in secondo piano i contenuti<\/strong> che rimangono l’elemento principale della pagina (figurarsi che possa importare a Google o chi per lui una pagina vuota ma correttissima sintatticamente<\/em>) ma, a parit\u00e0 di “valore” del contenuto, il contenitore<\/strong> migliore verr\u00e0 preferito.<\/p>\n

Un po’ come quando esco da casa e devo scegliere tra Porsche e Ferrari… (sigh, \u00e8 una metafora pi\u00f9 astratta delle cose di cui stiamo parlando!<\/em> :-D).<\/p>\n

Un altro aspetto da tenere in considerazione \u00e8 la struttura del codice<\/strong> che pubblichiamo.<\/p>\n

I frame<\/a> ad esempio, sono deprecati<\/strong> e non credo esistano ragioni valide per usarli ormai. Oltre a questo, cerchiamo di pubblicare i contenuti pi\u00f9 importanti nella parte pi\u00f9 alta del documento<\/strong>, in modo da far si che gli spider gli diano maggiore importanza (com’\u00e8 giusto che sia). Ovviamente possiamo giocare poi con il posizionamento grafico<\/strong> tramite i fogli di stile<\/a>.<\/p>\n

Realizziamo un header compatto e completo. I motori di ricerca sfruttano quei dati per avere qualche informazione in pi\u00f9 ma abusarne non serve a nulla<\/strong>… per questo non facciamo mancare il tag “title<\/em>” ad esempio ma non abusiamo del metatag “description<\/em>” perch\u00e9 spesso i motori di ricerca ignorano<\/strong> quelle keyword (che considerano viziate in partenza<\/em>).<\/p>\n

Evitiamo inoltre l’uso smodato di risorse esterne. Caricare contenuti esterni (immagini, javascript, video flash, audio…<\/em>) rallenta il caricamento della pagina<\/strong> e oltre a non essere apprezzato dai motori di ricerca (Google<\/em> tramite i webmasters tools<\/a> vi permette di monitorare il tempo medio di caricamento<\/strong> delle vostre pagine), sicuramente fa perdere la pazienza ai visitatori<\/strong> (che alla fine, rimangono il vostro riferimento). Cerchiamo di ospitare sul nostro hosting il maggior numero possibile di contenuti.<\/p>\n

A quest’ultimo aspetto ovviamente si ricollega la scelta dell’hosting<\/a> che, sicuramente, va fatta anche in considerazione del peso dei contenuti che vogliamo pubblicare.<\/p>\n

Un altra piccola attenzione pu\u00f2 esser quella di comprimere<\/strong> i fogli di stile e collegarli all’interno del documento come unico file. Per capirci meglio, nel mio blog, il CSS \u00e8 segnalato al browser tramite un’unica riga<\/strong>:<\/p>\n

\r\n<link rel="stylesheet" href="\/\/www.dreamsworld.it\/emanuele\/wp-content\/themes\/emanuele-theme\/style.css" type="text\/css" media="screen" \/><\/pre>\n
Il file style.css <\/em>al suo interno, per\u00f2, richiama i vari fogli di stile:<\/p>\n
@import url("\/\/www.dreamsworld.it\/emanuele\/wp-content\/themes\/emanuele-theme\/css\/main.css");\r\n@import url("\/\/www.dreamsworld.it\/emanuele\/wp-content\/themes\/emanuele-theme\/css\/header.css");\r\n@import url("\/\/www.dreamsworld.it\/emanuele\/wp-content\/themes\/emanuele-theme\/css\/sidebar.css");\r\n@import url("\/\/www.dreamsworld.it\/emanuele\/wp-content\/themes\/emanuele-theme\/css\/footer.css");<\/pre>\n
Questa scelta, oltre a favorire gli spider (che durante la scansione saltano una riga e non incontrano altre risorse esterne da scartare<\/em>), favorisce anche la manutenzione del blog<\/strong>. Se volessi cambiare nome o inserire un nuovo foglio di stile, mi baster\u00e0 effettuare le opportune modifiche dentro style.css<\/em> senza dovermi ricordare dove l’avevo linkato.<\/p>\n
Insomma, tanti piccoli accorgimenti che aiutano a mantenere sotto controllo<\/strong> sia il peso della pagina che la sua struttura.<\/p>\n
Voi, avete qualche suggerimento da darmi? \ud83d\ude42<\/p>\n
Emanuele<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"
Per mancanza di tempo, sono passati due mesi dall’ultimo post della serie “Realizziamo un tema per WordPress da zero” riguardo le attenzioni che ho avuto io durante la costruzione del mio nuovo template, cos\u00ec… eccomi di nuovo qui. Facendo un … Leggi ancora →<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"activitypub_content_warning":"","activitypub_content_visibility":"","activitypub_max_image_attachments":4,"activitypub_interaction_policy_quote":"anyone","activitypub_status":"","footnotes":""},"categories":[4],"tags":[1282,726,84,508,494,483,724,776,320,485,657,1281,1279,529,1280,490,491,526,528,493],"class_list":["post-5605","post","type-post","status-publish","format-standard","hentry","category-internet","tag-access","tag-benchmark","tag-browser","tag-codice","tag-coding","tag-css","tag-dom","tag-google","tag-hosting","tag-html","tag-pulizia","tag-reflow","tag-sintassi","tag-siti-web","tag-spider","tag-tema","tag-template","tag-user-experience","tag-web-design","tag-wordpress"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.dreamsworld.it\/emanuele\/wp-json\/wp\/v2\/posts\/5605","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dreamsworld.it\/emanuele\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dreamsworld.it\/emanuele\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dreamsworld.it\/emanuele\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dreamsworld.it\/emanuele\/wp-json\/wp\/v2\/comments?post=5605"}],"version-history":[{"count":0,"href":"https:\/\/www.dreamsworld.it\/emanuele\/wp-json\/wp\/v2\/posts\/5605\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.dreamsworld.it\/emanuele\/wp-json\/wp\/v2\/media?parent=5605"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dreamsworld.it\/emanuele\/wp-json\/wp\/v2\/categories?post=5605"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dreamsworld.it\/emanuele\/wp-json\/wp\/v2\/tags?post=5605"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}