CSS స్ప్రిట్‌లతో మీ సైట్‌ను వేగవంతం చేస్తుంది

స్ప్రిట్ మాస్టర్ వెబ్

నేను ఈ సైట్‌లో పేజీ వేగం గురించి కొంచెం వ్రాస్తాను మరియు ఇది మా ఖాతాదారుల సైట్‌లకు మేము చేసే విశ్లేషణ మరియు మెరుగుదలలలో ముఖ్యమైన భాగం. శక్తివంతమైన సర్వర్‌లకు వెళ్లడం మరియు వంటి సాధనాలను ఉపయోగించడం పక్కన పెడితే కంటెంట్ డెలివరీ నెట్‌వర్క్‌లు, సగటు వెబ్ డెవలపర్ ఉపయోగించగల అనేక ఇతర ప్రోగ్రామింగ్ పద్ధతులు ఉన్నాయి.

అసలు క్యాస్కేడింగ్ స్టైల్ షీట్ యొక్క ప్రమాణం ఇప్పుడు 15 సంవత్సరాలు దాటింది. వెబ్ అభివృద్ధిలో CSS ఒక ముఖ్యమైన పరిణామం, ఎందుకంటే ఇది కంటెంట్‌ను డిజైన్ నుండి వేరు చేస్తుంది. ఈ బ్లాగ్ మరియు మరేదైనా చూడండి మరియు స్టైలింగ్ వ్యత్యాసం చాలావరకు జతచేయబడిన స్టైల్షీట్లో ఉంటుంది. స్టైల్షీట్లు కూడా ముఖ్యమైనవి ఎందుకంటే అవి మీ బ్రౌజర్‌లోని కాష్‌లో స్థానికంగా నిల్వ చేయబడతాయి. తత్ఫలితంగా, ప్రజలు మీ సైట్‌ను సందర్శించడం కొనసాగిస్తున్నప్పుడు, వారు ప్రతిసారీ స్టైల్ షీట్‌ను డౌన్‌లోడ్ చేయరు… కేవలం పేజీ కంటెంట్.

CSS యొక్క ఒక మూలకం తరచుగా ఉపయోగించబడదు CSS స్ప్రిట్స్. ఒక వినియోగదారు మీ వెబ్‌సైట్‌ను సందర్శించినప్పుడు, వారు పేజీ కోసం ఒక అభ్యర్థన చేయలేదని మీరు గ్రహించలేరు. వాళ్ళు బహుళ అభ్యర్థనలు చేయండి… పేజీ కోసం, ఏదైనా స్టైల్ షీట్ల కోసం, జతచేయబడిన ఏదైనా జావాస్క్రిప్ట్ ఫైళ్ళ కోసం, ఆపై ప్రతి చిత్రం కోసం ఒక అభ్యర్థన. సరిహద్దులు, నావిగేషన్ బార్‌లు, నేపథ్యాలు, బటన్లు మొదలైన వాటి కోసం చిత్రాల శ్రేణిని కలిగి ఉన్న థీమ్ మీకు ఉంటే… బ్రౌజర్ మీ వెబ్ సర్వర్ నుండి ఒక్కొక్కటి ఒక్కొక్కటి అభ్యర్థించాలి. వేలాది మంది సందర్శకుల ద్వారా గుణించండి మరియు అది మీ సర్వర్‌కు వేలాది అభ్యర్థనలు కావచ్చు!

ఇది మీ సైట్‌ను నెమ్మదిస్తుంది. జ నెమ్మదిగా ఉన్న సైట్ నిశ్చితార్థం మరియు మార్పిడులపై నాటకీయ ప్రభావాన్ని చూపుతుంది మీ ప్రేక్షకులు చేసే. గొప్ప వెబ్ డెవలపర్లు ఉపయోగించే ఒక వ్యూహం అన్ని చిత్రాలను ఒకే ఫైల్‌లో ఉంచడం… a స్ప్రైట్. మీ ప్రతి ఫైల్ చిత్రాల కోసం ఒక అభ్యర్థన చేయడానికి బదులుగా, ఇప్పుడు ఒకే స్ప్రైట్ ఇమేజ్ కోసం ఒకే అభ్యర్థన మాత్రమే అవసరం!

