Skip to main content
Google Pages peed insights-feature-webtechthoughts

Google Page Speed Insights: Page Load Speed ko 100% tak badhayen.

Google Page Speed Insights:- अगर आप blog/site से जुड़े हुए हैं तो आपको पता होना चाहिय कि page speed google का top most ranking factor है| सबसे पहले हम इस चार शब्दों का अर्थ एक साथ बतलाना चाहते हैं|

 

मैं यह मान कर चल रहा हूँ कि पहले के तीन शब्दों का अर्थ आप सबों को पता है| चौथा शब्द “insight” को यहाँ पर, वो सारे factors जो एक web page के loading speed को प्रभावित करते हैं, के contextual में उपयोग किया गया है|

 

इस तरह इसे हम इस तरीके से समझ सकते हैं| Google page speed insights, google के द्वारा तैयार आंतरिक factors का report, जो एक web  page speed को प्रभावित करता है|

 

हम यहाँ पर आपको Google page speed insight कौन सा factor किन परिस्थिति में report करता है और उसका solution के बारे में discuss करेंगे|

 

Image quality को बिना घटाए हुए इसके file को छोटा रखें|

 

किसी भी blog/site में सबसे बड़ा file size media यानि photo, video और image का होता है| चूँकि एक blog में सबसे ज्यादा media के ही file होते हैं| इस वजह से ये ज्यादा memory भी acquire करते हैं| चूँकि ये file size में बड़े होते हैं तो इन्हें server से browser में लोड होने में काफी समय लगता है|

 

किस स्थिति में Google page speed insights, image optimization के लिए suggest करता है?

 

Google इस factor को तभी report करता है| जब आपने किसी बड़े size के image को अपने page पर लगाया है और use load होने में काफी समय लग रहा है|

 

इस चार्ट में यह अच्छी तरह से दिखाया गया है|

 

image-load-webtechthoughts

 

अगर आपका internet का connection slow है तो यह समय definately और भी बढ़ जायेगा|

 

इस बात से हम सभी अच्छी तरह से aware हैं कि yoast seo के content analysis tool के अनुसार एक blog post में कम से कम एक image का होना  इसके ranking level को up करता है|

 

एक image का size इसके scale(W x H) के साथ इसके resolution पर depend करता है|

 

pagespeed-image-size-webtechthoughts

 

बहुत सारे bloggers अपने blog पर अपने सुविधा के अनुसार  बड़े size के image को अपलोड कर देते हैं और ये image wordpress द्वारा auto adjust कर दिए जाते हैं जिसका इसका display ख़राब नहीं होता हैं|

 

लेकिन क्या आप जानते हैं इन बड़े images को किस तरीके से codding के through scalling किया जाता है?

 

इन images को CSS code के through scalling किया जाता है|  लेकिन ये आपके browser पर इसका full size ही download होता है|

 

इससे यह निष्कर्ष निकलता है कि बड़ा images को upload कर हम अपना memory और bandwidth दोनों waste कर रहे हैं|

 

  1. इसका पहला solution यह है कि किसी भी image को upload करने से पहले blog के theme का documentation को अवश्य पढ़े और इसके required size का ही image upload करें|
  2. दूसरा solution यह है कि अपने blog पर compressed .png format के image का ही प्रयोग करें|

 

png format के image को उपयोग करने के भी दो कारण हैं|

 

पहला इसका image .jpg की तुलना में ज्यादा compressed होता है|

दूसरा इसके image quality में भी फर्क नहीं पड़ता है|

 

image compression के लिए आप इन तरीकों का उपयोग कर सकते हैं|

 

बिना plugin का उपयोग कर|

 

इस तरीके में आप tinypng.com website का उपयोग कर सकते हैं|

 

इसके लिए आपको अपने image को इस website पर upload करना पड़ता है|

 

कुछ ही समय के बाद ये image को compressed कर आपको download करने का option दे देता है|

 

इसके बाद इसे अपने blog पर आप upload कर सकते हैं|

 

plugin का उपयोग कर|

 

