מדריך Ultimate אינטרנט אופטימיזציה (טיפים & שיטות עבודה מומלצות)

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

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

יש לנו לפצל את הדברים לתוך 3 חלקים נפרדים לקריאה טובה יותר - בהתאמה אופטימיזציה בצד השרת, אופטימיזציה של נכסים (הכולל רכיבי אינטרנט כמו CSS, Javascript, תמונות, וכו ') ו פלטפורמה, שבו נתמקד וורדפרס אופטימיזציה. בחלק האחרון, אנחנו לזרוק כמה קישורים חשבנו שימושי. רשימה מלאה לאחר קפיצה.

אופטימיזציה: בצד השרת

1. בחר האינטרנט המארח הגון

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

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

2. נכס מארח בנפרד

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

   קריאה מומלצתYou מקסם הורדות מקבילות בנתיב Carpool.

3. דחיסה עם GZip

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

   GZip היא אחת הדרכים הטובות ביותר לעשות זאת והיא שונה בהתאם לסוג השרתים שבהם אתה משתמש. לדוגמה, Apache 1.3 משתמשת mod_zip, Apache 2.x משתמש mod_deflate והנה איך אתה עושה את זה פנימה Nginx. הנה כמה מאמרים ממש טוב כדי להכיר אותך עם דחיסות בצד השרת:

   • להאיץ את אתר האינטרנט על ידי הפעלת דחיסת קובץ Apache
   • דחיסת פלט אינטרנט באמצעות mod_gzip ו Apache
   • כיצד לייעל את האתר שלך עם דחיסת GZIP
   • דחיסה בצד השרת עבור ASP

4. מזער הפניות מחדש

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

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

5. צמצם את בדיקת DNS

   לפי Yahoo! בלוג רשת המפתחים, זה לוקח בערך 20-120 אלפיות השנייה עבור DNS (Domain Name System) כדי לפתור את כתובת ה- IP עבור שם מארח או שם תחום מסוים הדפדפן לא יכול לעשות שום דבר עד השלמת התהליך כראוי.

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

אופטימיזציה: הנכסים (CSS, Javascripts, תמונות)

1. מיזוג Javascripts מרובים לתוך אחד

   אנשים ב rakaz.nl משתף כיצד ניתן לשלב מספר Javascript כגון:

    http://www.creatype.nl/javascript/prototype.js http://www.creatype.nl/javascript/builder.js http://www.creatype.nl/javascript/effects.js http: // www .creatype.nl / javascript / dragdrop.js http://www.creatype.nl/javascript/slider.js 

   לתוך קובץ יחיד על ידי שינוי כתובת האתר ל:

    http://www.creatype.nl/javascript/prototype.js,builder.js,effects.js,dragdrop.js,slider.js 

   על ידי מניפולציה. htaccess ושימוש PHP. לחץ כאן כדי לקרוא עוד.

2. דחיסת Javascript & CSS

   צמצם הוא יישום PHP5 שיכול לשלב קובצי CSS ו- Javascript מרובים, לדחוס את התוכן שלהם (כלומר הסרת שטח לבן / הערות מיותרות) ולהציג את התוצאות בקידוד HTTP (gzip / deflate) ובכותרות שמאפשרות אחסון אופטימלי של מטמון בצד הלקוח.

   

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

   • compressor.ebiene (Javascript, CSS)
   • javascriptcompressor.com (Javascript)
   • jscompress.com (Javascript)
   • נקיון (CSS)
   • כלי האופטימיזציה של CSS (CSS)

3. התאמה אישית של תפוגת כותרת / מטמון

   אשראי: httpwatch

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

   קריאות מומלצות:

   • Yahoo! מפתח רשת המפתחים - הוספת כותרת פג
   • כיצד להוסיף טוב יפוג כותרות על תמונות ב Apache 1.3
   • מטמון HTTP
   • מטמון מדריך עבור מחברים אינטרנט ו מנהלי אתרים

4. בטעינת הנכסים

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

   • תמונות: Flickr, Smugmug, Host hostings *
   • Javascripts: Google Ajax Library, Google App Engine, Host Hostings *
   • טופס אינטרנטs: WuFoo, FormStack
   • RSS: Google Feedburner
   • סקר וסקרים: סקרמונקי, פולדדי

   * אירוח בתשלום - שירותים בתשלום תמיד יש אמינות טובה יותר ויציבות. אם האתר שלך מבקש כל הזמן את הנכסים, תצטרך לוודא שהם נמצאים בידיים טובות. אנו ממליצים על אמזון S3 ו- Cloud Front.

5. טיפול תמונות אינטרנט

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

   • מטב תמונות PNGאנשים במגזין Smashing מתאר כמה טכניקות חכמות שעשויות לעזור לך לייעל את התמונות PNG שלך.
   • אופטימיזציה עבור אינטרנט - דברים שעליך לדעת (הפורמטים) למידע נוסף על Jpeg, GIF, PNG וכיצד כדאי לשמור את התמונות שלך באינטרנט.
   • אל תשנה תמונותתמיד להתאמן הוספת רוחב ו גובה עבור כל תמונה. גם לא בקנה מידה את התמונה רק בגלל שאתה צריך גרסה קטנה יותר באינטרנט. לדוגמה: אל תאלץ את קנה המידה של 200 × 200 פיקסלים לתמונה 50 × 50 פיקסלים עבור האתר שלך על ידי שינוי רוחב ו גובה. קבל במקום 50 × 50 פיקסלים במקום.

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

   • Smush.itכנראה אחד הכלים היעילים ביותר באינטרנט כדי לייעל את התמונות. יש אפילו תוסף וורדפרס עבור זה!
   • JPEG & PNG חשפניתכלי Windows להפשיט / ניקוי / הסרת מטא נתונים מיותרים (זבל) מקבצי JPG / JPEG / JFIF & PNG.
   • תמונה מקוונת האופטימיזציהמאפשר לך לבצע אופטימיזציה של קבצי GIF, GIF מונפשים, jpgs ו- png, כך שהם יטענו מהר ככל האפשר באתר שלך, באמצעות Drive דינמי
   • SuperGIFללא מאמץ להפוך את כל התמונות שלך GIF ואנימציות קטנות יותר.
   • הנה עוד.

6. טיפול ב- CSS

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

   • שמירה על אלמנטים 'הילדים בקו אחד עם צאצאיםכיצד לשמור על הסימון שלך נקי עם בוררי CSS.
   • שמור על CSS קצרכאשר הם נותנים את אותו סגנון, הקודים טובים יותר הם קצרים. הנה מדריך קיצור קצר אתה בטח צריך.
   • השתמש ב- CSS Spriteטכניקה CSS ספרייט להפחית את בקשת HTTP בכל פעם דף נטען על ידי שילוב של כמה (או כל) תמונות יחד על קובץ תמונה אחת ולשלוט פלט זה עם CSS מיקום הרקע תכונה. הנה כמה מדריכים שימושיים וטכניקות ליצור Sprites CSS:
     • Online Sprite גנרטור
     • המקוון הטוב ביותר מחובר CSS Sprites גנרטור
   • באמצעות כל הצהרה רק פעם אחתכאשר מחפשים לייעל את קבצי CSS שלך, אחד האמצעים החזקים ביותר שאתה יכול להעסיק היא להשתמש בכל הצהרה רק פעם אחת.
   • צמצום כמות קובצי CSSהסיבה היא פשוטה, קבצי CSS יותר יש לך את הבקשה HTTP יותר זה יהיה צריך לעשות כאשר דף אינטרנט מתבקש. לדוגמה, במקום שיהיו לך קובצי CSS מרובים, כגון:

     ניתן לשלב אותם ב- CSS אחד:

   קריאות מומלצות:

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

אופטימיזציה עבור WordPress

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

1. מטמון בלוג וורפרס שלך

   WP-Cache הוא מאוד יעיל WordPress דף במטמון המערכת כדי להפוך אותך לאתר הרבה יותר מהר ו תגובה. כמו כן אנו ממליצים WP סופר מטמון אשר משפר את התוסף שהוזכר לעיל וגם עושה עבודה נהדרת.

2. בטל מחיקת תוספים שאינם בשימוש

   כאשר אתה שם לב הבלוג שלך הוא טוען איטי באמת, לראות אם יש לך הרבה plugins מותקן. הם עשויים להיות האשם.

3. הסר מיותרים תגיות PHP

   אם תעיין בקודי המקור של העיצוב שלך, תמצא תגים רבים כגון אלה:

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

קריאות מומלצות:

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

אחרון חביב…

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

• Yahoo! YSlow

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

  (Firebug חובה)

  

• PageSpeed

  דומה ל Yahoo! YSlow, Google מהירות דף הוא קוד פתוח Firebug התוספת על מנת להעריך את ביצועי האתר וכיצד לשפר אותם. (Firebug חובה)

  

• כלי Pingdom

  כלי Pingdom קח עומס מלא של האתר שלך כולל כל האובייקטים (תמונות, CSS, JavaScripts, RSS, Flash ומסגרות / iframes) ומראה לך נתונים סטטיסטיים כלליים על הדף טעון כגון המספר הכולל של אובייקטים, זמן הטעינה הכולל, ואת גודל כולל חפצים.

  

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

• כלי האופטימיזציה של Google
• 15 כלים כדי לעזור לך לפתח דפי אינטרנט מהירה יותר
• 15 + טיפים להאיץ את אתר האינטרנט שלך, לייעל את הקוד שלך!