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ə 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 artıq 15 yaşı var. CSS veb inkişafında əhəmiyyətli bir təkamül idi, çünki məzmunu dizayndan ayırırdı. 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!

globalnavThe 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ə olsanız, istər səhifədən kənarda, istərsə də düyməni basmaqla. 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 qrafada yığılmışdır - lakin 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ə də 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 alt şəkil (və ya cizgi və ya interaktiv olaraq dəyişənlər şəkillərindəki alt qrup) “sprite” deyilmi?

    Bəlkə də bu cür şeyləri son dəfə idarə etdiyimdən bəri əşyaların adı dəyişdirildi, amma göründüyü kimi göstərilən elementin Sprite olduğuna and içdim, böyük məlumat cədvəli deyil.

    ("Sprite masa" ... bu deyildi bu deyildi?)

    • 2

      İki fərqli şeydən danışa bilərik, Mark. CSS ilə, koordinatları istifadə edərək bir şəkil sənədinin hansı hissəsini göstərəcəyini əsasən təyin edə bilərsiniz. Bu, bütün şəkillərinizi tək bir 'sprite' halına gətirməyinizə imkan verir və sonra yalnız CSS ilə göstərmək istədiyiniz sahəni göstərin.

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

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