इसके लिए आपको wordpress repository से आपको wp smush plugin अपने wordpress blog पर install और activate करने होता है|

 

smush-pagespeed-webtechthoughts.com

 

 

इसके बाद इन steps को follow करें|

  1. wordpress admin dashboard के left side के smush menu पर click करें|
  2. Plugin dashboard के left side के Bulk Smush option पर जाएँ|
  3. Automatic Smush को enable करें| अपनी requirement के आधार पर image size के check box को select करें|
  4. update Setting पर click करें|

 

अब आपका plugin image compress के लिए पूर्ण रूप से तैयार है| image को upload करते ही ये automatically compress कर देता है|

 

इस process से blog के सारे images का optimization हो जायेगा और Gtmatrix में आपके blog का स्कोर definitely increase करेगा|

 

Cache files का expiry period set करें|

 

web browser को अपने browser पर किसी webpage को display करने के लिए  web server से html, css, java script, text और image आदि files को local computer में download करना पड़ता है|

 

web browser और web server application पर ऐसा technology जो reader/user द्वारा visit किए जा रहे webpage का कुछ data reader/user के local computer  पर temprory store हो जाता है| Browser caching या web cache या HTTP cache कहलाता है|

 

इसका भी प्रभाव हमारे webpage के loading speed पर पड़ता है|

 

किस स्थिति में Google page speed insights, leverage browser caching suggest करता है?

 

Google इस factor को तभी report करता है| जब आपके web pages में उपयोग हो रहे html, css, java script, text और image आदि cache files के लिए कोई expiry date code नहीं किया गया हो|

 

first time जब reader webpage को visit करता है तो इसका कुछ data उसके local computer पर download होकर store हो जाता है| वही reader जब अगली बार उसी webpage को visit करता है तो उसका web browser, web server से सिर्फ updated data को ही download कर local computer में पहले से download data के साथ combine कर display करता है|

 

  1. इससे पहला advantage यह है कि reader को server से सारे data download होने का wait नहीं करना पड़ता| इससे उसका data का consumption कम होता है|
  2. दूसरा advantage webpage reader के screen पर तुरंत display हो जाता है| इससे reader को अच्छा browsing का अनुभव होता और आपके site के प्रति उसका झुकाव हो जाता है|
  3. तीसरा advantage web server पर load कम पड़ता है क्योंकि पुरे data को download करने का जरुरत नहीं पड़ता है| केवल updated data ही reader के computer पर download होता है|

 

एक webpage का data आपके computer में कितने समय तक सुरक्षित रहेगा? यह उनके browser configuration और server side cache setting पर depend करता है|

 

web page के resource को reader के browser में किस तरीके से deal करना है? यह webmaster client browser को instruct करता है| जिसे leverage browser caching कहा जाता है|

 

leverage browser caching को enable करने के लिए HTTP के header में resource expire headers, cache-control-headers और ETag headers set करना पड़ता है|

 

resource expire headers web page के resource के expiry duration को explain करता है| cache-control-headers client web browser को resource के caching period के बारे में explain करता है|

 

ETag का उपयोग cached resource और requested resource के बीच हुए changes को verify करने के लिए किया जाता है|

 

ये सारे headers web server के public_html folder के अंदर .htaccess file में add किया जाता है|

 

इसका complete implementation process हम अगले post में publish करेंगे|

 

Html, css, xml और javascript files को compress कर use करें|

 

Gzip compression technique को plugin के माध्यम से enable कर  web page recorces जैसे html, css, xml  और java script files को 70%-80% तक compress किया जा सकता है|

 

इस compression technique को अपने wordpress blog/site पर अगर .htaccess file के माध्यम से enable किया जाय तो यह range को 70%-90% तक बढ़ाया जा सकता है|

 

किस स्थिति में Google page speed insights, file compression के लिए suggest करता है?

 

Google इस factor को तभी report करता है| जब web page recorces जैसे html, css, xml  और java script files का size बड़ा हो|

 

यह काम कैसे करता है?

 

