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

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

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

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

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

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

בניית אתרים ע"י פריסה יעילה:

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

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

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

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

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

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

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