האצת האתר שלך באמצעות ספריטים של CSS

ספריטמסטר אינטרנט

אני כותב על מהירות הדפים לא מעט באתר זה וזה חלק חשוב מהניתוחים והשיפורים שאנו מבצעים באתרי הלקוחות שלנו. מלבד מעבר לשרתים חזקים ושימוש בכלים כמו רשתות להעברת תוכן, ישנן מספר טכניקות תכנות אחרות שמפתח אתרים ממוצע יכול להשתמש בהן.

התקן לגיליון הסגנון המדורג המקורי הוא מעל גיל 15 שנים. CSS הייתה אבולוציה חשובה בפיתוח אתרים מכיוון שהיא הפרידה בין תוכן לעיצוב. התבונן בבלוג זה ובכל אחר ורוב ההבדל בעיצוב הוא פשוט בגיליון הסגנונות המצורף. גיליונות סגנונות חשובים גם מכיוון שהם מאוחסנים באופן מקומי במטמון בתוך הדפדפן שלך. כתוצאה מכך, כאשר אנשים ממשיכים לבקר באתר שלך, הם לא מורידים דף סגנון בכל פעם ... רק את תוכן הדף.

אלמנט אחד של CSS שלעתים קרובות הוא מנוצל פחות ספריטס CSS. כשמשתמש מבקר באתר שלך, ייתכן שלא תבין שהוא לא מגיש בקשה אחת לדף. הֵם להגיש מספר בקשות... בקשה לדף, לכל גיליונות סגנון, לכל קבצי JavaScript המצורפים, ואז לכל תמונה. אם יש לך ערכת נושא הכוללת סדרת תמונות לגבולות, פסי ניווט, רקעים, לחצנים וכו '... הדפדפן צריך לבקש כל אחת מהן, אחת בכל פעם, משרת האינטרנט שלך. הכפל את זה באלפי מבקרים וזה יכול להיות עשרות אלפי בקשות שהוגשו לשרת שלך!

זה, בתורו, מאט את האתר שלך. א לאתר איטי יכולה להיות השפעה דרמטית על המעורבות והמרות שהקהל שלך מכין. אסטרטגיה שמפתחי אתרים נהדרים משתמשים בה היא להכניס את כל התמונות לקובץ אחד ... שנקרא a שדון. במקום לבקש בקשה לכל אחת מתמונות הקבצים שלך, עכשיו רק צריכה להיות בקשה אחת עבור תמונת ספרייט היחידה!

אתה יכול לקרוא על איך CSS ספריטים עובדים ב- CSS-Tricks or CSS Sprite של מגזין Smashing הודעה. הנקודה שלי היא לא להראות לך כיצד להשתמש בהם, רק כדי לייעץ לך להבטיח שצוות הפיתוח שלך ישלב אותם באתר. הדוגמה שמספק טריקים של CSS מציגה 10 תמונות שהן 10 בקשות ומסכמות עד 20.5Kb. כשנאסף בספרייט יחיד, זה בקשה אחת זה 1kb! בקשת הלוך ושוב התגובה של 9 תמונות נעלמו וכמות הנתונים מצטמצמת ביותר מ -30%. הכפל את זה במספר המבקרים באתר שלך ותמשיך לגלח קצת משאבים!

גלובאלנאב תפוח עץ סרגל ניווט הוא דוגמה מצוינת. לכל כפתור יש כמה מצבים ... בין אם אתה נמצא בדף, לא נמצא בעמוד או מתגבר מעל הכפתור. CSS מגדיר את הקואורדינטות של הכפתור ומציג את אזור המצב הנכון לדפדפן המשתמשים. כל המצבים הללו קרסו יחד בגרפיקה אחת - אך מוצגים אזור אחר אזור כמפורט בגליון הסגנון.

אם המפתחים שלך אוהבים כלים, יש שם המון שיכולים לעזור להם, כולל מסגרת CSS של מצפן, בקשה להפחית עבור ASP.NET, CSS-Spriter לרובי, סקריפט CSSSprite לפוטושופ, SpritePad, SpriteRight, SpriteCow, ZeroSprites, מחולל CSS Sprite של Project Fondue, ספרייט מאסטר אינטרנט, וה SpriteMe סימנייה.

תמונת מסך של ספרייט מאסטר אינטרנט:
ספריטמסטר אינטרנט

Martech Zone אינו משתמש בתמונות רקע בכל הנושא, ולכן איננו צריכים לפרוס טכניקה זו כרגע.

תגובות 2

  1. 1

    המתן ... האם כל האוסף אינו "תמונה" (או "מישור") וכל תת-תמונה (או תת-קבוצת תמונות במקרה של תמונות מונפשות או משתנות אינטראקטיבית) היא "ספרייט"?

    אולי שונה שם הדברים מאז בפעם האחרונה שטיפלתי בדברים מסוג זה, אך יכולתי להישבע שהספרייט היה האלמנט שבסופו של דבר הוצג, ולא טבלת הנתונים הגדולים ממנו נשלף.

    ("שולחן ספרייט" ... זה לא היה זה?)

    • 2

      אולי אנחנו מדברים על שני דברים שונים, מארק. באמצעות CSS, אתה יכול בעצם לציין איזה 'חלק' של קובץ תמונה להציג באמצעות קואורדינטות. זה מאפשר לך להכניס את כל התמונות ל"ספרייט "יחיד ואז פשוט להצביע על האזור שברצונך להציג עם CSS.

מה אתה חושב?

אתר זה משתמש Akismet כדי להפחית דואר זבל. למד כיצד הנתונים שלך מעובדים.