మీరు గురించి చదువుకోవచ్చు CSS- ఉపాయాలలో CSS స్ప్రిట్స్ ఎలా పనిచేస్తాయి or స్మాషింగ్ మ్యాగజైన్ యొక్క CSS స్ప్రైట్ పోస్ట్. వాటిని ఎలా ఉపయోగించాలో మీకు చూపించడమే నా ఉద్దేశ్యం కాదు, మీ అభివృద్ధి బృందం వాటిని సైట్‌లో పొందుపరుస్తుందని నిర్ధారించుకోవడానికి మీకు సలహా ఇవ్వడం. CSS ట్రిక్స్ అందించే ఉదాహరణ 10 అభ్యర్ధనలు మరియు 10Kb వరకు జోడించే 20.5 చిత్రాలను చూపిస్తుంది. ఒకే స్ప్రైట్‌లో సేకరించినప్పుడు, అది 1 అభ్యర్థన 13kb! 9 చిత్రాల కోసం రౌండ్ ట్రిప్ అభ్యర్థన మరియు ప్రతిస్పందన సమయాలు ఇప్పుడు పోయాయి మరియు డేటా మొత్తం 30% కంటే ఎక్కువ తగ్గింది. మీ సైట్‌లోని సందర్శకుల సంఖ్యతో గుణించండి మరియు మీరు నిజంగా కొన్ని వనరులను గొరుగుట చేయబోతున్నారు!

గ్లోబల్ నవ్ది ఆపిల్ నావిగేషన్ బార్ గొప్ప ఉదాహరణ. ప్రతి బటన్ కొన్ని రాష్ట్రాలను కలిగి ఉంది… మీరు పేజీలో ఉన్నా, పేజీకి దూరంగా ఉన్నా, లేదా బటన్ మీద మౌస్ చేసినా. CSS బటన్ యొక్క కోఆర్డినేట్‌లను నిర్వచిస్తుంది మరియు సరైన స్థితి యొక్క ప్రాంతాన్ని వినియోగదారుల బ్రౌజర్‌కు అందిస్తుంది. ఈ రాష్ట్రాలన్నీ ఒకే గ్రాఫిక్‌లో కూలిపోతాయి - కాని స్టైల్ షీట్‌లో పేర్కొన్న విధంగా ప్రాంతాల వారీగా ప్రదర్శించబడతాయి.

మీ డెవలపర్లు సాధనాలను ఇష్టపడితే, వారికి సహాయపడే టన్ను అక్కడ ఉంది కంపాస్ CSS ఫ్రేమ్‌వర్క్, RequestReduce ASP.NET కోసం, CSS- స్ప్రిటర్ రూబీ కోసం, CSSSprite స్క్రిప్ట్ ఫోటోషాప్ కోసం, స్ప్రైట్ ప్యాడ్, స్ప్రైట్ రైట్, స్ప్రైట్ కో, జీరోస్ప్రిట్స్, ప్రాజెక్ట్ ఫండ్యు యొక్క CSS స్ప్రైట్ జనరేటర్, స్ప్రైట్ మాస్టర్ వెబ్, ఇంకా స్ప్రైట్మీ బుక్‌మార్క్‌లెట్.

యొక్క స్క్రీన్షాట్ స్ప్రైట్ మాస్టర్ వెబ్:
స్ప్రిట్ మాస్టర్ వెబ్

Martech Zone నేపథ్య చిత్రాలను దాని థీమ్ అంతటా ఉపయోగించదు, కాబట్టి మేము ఈ పద్ధతిని ఈ సమయంలో అమలు చేయవలసిన అవసరం లేదు.

2 వ్యాఖ్యలు

  1. 1

    వేచి ఉండండి… మొత్తం సేకరణ “ఇమేజ్” (లేదా “విమానం”), మరియు ప్రతి ఉప చిత్రం (లేదా యానిమేటెడ్ లేదా ఇంటరాక్టివ్‌గా మారుతున్న విషయంలో చిత్రాల ఉప సమూహం) “స్ప్రైట్” కాదా?

    చివరిసారిగా నేను ఈ విధమైన విషయాలను నిర్వహించినప్పటి నుండి స్టఫ్ పేరు మార్చబడింది, కాని నేను స్ప్రైట్ ప్రదర్శించబడే మూలకం అని ప్రమాణం చేశాను, అది పెద్ద డేటా పట్టిక నుండి తీసుకోబడలేదు.

    (“స్ప్రైట్ టేబుల్”… అది కాదా?)

    • 2

      మేము మార్క్ అనే రెండు వేర్వేరు విషయాలు మాట్లాడుతున్నాము. CSS తో, మీరు ప్రాథమికంగా కోఆర్డినేట్‌లను ఉపయోగించి ప్రదర్శించడానికి ఇమేజ్ ఫైల్ యొక్క ఏ 'భాగాన్ని' పేర్కొనవచ్చు. ఇది మీ చిత్రాలన్నింటినీ ఒకే 'స్ప్రైట్'లో ఉంచడానికి మిమ్మల్ని అనుమతిస్తుంది, ఆపై మీరు CSS తో ప్రదర్శించదలిచిన ప్రాంతానికి సూచించండి.

మీరు ఏమి ఆలోచిస్తాడు?

స్పామ్ తగ్గించడానికి ఈ సైట్ Akismet ను ఉపయోగిస్తుంది. మీ వ్యాఖ్య డేటా ఎలా ప్రాసెస్ చేయబడిందో తెలుసుకోండి.