तेजी से लोडिंग / कम बैंडविड्थ के लिए सीएसएस की कमी


9

क्या बैंडविड्थ के संदर्भ में किसी विशिष्ट पृष्ठ के लिए सीएसएस को हटाना / अप्रयुक्त नियमों को हटाना या हम जंगल में इस ओवरहेड को हटाने के लिए कैशिंग (हेडर / अंतिम-संशोधित) पर भरोसा कर सकते हैं?

चियर्स

साथ ही, सभी को शुभकामनाएँ!

जवाबों:


8

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

इसके अतिरिक्त, सुनिश्चित करें कि आपके पास gzip संपीड़न सक्षम है। यह बैंडविड्थ को कम करने के लिए एक कठोर राशि करेगा।


1
बात यह है, यदि आप एक पृष्ठ पर फ़ाइल का आकार कम करके उसे अन्य पृष्ठों में अद्वितीय या एम्बेडेड CSS पर लोड कर रहे हैं, तो आपने कैशिंग के लाभों को नकार दिया है। अपने यूजर्स को पेज 2- X पर एक शानदार अनुभव प्रदान करने के लिए एक हिट लेने के लिए सबसे अच्छा है। इसलिए, अपने सीएसएस को जितना संभव हो उतना साफ करें। एक में गुणक मिलाएं। लेकिन निरर्थक मत बनो, (थोड़ा) एक से एक बार हिट करने के लिए अद्वितीय कोड।
bpeterson76

2

मुझे नहीं लगता कि यह या तो है। फ़ाइल का आकार कम करने से उपयोगकर्ता को पहली बार फ़ाइल तक पहुँचने में मदद मिलेगी। कैशिंग उनकी दूसरी यात्रा में मदद करेगा।


2

अनुकूलन के लिए बहुत अधिक संभावित स्थान हैं जिनका अधिक प्रभाव पड़ेगा ...

यदि आप सख्ती से प्रदर्शन लाभ प्राप्त कर रहे हैं, तो सीएसएस स्रोत अनुकूलन खाद्य श्रृंखला पर बहुत कम है।

CSS स्रोत में अतिरिक्त cruft पहली बार स्टाइलशीट लोड होने पर एक मामूली हिट लेगा। कैशिंग को तब से इस मुद्दे का ध्यान रखना चाहिए।


1

किसी भी समय आप सामान को हटा सकते हैं आप लोड करने की गति में सुधार करेंगे, यदि केवल लापरवाही से। इसके अलावा, यह सामान को हटाने के लिए अच्छा है जो आप कोड स्पष्टता के लिए उपयोग नहीं कर रहे हैं।


एक उदाहरण के रूप में, एक प्रमुख theme.css फ़ाइल जहां प्रत्येक पृष्ठ केवल लगभग 30% नियमों का उपयोग करता है ... लेकिन मिश्रण एक निगाहारे को ठीक करने के लिए विभाजन करेगा।
बेल

0

मुझे संदेह है कि यह आपकी साइट की गतिशीलता पर निर्भर करता है। यदि आपके पास कई दोहराने वाले आगंतुक हैं और बहुत से नए आगंतुक नहीं हैं, तो कैशिंग संभवतः पर्याप्त है। यदि, हालांकि, आपके पास बहुत से नए आगंतुक हैं (और विशेष रूप से यदि आप एक अच्छा पहला प्रभाव बनाना चाहते हैं), तो मुझे लगता है कि आपको अपने सीएसएस के आकार को यथासंभव कम करना चाहिए।


0

कुछ अप्रयुक्त सीएसएस को हटाने से स्पष्ट रूप से एक पृष्ठ पर लोड समय में सुधार होगा, लेकिन आपको इसे कई पृष्ठों पर प्रभाव के साथ भी संतुलित करना होगा। आप बहुत से HTTP अनुरोधों से भी बचना चाहते हैं।