Gzip compression का algorithm  repeated string को अलग-अलग जगह पर store करने के बजाय एक ही जगह पर organize करता है|

 

file के compression और data को compressed file से retriving के वक़्त यह algorithm उस repeated string के location values से manage करता है| इस प्रकार यह compression technicque html और css file पर बहुत ही कुशलता से कार्य करता है| क्योंकि इसमें बहुत अधिक quantity में repeating strings होते हैं|

 

compression प्रारंम्भ करने से पहले

 

आजकल कुछ web hosting server पर Gzip compression को company के द्वारा ही automatic enable कर दिया जाता है|

 

इसे Gzip compression tool से check कर सकते हैं|

 

process को implement करने से पहले ये सुनिश्चित कर ले आपके worderpress site/blog पर compression पहले से ही enable तो नहीं है|

 

अगर नहीं है तो process को implement करें| अन्यथा ये find out करें कि और कितना ज्यादा इसे compress किया जा सकता है|

 

इस technicque को web server type के आधार पर अलग-अलग तरीके से implement किया जाता है| ये find out करें की आपकी blog/site किस type के server पर deploy किया गया है| उसके बाद उसी के specific तरीके से compression technicque को implement करें|

 

web server में file compression को implement करने के दो तरीके हैं|

 

Gzip compression

 

इस technicque को Apache और Nginx servers में implement किया जाता है|

 

Gzip compression technicque को दो तरीके से implement किया जा सकता है|

 

.htaccess file में coding कर|

 

इस technicque में wordpress के .htaccess file पर कुछ code add किया जाता है और यह files को compress करना आरंम्भ कर देता है|

 

plugin का प्रयोग कर|

 

इस technicque में wordpress के repository से किसी एक cache plugin जैसे w3 total cache, WP super cache को अपने wordpress के blog/site पर download तथा activate करें|

 

सारे option को पढ़कर  अपने site/blog के requirement के अनुसार configure करें तथा save changes पर click कर save करें|

 

अब plugin blog/site के resource file को compress करने के लिए पूरी तरह से तैयार है|

DEFLATE compression

इस technicque को सिर्फ Apache server में implement किया जाता है|

 

Html, css & Java script files को Minify करें|

 

इस section में हम web resources html, css और java script के minification के बारे में जानेंगे|

 

किस स्थिति में Google page speed insights, इन files को minify करने के लिए suggest करता है?

 

Google इस factor को तभी report करता है| जब web page recorces जैसे html, css, और java script files पर कुछ code के functionality का उपयोग नहीं किया जाता है| वह सिर्फ खाली जगह लेने का काम करते हैं|

 

minification क्या है?

 

web page recorces जैसे html, css  और java script files में कुछ ऐसे code होते हैं जो file के functionlity में participate नहीं करते लेकिन file के size को और बड़ा कर देते हैं|

 

जैसे html के unnecessary line-breaks, css के unused spaces और java script के unnecessary code आदि| ये सारे code file के functionality में support नहीं करते हैं लेकिन इनका exist होना file के size को बढ़ा देता है|

 

web page recorces से इन सारे बेकार के code को हटा दिया जाय तो file का size कम हो जायेगा और file के functionality पर भी कोई प्रभाव नहीं पड़ेगा|

 

wordpress में मौजूद html, css और java script files से इन बेकार के code को हटाकर यथासंभव इनको छोटा करना तथा इन files को load होने में count request की संख्या को घटाने में जो technicque उपयोग में लाया जाता है उसे minification कहा जाता है|

 

minification क्यों जरुरी है?

 

इसका आसान सा जवाब है – page speed के लिए|

 

क्योंकि minification web page के size को कम कर देता है इसके परिणामस्वरुप web page का loading speed बढ़ जाता है|

 

इसे अच्छी तरह से समझने के लिए web page analysis tool (GTmatrix) पर analyze एक website का page speed score report को analyze करें|

 

minification implement करने से पहले website का loading speed report|

without-minify-gtreport-webtechthoughts

 

 

minification implement करने के बाद website का loading speed report|

 

