अपनी साइट में तेजी लाने - स्वचालित GLUING + GZIP

साइट की वापसी को गति देने के लिए बहुत सारे सुझाव हैं - यह नगीनक्स और क्लस्टरिंग के माध्यम से स्टैटिक्स है, और सभी प्रकार की मुश्किल प्रौद्योगिकियों का एक गुच्छा है। हालांकि, सभी पुस्तकों में जो यह सलाह देती हैं कि आप साइटों पर भार कैसे बढ़ा सकते हैं, आप लगातार दो दोहराए जाने वाले विषयों - "सीएसएस / जेएस ग्लूइंग" और "कंप्रेशन को सक्षम करना" पा सकते हैं।

एक साथ चिपकाने
सब कुछ सरल है - उदाहरण के लिए यदि आपके पास पृष्ठ पर 3 सीएसएस फाइलें और 5 जेएस हैं, तो ब्राउज़र को लोड करते समय 8 कनेक्शन बनाने और उनसे डेटा डाउनलोड करना होगा, और जैसा कि आप जानते हैं, कई बड़ी फाइलें कई छोटे लोगों की तुलना में बेहतर हैं। यह इस तथ्य के कारण है कि ब्राउज़र प्रत्येक कनेक्शन सेटअप के लिए समय बिताता है और अक्सर बड़े - डाउनलोड समय के 40% तक।

मैं एक निश्चित बैच फ़ाइल लिखने के मानक तरीकों की तरह नहीं था, जो आवश्यक फाइलों पर जाकर उन्हें एक में, सिद्धांत रूप में गोंद कर देगा, क्योंकि पेन के साथ काम करने के लिए जो स्वचालित रूप से किया जा सकता है वह मौलिक रूप से गलत है, इस मामले में, कम से कम क्योंकि यह प्रभावित करता है या तो विकास में या उत्पादन में (अतिरिक्त क्रियाएं)।

जैसा कि वे कहते हैं, "कभी नहीं फिर से लिखना जो आप बस काट और पेस्ट कर सकते हैं";)

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

वेब पर क्या संपीड़ित किया जा सकता है और क्या होना चाहिए? कोई भी पाठ अनुरोध, जैसे: JS / CSS / JSON / HTML।

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

यदि आपके पास VDS है और आप अपने स्वयं के मालिक हैं, तो मॉड-डीफ़्लैट का उपयोग करें, क्योंकि यह अच्छी तरह से डिबग किया गया है और नेटवर्क पर अनुप्रयोगों के बहुत सारे उदाहरण हैं।

और हम सामान्य बंधकों पर लौटेंगे - क्या कोई रास्ता है? यहां तक ​​कि अगर आप खाए गए हैं, तो आपके पास हमेशा दो तरीके हैं - यहां एक रास्ता है। इसके अलावा, यह कार्य बहुत अच्छी तरह से पिछले एक पर रखा गया है - अब मैं समझाऊंगा कि क्यों।

अधिकांश JS / CSS और अन्य पाठ स्थिर हैं, अर्थात वे साइट के कामकाज के दौरान नहीं बदलते हैं - यह "ग्लूइंग" + तुरंत संपीड़ित पर क्लॉज को संतुष्ट करने के लिए उन्हें संयोजित करने के लिए समझ में आता है।

हम प्राप्त फ़ाइलों को एक निश्चित कैश में डालेंगे, जहां से हमारी अपाचे ले जाएगी और उन्हें दे देगी। इसके अलावा, हम मॉड-रीराइट के माध्यम से प्रक्रिया को स्वचालित करते हैं।

एल्गोरिथ्म कुछ इस तरह होगा :

1. एक विशेष यूआरएल के साथ एक फ़ाइल का अनुरोध
2. यदि ग्राहक संपीड़न का समर्थन करता है और इस प्रकार की एक संपीड़ित फ़ाइल हमारे कैश में है - हम प्रोसेसिंग देते हैं और पूरा करते हैं
3. अगर संपीड़न समर्थित नहीं है और इस प्रकार की एक फ़ाइल है - इसे वापस दें और प्रसंस्करण समाप्त करें
4. अन्यथा, हमारे हैंडलर को चलाएं