याद रखें, सीएसएस लोडिंग को गति देने के लिए सीएसएस gzipping सबसे प्रभावी तरीका है। एक फ़ाइल के बीच का अंतर और हटाए गए कुछ अनावश्यक ब्लॉकों के साथ दूसरे के बीच का अंतर gzip के बाद नगण्य है।


0

भले ही प्रति-पृष्ठ के आधार पर अप्रयुक्त सीएसएस को हटाकर प्रदर्शन को कम कर दिया गया हो (और मुझे पूरा यकीन है कि कैशिंग इससे आगे निकल जाएगा, जब तक कि आप मौलिक रूप से विभिन्न पृष्ठों के बारे में बात नहीं कर रहे हैं), आपको ऐसा करने के लिए आवश्यक रखरखाव समय में कारक चाहिए। । जब तक आप Google नहीं होते, तब तक प्रत्येक उपयोगकर्ता को एक सेकंड का दसवां हिस्सा बचाने के लिए साइट के जीवन पर कई दिन बिताने के लायक नहीं है।

इसका बहुत कुछ आपकी साइट के उपयोग प्रोफ़ाइल के साथ करना है। यदि आप वास्तव में चिपचिपे हैं, तो कैशिंग हैंड्स-डाउन जीतता है। हालांकि, यदि आपके पास उच्च उछाल दर है, तो आप अनुकूलित सीएसएस के साथ बेहतर हो सकते हैं (या आप सीएसएस अनुकूलन पर जो समय बर्बाद कर रहे हैं वह आपकी साइट को बेहतर बना देगा!)।

एक दृष्टिकोण जो आप ले सकते हैं यदि आपके पास पृष्ठ-विशिष्ट मार्कअप है, तो जेनेरिक साइट-वाइड सीएसएस फ़ाइल है, और HTML दस्तावेज़ के सिर में प्रति पृष्ठ नियम एम्बेड करें।


0

आप दोनों दुनिया से सर्वश्रेष्ठ प्राप्त कर सकते हैं, निष्पादन समय पर फ़ाइल को छोटा कर सकते हैं और आउटपुट को gzip कर सकते हैं।
स्रोत फ़ाइल तब भी पठनीय होती है जब आपको इसे संपादित करने की आवश्यकता होती है, लेकिन जब आप इसे डाउनलोड करते हैं तो यह संकुचित होता है

पहला: htaccess का उपयोग एपेक के रूप में सभी css फाइलों को php स्क्रिप्ट के रूप में बताने के लिए और जब टेक्स्ट / css प्रकार के आउटपुट को संपीड़ित करने के लिए करें

.htaccess AddHandler php5-cgi .css addType टेक्स्ट / css .css AddOutputFilterByType DEFLATE टेक्स्ट / css

दूसरा: डाउनलोड शुरू होने से पहले सीएसएस कोड को छोटा करने के लिए कॉलबैक फ़ंक्शन के साथ आउटपुट बफ़रिंग का उपयोग करें, समय सीमा समाप्त भी सेट करें ताकि फ़ाइल कैश हो जाए

अपनी सीएसएस फ़ाइल में

<?php
ob_start("trima");
header("Content-type: text/css; charset=utf-8");
ob_start();
date_default_timezone_set('GMT');
$lasmod = "Last-Modified: " . strftime ("%a, %d %b %Y %T GMT", filemtime (__FILE__));
Header($lastmod);
$offset = 3600*24*30*12;
$expire = "Expires: " . date("D, d M Y H:i:s", time() + $offset) . " GMT";
Header($expire);
function trima($str) {
    $str = str_replace(array("\n", "\r", "\t", "\o", "\xOB"), '', $str); // remueve enter tabs y demas
    $str = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $str); // remueve comentarioa
    $str = ereg_replace("[ ]+", " ", $str);                         //remueve espacios multiples
    $rep = array( '{ '=>'{', ' }'=>'}', '; '=>';', ', '=>',', ' {'=>'{', '} '=>'}', ': '=>':', ' ,'=>',', ' ;'=>';' ); // remueve espacios inecesarios
    $str = strtr($str, $rep);
    return $str;
}
?>
css content here

तीसरा: लाभ?

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.