after-minify-gtreport

 

 

आप भी minification implement करने के पहले online free web page analysis tool Google PageSpeed Insights, GTmatrix या  pingdom पर अवश्य अपने website को analyze कर लें|

 

आपको फर्क निश्चित तौर पर दिखेगा|

 

एक website के अच्छे SEO के लिए web page load speed एक important factor है| साथ ही google भी web pages को minify के लिए recommend करता है|

 

minification अपने blog/site पर आप इन दो तरीकों से कर सकते हैं|

plugin का उपयोग कर|

 

इस विधि में आपको wordpress repository से किसी एक plugin को install कर activate करना पड़ता है| जैसे w3 Total cache, Autoptimize या wp fastest cache आदि|

online tool का उपयोग कर|

 

इस विधि में आपको manually html, css और java script files को minify करना पड़ता है| internet पर कुछ online free websites मिल जाएंगे जो इन files को minify करने का कार्य करते हैं| जैसे css minifier, minify your java script और YUI Compressior आदि|

 

Render blocking javascript files को web page के end में रखें|

 

एक web page में html तथा css की तरह ही java script का भी अहम् role है| इसका मुख्य काम web page को addtional functionlity देना है| special effect, user interaction, user validation आदि के लिए उपयोग किया जाता है|

 

अगर कम शब्दों में कहा जाय| java script का main कार्य web page के बाकि content load होने के बाद शुरू होता है|

 

ऐसे में java script को web page के दूसरे content के बीच रखा जाय तो जाहिर सी बात है कि web browser इस script को load करने में समय खर्च करेगा और web page के rendering में काफी समय लगेगा|

 

user को उतने समय का wait करना पड़ेगा|

 

किस स्थिति में Google page speed insights, javascript files को end में रखने के लिए suggest करता है?

 

Google इस factor को तभी report करता है| जब java script   का कोई file rander blocking का काम करता है| यानि web page को display होने में रोकता है|

 

इस problem को solve करने के दो तरीके हैं|

 

external script को page के end में रखें|

 

सारे external scripts को closing </body> tag के just ऊपर रखें| ऐसा करने से सारे external scripts web page के बाकि render होने के बाद background पर download हो जाएंगे|

defer और async attribute का प्रयोग करें|

 

हम आपको बता दे की defer external resource और async internal resource के लिए उपयोग किया जाता है|

 

जब async attribute का प्रयोग browser को web page के internal resource को rendering files के साथ download होने का signal जाता है|

 

जबकि defer का प्रयोग इसके विपरीत browser को web page के render होने के बाद download होने का signal जाता है|

 

ये दोनों ही तरीके से web page के loading speed को बढ़ा सकते हैं और  user के browsing experience को बेहतर अनुभव देते है|

 

मैं यहाँ पर कुछ resource share कर रहा हूँ| जो आपके post/page के url को तैयार करने में मदद करेगी|

 

 

लेखन बंद करने से पहले :-

 

ये सारे तरीके आश्चर्य तौर पर आपके web page के loading speed को बढ़ा देते हैं और user/reader को एक अलग browsing का अनुभव देते हैं| आप इन तरीकों को एक-एक करके अपने site/blog पर लागू करें और अपने अनुभव हमारे साथ comment के माध्यम से share करें|

 

 

 

अगर आपको हमारा ये लेख(post) अच्छा लगा और आप कोई सुझाव देना चाहते हैं तो हमे comment करना ना भूलें|

 

Note:- Comment करने से पहले अपने e-mail को हमारे blog पर register करा लें|

 

Founder , WebtechThoughts

Barun Chandra is technology enthusiast and a blogger. He is fond of technology in depth and writes posts in simple words to make understand easy.

Get Free Email Updates!

Signup now and receive an email once I publish new content.

I agree to have my personal information transfered to MailChimp ( more information )

I will never give away, trade or sell your email address. You can unsubscribe at any time.

One thought to “Google Page Speed Insights: Page Load Speed ko 100% tak badhayen.”

Leave a Reply

Your email address will not be published. Required fields are marked *