इस बात पर सहमति व्यक्त करें कि फॉर्म "/ गोंद / ...." के URL तक पहुँचने पर हमारा मॉडल चालू हो जाता है।
और फाइलें "/ स्थिर / गोंद / ..." में होंगी।

इस मामले में, हम एक और खरगोश को मारते हैं - फाइलें केवल एक बार PHP के माध्यम से दी जाएंगी - गठन के दौरान, और फिर सब कुछ बड़े लोगों की तरह होगा :) वेब सर्वर को चाहिए और स्टेटिक्स देगा।

सिद्धांत रूप में, आप फ़ोल्डर को URL से मेल कर सकते हैं, फिर मॉड-रीराइट कॉन्फिग थोड़ा सरल हो जाएगा, लेकिन यह इतना दिलचस्प नहीं होगा, सामान्य तौर पर आप हमेशा सरल बना सकते हैं :)

मुझे आशा है कि इस तरह की सामग्री वाली .htaccess फ़ाइल आपकी साइट के मूल में पहले से ही रहती है:


RewriteEngine On
RewriteBase /
RewriteRule ^.*$ index.php [QSA,L]


खैर, या तो समान। मुख्य शर्त यह है कि यदि मॉड-रीराइट ने आने वाले URL के साथ क्या करना है, यह नहीं पाया, तो यह अंततः किसी प्रकार की स्क्रिप्ट फ़ाइल को कॉल करेगा।
इस मामले में, index.php

हमारे एल्गोरिथ्म को जोड़ने के लिए, .htaccess में निम्नलिखित लिखें:

संपीड़ित .gz फ़ाइलों और साथ ही .jz.gz और .css.gz के लिए समर्थन जोड़ें


AddEncoding gzip .gz

< FilesMatch " \. js.gz$" >
#
Header set Cache-control: private
Header append Vary User-Agent

ForceType "text/javascript"
Header set Content-Encoding: gzip
AddCharset windows- 1251 .js.gz
</ FilesMatch >
< FilesMatch " \. css.gz$" >
#
Header set Cache-control: private
Header append Vary User-Agent

ForceType "text/css"
Header set Content-Encoding: gzip
</ FilesMatch >


हमारी फ़ाइलों को अपलोड करने के लिए एक नियम जोड़ें (एक भौतिक फ़ोल्डर में URL को छोड़ कर)


RewriteCond %{ENV:REDIRECT_GZ} = 1
RewriteCond %{REQUEST_URI} ^/glue/(.+)$
RewriteCond %{DOCUMENT_ROOT}/static/glue/%1 -f
RewriteRule . - [L]


संपीड़न के लिए ग्राहक सहायता के लिए चेक जोड़ें


RewriteCond %{REQUEST_URI} ^/glue/(.+)$
RewriteCond %{DOCUMENT_ROOT}/static/glue/%1.gz -f
RewriteCond %{HTTP:Accept-Encoding} ^.*?gzip.*$ [NC]
RewriteCond %{HTTP_USER_AGENT} !^konqueror [NC]
RewriteRule ^siteglue/(.*)$ /static/glue/$1.gz [L,E=GZ: 1 ]


यदि संपीड़न समर्थित नहीं है


RewriteCond %{REQUEST_URI} ^/glue/(.+)$
RewriteCond %{DOCUMENT_ROOT}/static/glue/%1 -f
RewriteRule . static/glue/%1 [L,E=GZ: 1 ]


अब अपने सबसे महत्वपूर्ण जादू - इन बहुत ही फाइलों की स्वचालित पीढ़ी को लेते हैं।

यहाँ एक और चाल है, इस मामले में - एक और सम्मेलन - html फ़ाइलों में हम निम्नलिखित में सीएसएस या जेएस के लिए अनुरोध लिखेंगे:
"-Glue/1.css-2.css-3-4-5.css" , जहां "-" प्रतिस्थापन "/" है, और "-" फ़ाइल विभाजक है।
इसके अलावा, नाम में केवल अंग्रेजी अक्षर, संख्या और प्रतीक "_" हो सकते हैं, मेरे लिए - यह पर्याप्त से अधिक है।

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

