मुखपृष्ठ / वेबसाइट पर बाहरी फाइलें: छवियाँ, CSS और JavaScript

वेबसाइट पर बाहरी फाइलें: छवियाँ, CSS और JavaScript

कई साइटें छवि फाइलों, CSS और JavaScript जैसी बाहरी फाइलों का उपयोग करती हैं। ये अक्सर तीसरे पक्ष के डोमेन पर स्थित होती हैं। यह सहायक हो सकता है क्योंकि वे आपकी साइट के लिए तैयार समाधान प्रदान करते हैं।

CSS का मतलब Cascading Style Sheets है। CSS का उपयोग HTML पृष्ठों को स्टाइल करने के लिए किया जाता है। यह वेब पेज को दृश्य अपील प्रदान करता है।

CSS के साथ, आप कर सकते हैं:

  • पेज पर तत्वों का स्थान निर्धारित करें;
  • तत्वों के बीच की दूरी इंगित करें;
  • फॉन्ट का प्रकार, रंग और आकार सेट करें;
  • पृष्ठभूमि रंग सेट करें और पृष्ठभूमि छवियाँ जोड़ें।

CSS को लागू करने का सबसे सामान्य तरीका बाहरी .css स्टाइल शीट का उपयोग करना है। फाइल का लिंक पेज के <head> सेक्शन में रखा जाता है।

इसके अलावा, अलग-अलग प्रकार के पृष्ठों के लिए अलग CSS फाइलों का अक्सर उपयोग किया जाता है।

पेज के HTML कोड में बाहरी CSS फाइलों का एक उदाहरण:

HTML कोड में बाहरी CSS फाइल का उदाहरण

JavaScript पेज को इंटरएक्टिव और कार्यात्मक बनाता है। JavaScript का उपयोग करने से वेबमास्टर उपयोगकर्ता के लिए पेज को डायनामिक बना सकता है, जिसका अर्थ है कि तत्व उपयोगकर्ता द्वारा किसी कार्रवाई को पूरा करने पर अपडेट हो सकते हैं। JavaScript का उपयोग करके बनाया जा सकता है:

  • पॉप-अप फीडबैक फॉर्म,
  • एनीमेशन इफेक्ट,
  • इंटरएक्टिव मैप,
  • ऑनलाइन स्टोर में बास्केट,
  • अक्सर अपडेट होने वाली सामग्री वाली साइटें (वेदर रिपोर्ट, एक्सचेंज रेट),
  • और पेज स्क्रॉल होने पर सामग्री लोड करना, आदि।

पेज के HTML में बाहरी JavaScript फाइल का एक उदाहरण:

HTML में बाहरी JavaScript फाइल का उदाहरण

बाहरी फाइलों से जुड़ी समस्याएँ

  • छवियों या CSS फाइलों को लोड करने में समस्याएँ वेब संसाधनों के दृश्य घटक को बिगाड़ सकती हैं क्योंकि इसके तत्व गलत तरीके से प्रदर्शित हो सकते हैं या बिल्कुल गायब हो सकते हैं।
  • यदि JavaScript फाइलें लोड नहीं होती हैं, तो यह परिणामस्वरूप पेज सामग्री का कुछ हिस्सा JavaScript प्रसंस्करण के बाद ठीक से प्रदर्शित नहीं होगा। विभिन्न कार्यों का प्रदर्शन बाधित हो सकता है। उदाहरण के लिए; ऑर्डर देना, बास्केट लोड करना, मेनू कार्य, आदि। 
  • प्रतिष्ठित वेब संसाधनों से फॉन्ट या JavaScript काउंटर डाउनलोड करना पूरी तरह से सुरक्षित है। हालाँकि, कम-ज्ञात साइटों पर होस्ट किए गए छवियों, CSS और JS के साथ बाहरी फाइलों का उपयोग करने से जुड़ी गंभीर जोखिम हैं।
  • जब कोई तीसरा पक्ष संसाधन आपके साइट पर उपयोग की जा रही फाइल को हटा देता है, तो यह काम करना बंद कर देगा या सही तरीके से प्रदर्शित नहीं होगा। एक उदाहरण जो हमने पहले देखा है वह एक कंपनी है जिसने सभी छवियों को एक बाहरी वेब संसाधन के माध्यम से पोस्ट किया था जो उसकी छवि लोड स्पीड को तेज करता था। एक साल बाद, यह संसाधन अस्तित्व में नहीं रहा, और उनके ऑनलाइन स्टोर, ब्लॉग, आदि में सभी छवियाँ गायब हो गईं। परिणामस्वरूप, साइट की पोजीशन तेजी से गिर गईं, और SERP में साइट की पोजीशन बहाल करने के लिए नई छवियाँ खोजना और साइट बहाल करना लंबा समय लगा।
  • स्रोत द्वारा बाहरी CSS या JS फाइलों को अन्य फाइलों पर रीडायरेक्ट करने के लिए सेट करना भी आपकी साइट के प्रदर्शन और संचालन पर नकारात्मक प्रभाव डाल सकता है।
  • यदि आपके पास CSS और JS फाइलों को होस्ट करने वाले सर्वर तक पहुंच नहीं है, तो आप उनकी संपीड़न और कैश को कॉन्फिगर नहीं कर सकते और 5XX त्रुटियों (आंतरिक सर्वर त्रुटियाँ) को डीबग नहीं कर सकते।
  • यदि साइट (बाहरी फाइलों का स्रोत), हैक हो जाती है, तो उनमें दुर्भावनापूर्ण कोड दिखाई दे सकता है, जो आपकी साइट को खतरे में डालेगा और इसके विश्वास कारकों में कमी लाएगा। उदाहरण के लिए, यदि आपकी साइट उपयोगकर्ता कार्ड डेटा स्वीकार करती है (उन्हें भुगतान प्रणालियों पर रीडायरेक्ट किए बिना), हैकर्स JavaScript इंजेक्ट कर सकते हैं जो भुगतान फॉर्म को बदल देगा और यह डेटा चुरा लेगा।

