क्या लिंक उपसर्गों में पूर्वनिर्मित कार्य करता है?

10

जब मैं एक साधारण लैंडिंग पेज से हैवीवेट सिंगल पेज ऐप पर क्लिक करता हूं, तो एक प्रदर्शन को बढ़ावा देने के लिए कुछ इस तरह का उपयोग करने की कोशिश कर रहा हूं:

<link rel="prefetch" href="https://example.com" as="document" />
<link rel="prefetch" href="https://example.com/app.js" as="script" />
<link rel="prefetch" href="https://example.com/app.css" as="style" />

ऐसा लगता है कि जब मेरा लैंडिंग पृष्ठ उपडोमेन पर है, तो कोई ध्यान देने योग्य प्रदर्शन नहीं बढ़ा है। कहो, https://subdomain.example.com।

जब मैं यात्रा करने के लिए एक लिंक पर क्लिक करता https://example.comहूं, तो मुझे अभी भी क्रोम नेटवर्क टैब में एक लंबा विलंब दिखाई देता है app.jsऔर app.cssइसे लोड किया जाता है:

यहां प्रीफ़ेचिंग अक्षम के साथ एक ही संसाधन है:

इसमें कुल मिलाकर लगभग उतना ही समय लगता है।

प्रीफ़ैच कैश के साथ भरी हुई संपत्ति में से एक के लिए हेडर का अनुरोध करें:

सामान्य:

Request URL: https://example.com/css/app.bffe365a.css
Request Method: GET
Status Code: 200  (from prefetch cache)
Remote Address: 13.226.219.19:443
Referrer Policy: no-referrer-when-downgrade

उत्तर:

accept-ranges: bytes
cache-control: max-age=31536000
content-encoding: gzip
content-length: 39682
content-type: text/css
date: Mon, 06 Jan 2020 21:42:53 GMT
etag: "d6f5135674904979a2dfa9dab1d2c440"
last-modified: Mon, 06 Jan 2020 20:46:46 GMT
server: AmazonS3
status: 200
via: 1.1 example.cloudfront.net (CloudFront)
x-amz-cf-id: dO3yiCoPErExrE2BLYbUJaVye32FIJXXxMdI4neDGzGX9a6gcCDumg==
x-amz-cf-pop: LAX50-C1
x-amz-id-2: 1O0LmihxpHIywEaMQWX7G3FDAzxtH9tZq1T/jeVLMzifFSJSIIJSS6+175H61kKdAq6iEbwfs2I=
x-amz-request-id: AF35C178092B65D4
x-cache: Hit from cloudfront

निवेदन:

DNT: 1
Referer: https://example.com/auth/join
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.117 Safari/537.36

मेरा प्रश्न है: यदि क्रोम इंगित करता है कि प्रीफैच कैश का उपयोग किया जाता है तो महत्वपूर्ण सामग्री डाउनलोड समय क्यों है?

ऐसा लगता है कि क्रोम में विभिन्न प्रकार के कैश हैं: प्रीफैच कैश, डिस्क कैश और मेमोरी कैश। डिस्क कैश और मेमोरी कैश बहुत तेज (5ms और 0ms लोड समय) हैं। हालांकि कभी-कभी 300ms डाउनलोड समय के साथ प्रीफैच कैश बहुत बेकार है। क्या मुझे ऐसा होने की तकनीकी व्याख्या मिल सकती है? क्या यह क्रोम के साथ बग है? मैं Chrome 79.0.3945.117 पर हूं।

html link-prefetch

— Maros
स्रोत

Prefetch का उपयोग भविष्य के नौगनों को गति देने के लिए किया जाता है, ( web.dev/link-prefetch ) से एक संक्षिप्त विवरण देखें

— मोहम्मद

हां, प्रीफैच को भविष्य की नौसेनाओं को गति देना चाहिए। फिर मेरे मामले में इसे गति क्यों नहीं दी? समय रेखांकन देखें।

— मरस

क्या आप किसी अन्य डोमेन पर उपडोमेन सामग्री रखने का प्रयास कर सकते हैं और जांच सकते हैं कि क्या लोड करने में भी उतना ही समय लगता है? आपको लगता है कि बिना उप-डोमेन (यानी अन्य डोमेन) केस कैसे काम करता है, यह दिखाने के बिना उपडोमेन एक मुद्दा हो सकता है। यदि उपडोमेन एक मुद्दा है, तो यह पता लगाने के लिए अगला कदम होगा कि क्या कोई क्रोम कॉन्फ़िगर करने के लिए सेटिंग है जो ऐसा करेगा, या

— मार्टिन

