დააჩქარეთ თქვენი საიტი CSS Sprites- ით

spritemaster ვებგვერდი

მე ვწერთ გვერდის სიჩქარეზე საკმაოდ ბევრს ამ საიტზე და ეს არის ჩვენი კლიენტების საიტების ანალიზისა და გაუმჯობესების მნიშვნელოვანი ნაწილი. გარდა ძლიერი სერვერების გადასვლისა და მსგავსი საშუალებების გამოყენებისა შინაარსი მიწოდების ქსელები, არსებობს პროგრამირების სხვა მრავალი ტექნიკა, რომელთა გამოყენება შეუძლია საშუალო ვებ დეველოპერს.

ორიგინალური კასკადური სტილის ფურცლის სტანდარტი ახლა 15 წელს გადაცილებული აქვს. CSS მნიშვნელოვანი განვითარება იყო ვებ – გვერდების განვითარებაში, რადგან იგი შინაარსს გამოყოფდა დიზაინისგან. გადახედეთ ამ ბლოგს და ნებისმიერ სხვა ფორმას, ხოლო სტილის განსხვავების უმრავლესობა უბრალოდ თანდართულ სტილშია. სტილის ფურცლები ასევე მნიშვნელოვანია, რადგან ისინი ინახება ადგილობრივ თქვენს ბრაუზერში მდებარე მეხსიერებაში. შედეგად, რადგან ხალხი განაგრძობს თქვენს საიტის მონახულებას, ისინი ყოველ ჯერზე არ ჩამოტვირთვის სტილის ფურცელს… მხოლოდ გვერდის შინაარსს.

CSS– ის ერთ – ერთი ელემენტი, რომელიც ხშირად ნაკლებად გამოიყენება, არის CSS Sprites. როდესაც მომხმარებელი ეწვევა თქვენს ვებ-გვერდს, შეიძლება ვერ გააცნობიეროთ, რომ ისინი უბრალოდ არ აკეთებენ ერთ თხოვნას გვერდზე. ისინი მრავალჯერადი თხოვნა… მოთხოვნა გვერდზე, ნებისმიერი სტილის ფურცლების, ნებისმიერი თანდართული JavaScript ფაილების და შემდეგ თითოეული სურათის შესახებ. თუ თქვენ გაქვთ თემა, რომელსაც აქვს სურათების სერია საზღვრებისთვის, სანავიგაციო ზოლებისთვის, ფონისთვის, ღილაკებისთვის და ა.შ.… ბრაუზერმა უნდა მოითხოვოს თითოეული, ერთდროულად თქვენი ვებ სერვერიდან. გაამრავლეთ ეს ათასობით ვიზიტორზე და ეს შეიძლება იყოს ათობით ათასი მოთხოვნა თქვენს სერვერზე!

ეს, თავის მხრივ, ანელებს თქვენს საიტს. ა ნელმა საიტმა შეიძლება დრამატულად იმოქმედოს ჩართულობასა და კონვერტაციებზე რომ თქვენი აუდიტორია ქმნის. სტრატეგია, რომელსაც იყენებენ დიდი ვებ – დეველოპერები, არის ყველა სურათის ერთ ფაილში განთავსება, რომელსაც ეწოდება a Sprite. თქვენი ფაილის თითოეული სურათის თხოვნის გაკეთების ნაცვლად, საჭიროა მხოლოდ ერთი მოთხოვნის გაკეთება მხოლოდ ერთი sprite სურათისთვის!

შეგიძლიათ წაიკითხოთ როგორ მუშაობს CSS Sprites CSS-Tricks- ზე or Smashing Magazine's CSS Sprite პოსტი ჩემი მიზანი არ არის იმის ჩვენება, თუ როგორ გამოიყენოთ ისინი, უბრალოდ გირჩევთ, რომ თქვენი განვითარების გუნდი აერთიანებს მათ საიტზე. მაგალითს, რომელსაც CSS Tricks გვაწვდის, ნაჩვენებია 10 სურათი, რომლებიც 10 მოთხოვნაა და შეავსებს 20.5 კბ. როდესაც ერთ სპრიტში შეიკრიბებიან, ეს არის 1 მოთხოვნა, ეს არის 13 კგ! 9 სურათზე მრგვალი სამგზავრო თხოვნისა და პასუხის დრო აღარ არის და მონაცემთა რაოდენობა 30% -ზე მეტით შემცირდა. გავამრავლოთ ეს თქვენს საიტზე ვიზიტორების რაოდენობაზე და თქვენ ნამდვილად გაპარსავთ რამდენიმე რესურსი!

გლობალნავიის Apple სანავიგაციო ზოლი შესანიშნავი მაგალითია. თითოეულ ღილაკს აქვს რამდენიმე მდგომარეობა… ხართ გვერდზე, გვერდიდან ან ღილაკზე მაუსი. CSS განსაზღვრავს ღილაკის კოორდინატებს და მომხმარებლების ბრაუზერს წარუდგენს სწორი მდგომარეობის რეგიონს. ყველა ეს მდგომარეობა ჩამონგრეულია ერთ გრაფიკაში - მაგრამ ნაჩვენებია რეგიონის მიხედვით, როგორც ეს მითითებულია სტილის ფურცელში.

თუ თქვენს დეველოპერებს უყვართ ინსტრუმენტები, არსებობს უამრავი ტონა, რაც მათ დაეხმარება, მათ შორის კომპასი CSS ჩარჩო, მოთხოვნა შემცირება ASP.NET– ისთვის CSS-Spriter რუბი, CSSSprite სკრიპტი ფოტოშოპისთვის, SpritePad, SpriteRight, SpriteCow, ნულოვანი დამნაშავეები, Project Fondue's CSS Sprite გენერატორი, Sprite Master ვებდა SpriteMe სანიშნე

Screenshot of Sprite Master ვებ:
spritemaster ვებგვერდი

Martech Zone არ იყენებს ფონის სურათებს მთელი თავისი თემის განმავლობაში, ამიტომ ამ დროისთვის ამ ტექნიკის განლაგება არ დაგვჭირდება.

2 კომენტარები

  1. 1

    დაველოდოთ ... მთელი კოლექცია არ არის "გამოსახულება" (ან "თვითმფრინავი"), და თითოეული ქვე-სურათი (ან სურათების ქვეჯგუფი ანიმაციური ან ინტერაქტიული შეცვლის შემთხვევაში) "სპრიტი"?

    იქნებ მასალებს სახელი გადაარქვეს მას შემდეგ, რაც ამგვარი რამ მოვიქეცი, მაგრამ მე შემეძლო ვფიცე, რომ Sprite იყო ის ელემენტი, რომლის ჩვენებაც დასრულდა და არა მონაცემთა დიდი მაგიდა, საიდანაც ამოიღეს.

    ("Sprite მაგიდა"… ეს ასე არ იყო?)

    • 2

      შესაძლოა, ჩვენ ორ განსხვავებულ რამეზე ვსაუბრობთ, მარკ. CSS– ით შეგიძლიათ ძირითადად მიუთითოთ გამოსახულების ფაილის რომელი „ნაწილი“ გამოჩნდეს კოორდინატების გამოყენებით. ეს საშუალებას გაძლევთ განათავსოთ თქვენი ყველა სურათი ერთ "სპრიტად" და შემდეგ უბრალოდ მიუთითოთ იმ ადგილისთვის, რომლის ჩვენებაც გსურთ CSS– ით.

რას ფიქრობთ?

ეს საიტი იყენებს Akismet- ს, რათა შეამციროს სპამი. შეისწავლეთ თქვენი კომენტარის მონაცემები დამუშავებული.