"बाहरी फाइलें" रिपोर्ट की सामग्री

रिपोर्ट आपकी साइट पर उपयोग की जा रही बाहरी छवि फाइलों, CSS और JavaScript को दिखाती है।

बाहरी फाइलें रिपोर्ट दिखाती हुई

  1. चेकबॉक्स को हाइलाइट करके, आप रिपोर्ट में प्रदर्शित किए जाने वाले फाइल प्रकारों का चयन कर सकते हैं।
  2. बाहरी फाइल URL।
  3. डोमेन जहाँ उपयोग की जा रही फाइल स्थित है।
  4. बाहरी फाइल प्रकार (छवि, CSS या JavaScript)।
  5. आपकी साइट के पृष्ठ जिनमें यह फाइल है। पृष्ठों की सूची "दिखाएँ" बटन पर क्लिक करने पर खुलती है।

बाहरी फाइलें रिपोर्ट का स्क्रीनशॉट

सिफारिशें

आप अपनी बाहरी फाइलों को होस्ट करने के लिए बड़े पोर्टलों का उपयोग कर सकते हैं। संदेहास्पद स्रोतों से फाइलों को स्थानांतरित और अपनी साइट पर सहेजा जाना चाहिए।

यदि आप तीसरे पक्ष की छवियों, CSS या JS फाइलों का उपयोग बंद नहीं कर सकते, तो अपनी स्थिति को ट्रैक करने के लिए Labrika रिपोर्ट डेटा का उपयोग करें।

उदाहरण के लिए, यदि फाइल को किसी अलग URL पर रीडायरेक्ट किया गया था, तो आपको साइट कोड में संबंधित लिंक को अपडेट करना होगा।

टूटे हुए छवियों, JavaScript और CSS फाइलों को निगरानी करना महत्वपूर्ण है जो 404-प्रतिक्रिया कोड लौटाती हैं। ऐसी प्रतिक्रिया इंगित करती है कि अनुरोधित फाइल मौजूद नहीं है, इसलिए आपको इसे बदलना होगा।

उपयोगकर्ता डेटा चुराने आदि के लिए बाहरी फाइलों को दुर्भावनापूर्ण कोड के लिए जांचना भी महत्वपूर्ण है।

समस्या को कैसे ठीक करें?

यह आपकी साइट पर बाहरी डोमेन से उपयोग की जा रही सभी बाहरी फाइलों, जैसे छवियाँ, CSS और JS को सूचीबद्ध करता है। यह आपको यह स्पष्ट समझ देगा कि आपकी साइट पर कौन सी तीसरे पक्ष की फाइलें उपयोग की जा रही हैं।

इस रिपोर्ट का उपयोग इन विभिन्न फाइलों की स्थिति की जांच करने और सत्यापित करने के लिए किया जा सकता है कि वे अभी भी ठीक से काम कर रही हैं। यदि कोई त्रुटियाँ हैं जैसे 404 - पेज नहीं मिला तो आप URL को सही कर सकते हैं, या यदि दुर्भावनापूर्ण कोड का उपयोग किया जा रहा है, तो आप इसे अपनी साइट से हटा सकते हैं।