या दोनों उप-डोमेन और / या इंडी डोमेन के लिए समान लोडिंग समय अन्य ब्राउज़रों पर समान टूलसेट जैसे फ़ायरफ़ॉक्स इंस्पेक्टर या ओपेरा के साथ दिखाई देता है? यदि एक ही समय समस्या अन्य ब्राउज़रों पर उत्पन्न हो रही है जो अलग-अलग इंजनों का उपयोग करते हैं (मुझे यकीन नहीं है कि आप जो करते हैं और अधिक नहीं करते हैं), तो यह अच्छी तरह से बग हो सकता है - मैं पूरी तरह से विश्वास कर सकता हूं कि यह क्रोम बग हो सकता है यदि ये नोट किए गए समय मान अन्य ब्राउज़रों पर विशेष रूप से भिन्न हैं।

— मार्टिन

0

<link rel=prefetch>एक वेब पेज में जोड़ने से ब्राउज़र को पूरे पृष्ठों या कुछ संसाधनों (जैसे स्क्रिप्ट या सीएसएस फ़ाइलें) को डाउनलोड करने के लिए कहता है, जिसे उपयोगकर्ता को भविष्य में आवश्यकता हो सकती है। यह फर्स्ट कंटेंटफुल पेंट और टाइम टू इंटरएक्टिव जैसे मेट्रिक्स में सुधार कर सकता है और अक्सर बाद के नेवीगेशन को तुरंत लोड करने के लिए प्रकट कर सकता है।

प्रीफ़ैच हिंट उन संसाधनों के लिए अतिरिक्त बाइट्स का उपभोग करता है जिनकी तुरंत आवश्यकता नहीं होती है, इसलिए इस तकनीक को सावधानीपूर्वक लागू करने की आवश्यकता है; जब आप आश्वस्त होते हैं कि उपयोगकर्ताओं को उनकी आवश्यकता होगी, केवल प्रीफ़ैच संसाधन। जब उपयोगकर्ता धीमे कनेक्शन पर हों तो प्रीफ़ेटिंग न करें। आप नेटवर्क सूचना एपीआई के साथ इसका पता लगा सकते हैं।

यह निर्धारित करने के लिए अलग-अलग तरीके हैं कि प्रीफ़ैच के लिए कौन से लिंक हैं। सबसे सरल पहले लिंक पर या पहले पृष्ठ पर पहले कुछ लिंक को प्रीफ़ैच करना है। ऐसी लाइब्रेरी भी हैं जो अधिक परिष्कृत दृष्टिकोणों का उपयोग करती हैं, बाद में इस पोस्ट में समझाया गया- https://web.dev/link-prefetch/ ।

— मोहम्मद यासीर
स्रोत

मैं इस बात का स्पष्टीकरण प्राप्त करना चाह रहा था कि लिंक प्रीफ़ेटिंग मेरे विशेष मामले में चीजों को गति क्यों नहीं दे रहा है। क्या यह सबडोमेन, सर्विस वर्कर या कुछ और की वजह से है? यदि आप मेरे स्क्रीनशॉट्स को देखते हैं, तो आप देख सकते हैं कि ब्राउज़र प्रीफ़ेटिंग के बावजूद सामग्री को फिर से डाउनलोड करता है।

— मारोस

0

मैं केवल अनुमान लगा सकता हूं। आत्मविश्वास का जवाब शायद आप केवल प्रयोग के माध्यम से ही पा सकते हैं। खाते के लिए बहुत अधिक चर हैं। लेकिन यहाँ कुछ विचार हैं:

prefetchएक ब्राउज़र के लिए एक संकेत है। ब्राउज़र कुछ मनमाने कारणों से इसे अनदेखा कर सकता है। इससे ज्यादा इसकी प्राथमिकता सबसे कम है।
उदाहरण के लिए, कृपया अपनी ब्राउज़र सेटिंग जांचें:
Menu/Settings/Advanced/Privacy and security/Preload pages for faster browsing and searching
(या ऐसा कुछ)।
अगर किसी भी तरह से आप मोबाइल इंटरनेट का उपयोग कर रहे हैं तो यह भी एक समस्या हो सकती है।
https://www.technipages.com/google-chrome-prefetch
आप अपने लैंडिंग पृष्ठ से कितनी तेजी से नेविगेट करते हैं example.com?
यह देखने के लिए कि क्या कभी prefetchअनुरोध प्राप्त होता है, अपने सर्वर लॉग की जाँच करें ।
जांचें कि क्या आपका सर्वर prefetchअनुरोधों के जवाब में कुछ अजीब हेडर सेट करता है। जैसे Cache-Control: no-cache। हाँ, मुझे लगता है कि आपके पास है cache-control: max-age=31536000, इसलिए यह वास्तव में अजीब होगा, अगर सर्वर एक ही अनुरोध के लिए अलग-अलग हेडर भेजेगा (अच्छी तरह से ... लगभग एक ही , कम से कम आपने यह नहीं कहा कि वे हैं, और कम से कम हो सकता है कुछ शीर्षकों को इंगित करें कि यह एक prefetchअनुरोध है), लेकिन अजीब चीजें होती हैं।
आपको संभवतः crossoriginविशेषता जोड़ने का प्रयास करना चाहिए । उदाहरण के लिए