Index.php (या .htaccess के अनुसार यह क्या चलता है?) में फ़ाइल में, हम एक हैंडलर जोड़ते हैं जो हमारे "/glue/.*" के अनुपालन के लिए URL की जांच करता है और, संयोग के मामले में, गूंज बनाता है (Glue :: generate ($ str)) , जहां $ str वह है जो हमें पिछली स्लैश के बाद URL में है, अर्थात "/glue/a.js" के लिए यह "a.js" होगा

गोंद वर्ग ही ऐसा है


class Glue {
static $allowedExt = array (
"js" => array ( "check" => "/^js/.*?.js$/" , "delimeter" => ";n" , "mime" => “text / javascript” ) ,
"css" => array ( "check" => "/^css/.*.css$/" , "delimeter" => "n" , "mime" => “text / css” ) ,
) ;

static function generate ( $str ) {
if ( ! $str ) return null ; // URL

$files = array ( ) ;
preg_replace ( "/((?:[a-z0-9_.]+-)+[a-z0-9_.]+.([a-z0-9]+))(?:--|$)/ie" , " $files []=str_replace( '-', '/', " 1 ")" , $str ) ;
if ( count ( $files ) == 0 ) return null ; // URL

$srcF = “ / static ” ; // ,
$dstF = “ / glue” ; //,

$content = "" ;

$cext = substr ( strrchr ( $files [ 0 ] , '.' ) , 1 ) ;
if ( $cext === false ) return null ; //

$fd = null ;
foreach ( self :: $allowedExt as $k => $v ) {
if ( $k == $cext ) {
$fd = $v ;
break ;
}
}
if ( ! $fd ) return null ; //

$usedNames = array ( ) ;
$fdC = & $fd [ "check" ] ;
$fdD = & $fd [ "delimeter" ] ;
foreach ( $files as $name ) {
$ext = substr ( strrchr ( $name , '.' ) , 1 ) ;
if (
$ext === false ||
in_array ( $name , $usedNames ) ||
$ext != $cext ||
! preg_match ( $fdC , $name )
) return null ; // ,

$usedNames [ ] = $name ;
$filec = file_get_contents ( " {$srcF} / {$name} " ) ;
if ( ! $filec ) return null ; //
$content .= $content != "" ? $fdD . $filec : $filec ;
}


//
file_put_contents ( " {$dstF} / {$str} " , $content ) ;

//
$gzip = gzencode ( $content , 9 ) ;; //gzdeflate( $content, 9 );
if ( $gzip ) file_put_contents ( "/ {$dstF} / {$str} .gz" , $gzip ) ;

// mime-
header ( "Content-type: " . $fd [ "mime" ] , true ) ;
return $content ;
}
}


फिर, यह केवल ऐसा करने का एक तरीका दिखाता है - यह कैसे स्थिर वर्ग को पसंद नहीं है - आप किसी भी अन्य तरीके को चुन सकते हैं - लाठी और महिलाओं के साथ भारी व्यवहार नहीं;)

