Rapidigi Vian Retejon per CSS-Spritoj

spritemaster retejo

Mi skribas pri paĝa rapideco sufiĉe sur ĉi tiu retejo kaj ĝi estas grava parto de la analizo kaj plibonigoj, kiujn ni faras al la retejoj de niaj klientoj. Krom transloĝiĝo al potencaj serviloj kaj uzado de iloj kiel Enhavaj Liveraj Retoj, ekzistas kelkaj aliaj programaj teknikoj, kiujn la averaĝa ttt-programisto povas uzi.

La normo por la originala Kaskada Stila Folio aĝas nun pli ol 15 jarojn. CSS estis grava evoluo en interreta disvolviĝo ĉar ĝi apartigis enhavon de projektado. Rigardu ĉi tiun blogon kaj iun ajn alian kaj la plimulto de la stila diferenco estas simple en la alligita stilfolio. Stilfolioj ankaŭ gravas ĉar ili estas stokitaj loke en kaŝmemoro ene de via retumilo. Rezulte, ĉar homoj daŭre vizitas vian retejon, ili ne elŝutas stilfolion ĉiufoje ... nur la paĝan enhavon.

Unu elemento de CSS ofte malutiligita estas CSS Sprites. Kiam uzanto vizitas vian retejon, vi eble ne rimarkas, ke ili ne simple faras unu peton por la paĝo. Ili fari multajn petojn... peto por la paĝo, por iuj stilfolioj, por iuj ligitaj JavaScript-dosieroj, kaj poste por ĉiu bildo. Se vi havas temon, kiu havas serion de bildoj por limoj, navigaj stangoj, fonoj, butonoj, ktp ... la retumilo devas peti ĉiun, unu post alia de via retservilo. Multipliku tion per miloj da vizitantoj kaj tio povas esti dekmiloj da petoj faritaj al via servilo!

Ĉi tio siavice bremsas vian retejon. A malrapida retejo povas havi draman efikon sur la engaĝiĝo kaj konvertiĝoj tion faras via publiko. Strategio, kiun uzas grandaj retejaj programistoj, metas ĉiujn bildojn en unu dosieron ... nomata a sprite. Anstataŭ fari peton por ĉiu el viaj dosieraj bildoj, nun necesas nur unu peto por la unuopa sprita bildo!

Vi povas legi pri kiel CSS Sprites funkcias ĉe CSS-Tricks or CSS Sprite de Smashing Magazine afiŝi. Mia celo ne estas montri al vi kiel uzi ilin, nur konsili vin certigi, ke via disvolva teamo enmetas ilin en la retejon. La ekzemplo, kiun CSS Tricks donas, montras 10 bildojn, kiuj estas 10 petoj kaj sumas 20.5Kb. Se kolektite en ununura elfo, ĝi estas 1 peto tio estas 13kb! La rondirpeto kaj respondaj tempoj por 9 bildoj nun malaperis kaj la kvanto de datumoj malpliigas pli ol 30%. Multipliku tion per la nombro de vizitantoj en via retejo kaj vi vere razos iujn rimedojn!

globalnavla pomo navigado-stango estas bonega ekzemplo. Ĉiu butono havas kelkajn statojn ... ĉu vi estas sur la paĝo, ekstere de la paĝo, aŭ preterpasas la butonon. CSS difinas la koordinatojn de la butono kaj prezentas la regionon de la ĝusta stato al la retumilo de uzantoj. Ĉiuj ĉi tiuj statoj estas kolapsitaj kune en ununura grafikaĵo - sed montrataj regiono laŭ regiono kiel specifite en la stilfolio.

Se viaj programistoj amas ilojn, ekzistas multe da homoj, kiuj povas helpi ilin, inkluzive la Kompaso CSS-kadro, PetiRedukti por ASP.NET, CSS-Spriter por Ruby, CSSSprite-skripto por Photoshop, SpritePad, SpriteRight, SpriteCow, NuloSpritoj, CSS Sprite Generator de Projekto Fondue, Sprite Master WebKaj la SpriteMe Legosigneto.

Ekrankopio de Sprite Master Web:
spritemaster retejo

Martech Zone ne uzas fonajn bildojn laŭlonge de sia temo, do ni ne devas disfaldi ĉi tiun teknikon nuntempe.

2 Komentoj

  1. 1

    Atendu ... ĉu la tuta kolekto ne estas "bildo" (aŭ "aviadilo"), kaj ĉiu subbildo (aŭ subgrupo de bildoj en la kazo de viglaj aŭ interage ŝanĝiĝantaj) estas "sprito"?

    Eble aferoj estas renomitaj ekde la lasta fojo, kiam mi pritraktis tiajn aferojn, sed mi povus ĵuri, ke Sprite estis la elemento, kiu montriĝis, ne la granda datuma tabelo, de kiu ĝi estis tirita.

    ("Sprita tablo" ... ĉu ne?)

    • 2

      Eble ni parolas du malsamajn aferojn, Marko. Kun CSS, vi esence povas specifi kiun 'parton' de bilddosiero por montri uzante koordinatojn. Ĉi tio permesas al vi meti ĉiujn viajn bildojn en unu "sprite" kaj tiam nur montri al la areo, kiun vi volas montri per la CSS.

Kion vi pensas?

Ĉi tiu retejo uzas Akismeton por redukti spamon. Lernu, kiel via komento datiĝas.