<link rel="prefetch" href="https://example.com/app.css" as="style" crossorigin />

यहां https://www.w3.org/TR/resource-hints/ आप इस उदाहरण को पा सकते हैं
```
<link rel="preconnect" href="//example.com">
<link rel="preconnect" href="//cdn.example.com" crossorigin>
```
आपके मामले के लिए काफी प्रासंगिक है, लेकिन दुर्भाग्य से कोई स्पष्टीकरण नहीं है।
आपके प्रश्न के मूल संस्करण में आपने सेवाकर्मियों का उल्लेख किया है ... यदि वे कुछ डाउनलोड करते हैं, या यहां तक कि स्वयं भी कुछ डाउनलोड करते हैं, तो यह भी मुद्दा हो सकता है। की सबसे कम प्राथमिकता के कारणprefetch

https://developer.mozilla.org/en-US/docs/Web/HTTP/Link_prefetching_FAQ#What_if_I.27m_downloading_something_in_the_background.3F_Will_link_prefetching_compete_for_bandwidth.3F

यदि आप मोज़िला का उपयोग करके कुछ डाउनलोड कर रहे हैं, तो किसी भी पृष्ठभूमि के डाउनलोड पूरा होने तक लिंक प्रीफ़ेटिंग में देरी होगी

मुझे लगता है कि क्रोम के लिए भी यही होता है।
क्या आपने अपने लैंडिंग पृष्ठ को मूल डोमेन पर ले जाने का प्रयास किया है? यदि, हाँ, और prefetchउम्मीद के मुताबिक काम करता है, तो हाँ - उपडोमेन मुद्दे का कारण है। और GUI संदेश Status Code: 200 (from prefetch cache)शायद सिर्फ एक गड़बड़ है। क्योंकि अभी हाल ही prefetchमें क्रोम में व्यवहार में कुछ चीजें बदलना शुरू हुईं । और मैं अभी तक नहीं जानता कि क्या चीजें बस गईं। मूल रूप से, हां, कुछ निश्चित संभावना है कि आप prefetchकेवल एक ही मूल से हो सकते हैं।

https://docs.google.com/document/d/1bKGDIePAuF6YXmmrwM33LeLvtuCsla3vTspsxsNp-f8/edit

— x00
स्रोत

आपके उत्तर को पढ़ने के बाद कुछ यादृच्छिक नोट्स: मैं लैंडिंग पृष्ठ से example.com पर बहुत धीरे-धीरे नेविगेट करता हूं, जिससे सभी संसाधनों को लोड करने के लिए पर्याप्त समय मिल सके। मैंने क्रोम में अक्षम सेवा कर्मचारियों के साथ ऊपर परीक्षण किया था। मुझे लगता है कि क्रॉसोरिगिन विशेषता कुछ और के लिए है। मैंने इसका उपयोग करने की कोशिश की और भाग्य नहीं। सबसे खराब स्थिति, मैं आपके द्वारा सुझाए गए परीक्षण को लैंडिंग पृष्ठ को मूल डोमेन पर ले जाऊंगा। मैं एक जवाब की उम्मीद कर रहा था यहाँ मुझे काम बचा लेगा।

— मारोस

1

क्या आपने एफएफ की कोशिश की है? ऊपर दिए गए MDN लिंक से: "क्या मोज़िला एक अलग होस्ट से दस्तावेज़ों को प्रीफ़ेक करेगा? हाँ, लिंक प्रीफ़ेचिंग के लिए कोई समान-मूल प्रतिबंध नहीं है। एक ही सर्वर से केवल URL पर प्रीफ़ेटिंग सीमित करने से कोई भी ब्राउज़र ब्राउज़र सुरक्षा प्रदान नहीं करेगा।" यह मार्ग पुराना हो सकता है, लेकिन फिर भी। यह जानना अच्छा होगा कि क्या वे Chrome के साथ अपने व्यवहार में भिन्न हैं।

— x00

मैंने कोशिश की, लेकिन मैं सेवा कर्मियों को अक्षम करने में सक्षम नहीं था जो प्रीफैच कैश पर पूर्वता ले रहे थे। मैं इसे एक और कोशिश दे सकता हूं।

— मारोस

@Maros, किसी तरह आप कोड ही नहीं है, या कुछ तकनीकी समस्या थी?

— x00

-1

यदि आप ont subdomain हैं और आप डोमेन से संसाधन चाहते हैं तो आपको नीचे दिए गए कोड को जोड़ना चाहिए

<link rel="preconnect" href="https://example.com">

— divyang4481
स्रोत