Сіздің сайтыңызды CSS Sprites көмегімен жылдамдату

spritemaster веб

Мен бұл сайтта парақтың жылдамдығы туралы аздап жазамын және бұл біздің клиенттеріміздің сайттарын жақсарту мен талдаудың маңызды бөлігі. Күшті серверлерге көшу және ұқсас құралдарды қолданудан басқа Мазмұнды жеткізу желілері, орташа веб-әзірлеуші ​​қолдана алатын бірқатар басқа бағдарламалау әдістері бар.

Каскадтық стильдің бастапқы парағының стандарты қазір 15 жастан асқан. CSS веб-дамудың маңызды эволюциясы болды, себебі ол мазмұнды дизайннан бөлді. Осы блогты және кез-келген басқа нұсқаны қараңыз, және сәндеу айырмашылығының көп бөлігі тек бекітілген стильде. Стиль кестелері де маңызды, себебі олар сіздің браузеріңіздегі кэште жергілікті түрде сақталады. Нәтижесінде, адамдар сіздің сайтыңызға кіре берген кезде, олар стиль кестесін әр уақытта жүктемейді ... тек бет мазмұны.

CSS жиі пайдаланылмайтын бір элементі болып табылады CSS Sprites. Пайдаланушы сіздің веб-сайтыңызға кірген кезде, сіз олардың бетке бір ғана сұраныс жасамайтынын түсінбеуіңіз мүмкін. Олар бірнеше өтініштер жасау… Параққа, кез-келген стиль парағына, кез-келген тіркелген JavaScript файлдарына, содан кейін әр суретке сұраныс. Егер сізде шекаралар, навигациялық жолақтар, фондар, түймелер және т.с.с. суреттер сериясы бар тақырып болса ... шолғыш әрқайсысын веб-серверден бір-бірден сұрауы керек. Мұны мыңдаған келушілерге көбейтіңіз және бұл сіздің серверіңізге он мыңдаған сұраныстар болуы мүмкін!

Бұл өз кезегінде сіздің сайтыңыздың жұмысын баяулатады. A баяу сайт келісім мен конверсияға үлкен әсер етуі мүмкін сіздің аудиторияңыз жасайды. Керемет веб-әзірлеушілер қолданатын стратегия - барлық кескіндерді бір файлға салу ... деп аталады сприт. Файлдарыңыздың әрқайсысы үшін сұрау салғаннан гөрі, енді жалғыз спрайт кескіні үшін жалғыз сұраныс болуы керек!

Туралы оқуға болады CSS Sprites CSS-Tricks-те қалай жұмыс істейді or Smashing журналының CSS Sprite пост. Менің мақсатым оларды қалай қолдануға болатындығын көрсету емес, тек сіздің даму тобыңыздың сайтқа қосылуын қамтамасыз ету үшін сізге кеңес беру. CSS Tricks ұсынған мысалда 10 сұраныс бар және 10 Кб-қа дейін болатын 20.5 сурет көрсетілген. Бір спрайтқа жиналған кезде, бұл 1 сұраныс, яғни 13кб! 9 кескінге бару туралы сұраныс пен жауап беру уақыты аяқталды және деректер көлемі 30% -дан астамға азайды. Мұны сіздің сайтыңызға кірушілердің санына көбейтіңіз, сонда сіз кейбір ресурстардан аулақ боласыз!

глобалнавThe алма навигациялық жолақ - бұл керемет мысал. Әр батырманың бірнеше күйі бар ... сіз парақта болсаңыз да, парақтан тыс болсаңыз да, батырманы жылжытсаңыз да. CSS батырманың координаттарын анықтайды және пайдаланушылардың шолғышына дұрыс күй аймағын ұсынады. Бұл күйлердің барлығы бір графикада жинақталған, бірақ стильдер кестесінде көрсетілген аймақтар бойынша аймақтар көрсетіледі.

Егер сіздің әзірлеушілеріңіз құралдарды жақсы көретін болса, онда оларға көмектесе алатын тон бар, соның ішінде Компастың CSS негіздері, Тапсырысты азайту ASP.NET үшін, CSS-Spriter Руби үшін, CSSSprite сценарийі Photoshop үшін, SpritePad, SpriteRight, SpriteCow, ZeroSprites, Projectue қорының CSS Sprite генераторы, Sprite Master Web, және SpriteMe Бетбелгі.

Скриншот Sprite Master Web:
spritemaster веб

Martech Zone тақырып аясында фондық суреттерді қолданбайды, сондықтан біз бұл техниканы дәл қазір қолданудың қажеті жоқ.

2 Пікірлер

  1. 1

    Күте тұрыңыз ... бүкіл топтама «кескін» (немесе «жазықтық»), ал әрбір ішкі сурет (немесе анимациялық немесе интерактивті өзгеріске ұшыраған жағдайда суреттердің кіші тобы) «спрайт» емес пе?

    Мүмкін, мен соңғы кездері осы түрмен айналысқаннан кейін заттардың атауы өзгертілген шығар, бірақ мен Sprite-ті үлкен деректер кестесінен емес, экранға шығаруға болатын элемент деп ант етемін.

    («Sprite кестесі» ... бұл солай емес пе еді?)

    • 2

      Біз екі түрлі нәрсе туралы айтуымыз мүмкін, Марк. CSS көмегімен сіз координаттарды пайдаланып кескін файлының қай «бөлігін» көрсетуге болатындығын анықтай аласыз. Бұл сізге барлық суреттерді бір «спрайтқа» орналастыруға мүмкіндік береді, содан кейін CSS-пен көрсеткіңіз келетін аймақты көрсетіңіз.

Сен не ойлайсың?

Бұл сайт спамның төмендеуі үшін Akismet пайдаланады. Деректеріңіздің қалай өңделетінін біліңіз.