Saytınızı CSS Sprites ilə sürətləndirmək

spritemaster veb

Bu saytda səhifə sürəti barədə biraz yazıram və müştərilərimizin saytlarında apardığımız analiz və təkmilləşdirmələrin vacib bir hissəsidir. Güclü serverlərə keçmək və bu kimi alətlərdən istifadə etmək bir yana Məzmun Çatdırılma Şəbəkələri, orta veb geliştiricinin istifadə edə biləcəyi bir sıra digər proqramlaşdırma üsulları var.

Orijinal Cascading Style Sheet üçün standartın indi 15 yaşı var. CSS, məzmunu dizayndan ayırdığı üçün veb inkişafında mühüm bir təkamül oldu. Bu bloqa və digərlərinə baxın və üslub fərqinin əksəriyyəti sadəcə əlavə edilmiş cədvəldədir. Stil cədvəlləri brauzerinizdəki bir önbellekteki yerli olaraq saxlanıldığı üçün də vacibdir. Nəticədə, insanlar saytınızı ziyarət etməyə davam etdikcə hər dəfə bir stil vərəqi yükləmirlər ... yalnız səhifə məzmunu.

Tez-tez az istifadə olunan CSS-in bir elementi bunlardır CSS Sprites. Bir istifadəçi veb saytınıza daxil olduqda, sadəcə səhifə üçün bir istək vermədiklərini anlamırsınız. Onlar birdən çox müraciət etmək… Səhifə, hər hansı bir stil cədvəli, əlavə edilmiş JavaScript sənədləri və sonra hər bir şəkil üçün bir istək. Sərhədlər, naviqasiya çubuqları, arxa planlar, düymələr və s. Üçün bir sıra şəkilləriniz olan bir mövzunuz varsa ... brauzer hər birini veb-serverinizdən bir-bir tələb etməlidir. Bunu minlərlə ziyarətçiyə vurun və bu, serverinizə on minlərlə istək ola bilər!

Bu da öz növbəsində saytınızı ləngidir. A yavaş sayt nişan və dönüşümlərə dramatik təsir göstərə bilər auditoriyanızın etdiyi. Mükəmməl veb inkişaf etdiricilərinin istifadə etdiyi bir strategiya bütün şəkilləri tək bir fayla salmaqdır ... adlanır sprite. Fayl şəkillərinizin hər biri üçün bir sorğu etməkdənsə, indi tək sprite şəkli üçün yalnız bir tələb olmalıdır!

Haqqında oxuya bilərsiniz CSS Sprites-in CSS-Tricks-də necə işlədiyini or Smashing Magazine's CSS Sprite post. Məqsədim bunlardan necə istifadə edəcəyinizi göstərmək deyil, sadəcə inkişaf qrupunuzun onları sayta daxil etməsini təmin etməyinizi tövsiyə etməkdir. CSS Tricks-in verdiyi nümunə, 10 istəkdən ibarət olan və 10Kb-a qədər olan 20.5 şəkli göstərir. Tək bir sprite toplandıqda 1 kb olan 13 tələb! 9 şəkil üçün gediş-gəliş istəyi və cavab müddətləri artıq bitdi və məlumat miqdarı% 30-dan çox azaldı. Bunu saytınızdakı ziyarətçilər sayına vurun və bəzi mənbələri həqiqətən qırxacaqsınız!

qlobalnavThe alma naviqasiya çubuğu əla bir nümunədir. Hər düymənin bir neçə vəziyyəti var ... istər səhifədə olursunuz, istər səhifədən kənarda, istərsə də düyməni basaraq. CSS düymənin koordinatlarını təyin edir və istifadəçilər brauzerinə düzgün vəziyyət bölgəsini təqdim edir. Bu vəziyyətlərin hamısı tək bir qrafikdə yıxılır - ancaq stil cədvəlində göstərildiyi kimi bölgələrə görə göstərilir.

İnkişaf edənlər alətləri sevirlərsə, bunlara da kömək edə biləcək bir ton var Kompas CSS çərçivəsi, İstəyi azaldın ASP.NET üçün, CSS-Spriter Ruby üçün, CSSSprite skript Photoshop üçün, SpritePad, SpriteRight, SpriteCow, ZeroSprites, Layihə Fondue-nin CSS Sprite Generatoru, Sprite Master VebSpriteMe Əlfəcin.

Şərhlər Sprite Master Veb:
spritemaster veb

Martech Zone mövzusu boyunca arxa görüntülərdən istifadə etmir, buna görə bu texnikanı bu anda tətbiq etməli deyilik.

2 Şərhlər

  1. 1

    Gözləyin... bütün kolleksiya “şəkil” (və ya “təyyarə”) və hər bir alt-şəkil (və ya animasiya edilmiş və ya interaktiv şəkildə dəyişən şəkillərdə alt-qrup) “sprite” deyilmi?

    Ola bilsin ki, sonuncu dəfə mən bu cür işlərlə məşğul olandan bəri əşyaların adı dəyişdirilib, amma and içə bilərəm ki, Sprite onun çıxarıldığı böyük məlumat cədvəli deyil, nümayiş etdirilən elementdir.

    (“Sprite masası”... bu elə deyildi?)

    • 2

      İki fərqli şeydən danışırıq, Mark. CSS ilə siz əsasən koordinatlardan istifadə edərək şəkil faylının hansı "hissəsini" göstərə bilərsiniz. Bu, sizə bütün şəkillərinizi bir "sprite" qoyub sonra sadəcə CSS ilə göstərmək istədiyiniz sahəni göstərməyə imkan verir.

Siz nə düşünürsünüz?

Bu sayt spam azaldılması üçün Akismet istifadə edir. Yorumunuzun necə işləndiyini öyrənin.