यह सब, सिद्धांत रूप में, यह परियोजना फाइलों पर जाने के लिए बनी हुई है - फिर भी "मैनुअल" काम का एक टुकड़ा है :( - और स्क्रिप्ट के एक गुच्छा के बजाय एक लिखें, लेकिन ऊपर वर्णित नियमों के अनुसार।

सब कुछ - पहले अनुरोध पर सब कुछ स्वचालित रूप से एकत्र किया जाएगा और दिया जाना शुरू हो जाएगा।

एक और छोटा जोड़ - और PHP में दी गई सामग्री के साथ क्या करना है?
इसे भी निचोड़ना होगा!

ऐसा करने के लिए, उस स्थान पर जहां आप पाठ फॉर्म की फाइलें देते हैं, जहां उत्पन्न सामग्री दी गई है - उदाहरण के लिए, प्रतिध्वनि ($ सामग्री);

निम्नलिखित कार्य करें:


if ( isClientSupportGzip ( ) ) {
ob_start ( "ob_gzhandler" ) ;
echo ( $content ) ;
ob_end_flush ( ) ;
} else echo ( $content ) ;


यह वितरित गतिशील सामग्री को संपीड़ित करेगा यदि क्लाइंट संपीड़न का समर्थन करता है। फ़ंक्शन जो इसे चेक करता है वह इंटरनेट से लिया गया है और इस तरह दिखता है:


function isClientSupportGzip ( ) {
if ( headers_sent ( ) || connection_aborted ( ) ) return false ;
if ( stripos ( getenv ( "HTTP_ACCEPT_ENCODING" ) , "gzip" ) === false ) return false ;
if ( stripos ( getenv ( "HTTP_USER_AGENT" ) , "konqueror" ) !== false ) return false ;
return true ;
}


विकास के लिए, मैं किसी प्रकार के विकास मोड को लगातार प्राप्त करने की सलाह देता हूं और यदि आप इसे 1 पर सेट करते हैं, तो बस फ़ाइलों को कैश में न लिखें और डायनेमिक्स को संपीड़ित न करें - आपको हर js फ़ाइल परिवर्तन के साथ हमारी कैश निर्देशिका को चढ़ने और साफ़ करने की आवश्यकता नहीं है।

यह सब - हमने अपनी साइट को थोड़ा फैलाया) मेरी टिप्पणियों के अनुसार, वापसी की गति में वृद्धि 30-40% हो सकती है।


यदि कोई सुधार, सुझाव या आलोचना है - तो आपका टिप्पणी में स्वागत है - मैं बहुत आभारी रहूंगा, क्योंकि वे कहते हैं - एक सदी सीखें)

फास्ट आप साइटों, अधिकतम संपीड़न और हर्षित ग्राहकों;)

पुनश्च

यदि आप किसी भी लायब्रेरी का उपयोग करते हैं, उदाहरण के लिए jquery, एक ही स्थान के साथ आपके प्रोजेक्ट के सभी पृष्ठों पर, मैं सुझाव देता हूं कि आप इसे अभी भी एक होटल फ़ाइल में रखें, वही एकल css पर लागू होता है - अर्थात यह ब्राउज़र द्वारा तेजी से कैश किया जाता है।

जब जेएस को चमकाते हैं, तो ख़ासियत को याद रखें - ",", के माध्यम से गोंद करना आवश्यक है पिछली पंक्ति के बाद पिछली फ़ाइल में "नहीं हो सकता है?"

कैश जनरेशन हैंडलर लिखते समय, हैकर्स के बारे में याद रखें - सब कुछ और सब कुछ जांचें, अनपढ़ परिरक्षण के साथ आप एक साथ चिपक सकते हैं और स्टैटिक्स के रूप में बहुत सी दिलचस्प चीजें प्राप्त कर सकते हैं, कम से कम आप मृत्यु पर जा सकते हैं और अपने डिस्क स्थान को रौंदने की कोशिश कर सकते हैं, इसलिए भी श्री उचित तरीके से मदद नहीं करते हैं - सामान्य रूप से अधिक सटीक रूप से। ।

यदि आपकी साइट सबसे अलोकप्रिय एन्कोडिंग में है, तो वह सब कुछ चॉकलेट है, प्रतिस्थापित करें
ForceType "Text / javascript" पर ForceType "text / javascript"; सामग्री = खिड़कियाँ -1251 »
और जोड़ें: AddCharset windows-1251 .js और AddCharset windows-1251 .css

और थोड़ी सलाह, फ़ाइलों को निर्दिष्ट करने के लिए उसी क्रम को जारी रखें, क्योंकि तकनीकी रूप से "/glue/a.js-b.js" और "/glue/b.js-a.js" एक ही बात है, लेकिन व्यवहार में आपको मिलेगा कैश में दो फाइलें ...

टिप्पणियों से

इमेनम और ट्रूड्रैगो ने सुझाव दिया कि अपस्फीति के लिए इष्टतम स्तर 9 नहीं, बल्कि 6 है