מהירות טעינת האתר. 4 גורמים עיקריים.

מהירות טעינת האתר. איך להגביר את מהירות ההורדה? בעיות עיקריות.

מוּמלָץ מהירות טעינת האתר גוגל - 2 שניות. (ועכשיו תסתכל על המהירות שלך)

(איך בודקים את מהירות טעינת האתר?הדרך הקלה והמהירה היא לפתוח כלי מפתח CTRL+SHIFT+Iלאחר מכן, בחר בכרטיסייה "רשת", ולאחר מכן רענן את העמוד, כדי לראות את מהירות ההורדה עליך לרענן את הדף, רענן ללא מטמון: עליך ללחוץ CTRL + F5 / CTRL + R. ולמטה תהיה מהירות ההורדה.)

בדוק את מהירות טעינת האתר
באמצעות שירות מגוגל: PageSpeed ​​​​Insights

(אינפוגרפיקה נלקחה מ-seoprofy ©2014)

הנקודות העיקריות המשפיעות ביותר:

1. מטמון
2. css (סגנונות)
3. JS (סקריפטים)
4. תמונות (המשקל, הגודל שלהם - כן, בדיוק הגודל HxW, Meta data - כן, יש דבר כזה, זה המידע שלהם כמו: תאריך, כותרת, נושא וכו')

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

#1 מזומן

שמירה במטמון (אוֹמטמון) הוא מאגר (מקום) שבו כל הנתונים מאוחסנים. במקרה שלנו, אלו תמונות, קוד, סגנונות ועוד.

הקל ביותר מה שאתה יכול לעשות בעצמך הוא אפשר שמירה במטמון באירוח.
(אם יש לך אירוח Ukraine.com.ua, אז אתה צריך ללכת ל"הגדרות אתר" -> "הגדרות בסיסיות" ויהיה פריט "Caching" ושם אתה בוחר את משך הזמן הנדרש עבורו האתר שלך להיות מאוחסן במטמון. מעצמי אני ממליץ להגדיר את זה לשבועיים - עם תקופת האחסון הזו, תובנות מהירות הדף של גוגל מוסיפות הרבה נקודות.)

שיטות אחרות הקשורות ל-htaccess, תגיות דפדפן וכו' ניתן למצוא באינטרנט עבור לא מעט מאמרים ואני לא רואה טעם לצבוע מחדש. אתה יכול לקרוא על סוגי המטמון במאמר על Habré.

#2 CSS (סגנונות)

CSS - (Cascading Style Sheets - גליונות סגנון מדורגים).
מה אפשר לעשות עם סגנונות?
נו קוֹדֶם כֹּל לסחוט אותם.
שנית להפחית את מספר הקבצים, כלומר. למזג כמה שיותר כדי לצמצם את מספר השיחות לשרת.
שְׁלִישִׁיתלהטמיע את הסגנונות העיקריים המשפיעים על התצוגה של החלק הגלוי של המסך הראשון ישירות לתוך , ולהשאיר את השאר בקובץ.

אני גם משאיר כמה קישורים שימושיים:

• שירותי דחיסה של css
• כיצד לדחוס קבצי css

#3 JS (סקריפטים)

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

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

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

3. נקודה מינורית.
   ניתן גם לדחוס JS. גם למזג לקובץ אחד.

#4 תמונות

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

הנושא די נרחב, אז אנסה לתת לך רק מידע חשוב.

מטב משקל.

אֵיך? באמצעות תוכנית או שירות.

• תוכנית לעבודה המונית עם תמונות תמונת אבן מהירהעם זה אתה יכול
  שינוי גודל תמונות בכמות גדולה. איך ומה כבר גוגל שם לא קשה.
  הורד תמונה של Faststone.
  
• שירות להקטנת גודל התמונות - פנדה. או ליתר דיוק TinyPNG & TinyJPG.
  היתרון העיקרי של ONLINE. פשוט העלו את הקבצים וחזרו בגרסה דחוסה - האיכות לא נפגעת בכלל (זה מג'יק).
  קישורים: tinypng.com & tinyjpg.com

בצע אופטימיזציה של גודל.

ניתן לשנות את הגודל כפי שכתבתי למעלה באמצעות התוכנה תמונת אבן מהירה.
הגודל הוא גובה x משקל (גובה לפי רוחב).

דוגמא:

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

לדוגמא יש לנו 2 תמונות:
1) משקל 100kb, גודל 500x500
2) משקל 100kb, גודל 2500x2500
נראה כי מה זה משנה, הם שוקלים אותו דבר, לכן, טעינתם צריכה להיות מסובכת או פשוטה באותה מידה, אבל זה לא היה שם אם תבדוק את זה על ידי תובנת מהירות דף גוגל, זה עדיין ישבע ברזולוציה גבוהה יותר תמונה.

תִמצוּת: הגודל משנה. גם משקל. (השאר לא כל כך חשוב, אבל לפי הטיעונים של כמה מומחים יש לזה גם השפעה, עכשיו אני מדבר על מטא נתונים של תמונה)

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

בקצרה על השחרור:

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

בוא נלך לסרטון:

נ.ב.
אם יש לך שאלות או לא מסכים עם משהו, כתוב על זה בתגובות.