SlideShare a Scribd company logo
wphold.com http://wphold.com/how-to-prevent-gradual-loading-of-css-in-wordpress/
How to Prevent Gradual Loading of CSS in WordPress
Do you Know? Reading this Post will take around 1 minute
You must have observed when you open a website, it takes few gradual steps before it completely loads. I mean,
initially you may see a different appearance and it will then suddenly changes to another.
It happens due to gradual loading of stylesheet(.css) file. If font for h1 heading was ‘Verdana’ in initial part of the
stylesheet and then it was changed to ‘Tahoma’ at the very last line of stylesheet then users will first see all h1
headings in ‘Verdana’ and then ultimately changing to ‘Tahoma’.
I have observed this phenomenon even on famous websites too, but personally, I hate to spoil my visitor’s
experience. It gets even more pronounced if you are on shared hosting.
Appearance of your webpage flickers when you have messed up your stylesheet.
When I was optimizing wpHOLD.com, I spent some time playing around my .css files but I could not completely
resolve this issue. I could have done it but it was taking more time than I could spare.
I then started searching for a plugin in WordPress repository. After having tried few, I settled with Loading Page with
Loading Screen. Plugin is written by CodePeople and premium version is available for $19.It is a smart, sleek and
efficient plugin. There are few limitations with free version but it is what I was exactly looking for.
What Loading Page with Loading Screen does is, it pre-loads everything in the background while showing a
customizable screen with progress bar on it. When all resources are loaded, webpage is rendered at once. It has lot
of room for customization like custom progress bar and animations.
Loading Page with Loading Screen Pre-Loads resources to speed up webpages.
Navigate to any other page on this blog and you will see a loading progress bar. It is courtesy of Loading Page with
Loading Screen. Here is a screenshot.
Let me know if you have a better idea or a plugin to resolve gradual loading of webpages. I would love to hear about
it.

More Related Content

What's hot

What's hot (20)

Advanced Custom Fields(ACF) + Page Builder at WordPress meetup Stockholm 2016...
Advanced Custom Fields(ACF) + Page Builder at WordPress meetup Stockholm 2016...Advanced Custom Fields(ACF) + Page Builder at WordPress meetup Stockholm 2016...
Advanced Custom Fields(ACF) + Page Builder at WordPress meetup Stockholm 2016...
 
Wordpress To Go Democamp Mtl2009
Wordpress To Go Democamp Mtl2009Wordpress To Go Democamp Mtl2009
Wordpress To Go Democamp Mtl2009
 
Rapid WordPress Theme Development
Rapid WordPress Theme DevelopmentRapid WordPress Theme Development
Rapid WordPress Theme Development
 
Should You Wordpress?
Should You Wordpress?Should You Wordpress?
Should You Wordpress?
 
How to start a successful blog part 2 - setting up
How to start a successful blog part 2 - setting upHow to start a successful blog part 2 - setting up
How to start a successful blog part 2 - setting up
 
Library 2.0 : Weblogs : Wordpress
Library 2.0 : Weblogs : WordpressLibrary 2.0 : Weblogs : Wordpress
Library 2.0 : Weblogs : Wordpress
 
Advanced custom fields in Wordpress
Advanced custom fields in WordpressAdvanced custom fields in Wordpress
Advanced custom fields in Wordpress
 
WooCommerce: Customization FAQ
WooCommerce: Customization FAQWooCommerce: Customization FAQ
WooCommerce: Customization FAQ
 
What to include in a boilerplate theme
What to include in a boilerplate themeWhat to include in a boilerplate theme
What to include in a boilerplate theme
 
WordCamp Sheffield 2014 Theme Workflow Presentation
WordCamp Sheffield 2014 Theme Workflow PresentationWordCamp Sheffield 2014 Theme Workflow Presentation
WordCamp Sheffield 2014 Theme Workflow Presentation
 
WordCamp Mumbai 2017: How to get more involved with WordPress
WordCamp Mumbai 2017: How to get more involved with WordPressWordCamp Mumbai 2017: How to get more involved with WordPress
WordCamp Mumbai 2017: How to get more involved with WordPress
 
Rapid WordPress theme development
Rapid WordPress theme developmentRapid WordPress theme development
Rapid WordPress theme development
 
WordCamp Birmingham 2015 - Theme building tricks of the trade
WordCamp Birmingham 2015 - Theme building tricks of the tradeWordCamp Birmingham 2015 - Theme building tricks of the trade
WordCamp Birmingham 2015 - Theme building tricks of the trade
 
The In's And Out's Of Working With Wordpress
The In's And Out's Of Working With WordpressThe In's And Out's Of Working With Wordpress
The In's And Out's Of Working With Wordpress
 
WordPress Course Outline
WordPress Course OutlineWordPress Course Outline
WordPress Course Outline
 
Speed up wordpress blog
Speed up wordpress blogSpeed up wordpress blog
Speed up wordpress blog
 
How WPMaintain Improved Page Speed by 16%
How WPMaintain Improved Page Speed by 16%How WPMaintain Improved Page Speed by 16%
How WPMaintain Improved Page Speed by 16%
 
Empathetc Development
Empathetc DevelopmentEmpathetc Development
Empathetc Development
 
Optimizing Your Site for Holiday Traffic
Optimizing Your Site for Holiday TrafficOptimizing Your Site for Holiday Traffic
Optimizing Your Site for Holiday Traffic
 
Weebly login
Weebly loginWeebly login
Weebly login
 

Similar to How to prevent gradual loading of css in WordPress

Benefit For Wordpress
Benefit For WordpressBenefit For Wordpress
Benefit For Wordpress
Theawaster485
 
Aucd ppt
Aucd pptAucd ppt
Aucd ppt
icidemo
 

Similar to How to prevent gradual loading of css in WordPress (20)

8 Easy Ways to Speed up Your Wordpress Site
8 Easy Ways to Speed up Your Wordpress Site8 Easy Ways to Speed up Your Wordpress Site
8 Easy Ways to Speed up Your Wordpress Site
 
Wordpress Guide
Wordpress GuideWordpress Guide
Wordpress Guide
 
Internet Broadcasting
Internet BroadcastingInternet Broadcasting
Internet Broadcasting
 
Presentation1
Presentation1Presentation1
Presentation1
 
Guide 4 - How To Dramatically Speed Up Your Website Using A Caching Plugin.pdf
Guide 4 - How To Dramatically Speed Up Your Website Using A Caching Plugin.pdfGuide 4 - How To Dramatically Speed Up Your Website Using A Caching Plugin.pdf
Guide 4 - How To Dramatically Speed Up Your Website Using A Caching Plugin.pdf
 
How to Start a WordPress Blog easily (from A to Z)
How to Start a WordPress Blog easily (from A to Z)How to Start a WordPress Blog easily (from A to Z)
How to Start a WordPress Blog easily (from A to Z)
 
Ultimate Cheatsheet to Selecting Commercial WordPress Themes
Ultimate Cheatsheet to Selecting Commercial WordPress ThemesUltimate Cheatsheet to Selecting Commercial WordPress Themes
Ultimate Cheatsheet to Selecting Commercial WordPress Themes
 
Benefit For Wordpress
Benefit For WordpressBenefit For Wordpress
Benefit For Wordpress
 
WordPress SEO in 2014 - WordCamp Baltimore 2014
WordPress SEO in 2014 - WordCamp Baltimore 2014WordPress SEO in 2014 - WordCamp Baltimore 2014
WordPress SEO in 2014 - WordCamp Baltimore 2014
 
Intro to advanced web development
Intro to advanced web developmentIntro to advanced web development
Intro to advanced web development
 
15 ways to improve your word press website performance in 30 minutes
15 ways to improve your word press website performance in 30 minutes 15 ways to improve your word press website performance in 30 minutes
15 ways to improve your word press website performance in 30 minutes
 
Show Me The Cache!
Show Me The Cache!Show Me The Cache!
Show Me The Cache!
 
Child Theming: An Introduction to Wordpress Theme Development with Wordpres...
Child Theming: An Introduction to  Wordpress Theme Development  with Wordpres...Child Theming: An Introduction to  Wordpress Theme Development  with Wordpres...
Child Theming: An Introduction to Wordpress Theme Development with Wordpres...
 
Introduction to Optimizing WordPress for Website Speed
Introduction to Optimizing WordPress for Website SpeedIntroduction to Optimizing WordPress for Website Speed
Introduction to Optimizing WordPress for Website Speed
 
Wordpress introduction
Wordpress introductionWordpress introduction
Wordpress introduction
 
Design Your First Word Press Theme In Minutes Word Camp Birmingham Brett Bume...
Design Your First Word Press Theme In Minutes Word Camp Birmingham Brett Bume...Design Your First Word Press Theme In Minutes Word Camp Birmingham Brett Bume...
Design Your First Word Press Theme In Minutes Word Camp Birmingham Brett Bume...
 
SoCal WordPress Meetup - iWeb to WordPress aka WP99
SoCal WordPress Meetup - iWeb to WordPress aka WP99SoCal WordPress Meetup - iWeb to WordPress aka WP99
SoCal WordPress Meetup - iWeb to WordPress aka WP99
 
Aucd ppt
Aucd pptAucd ppt
Aucd ppt
 
Customizing Your WordPress Theme Using Firebug and Basic CSS
Customizing Your WordPress Theme Using Firebug and Basic CSSCustomizing Your WordPress Theme Using Firebug and Basic CSS
Customizing Your WordPress Theme Using Firebug and Basic CSS
 
Test ss 2
Test ss 2Test ss 2
Test ss 2
 

Recently uploaded

Article writing on excessive use of internet.pptx
Article writing on excessive use of internet.pptxArticle writing on excessive use of internet.pptx
Article writing on excessive use of internet.pptx
abhinandnam9997
 
一比一原版UTS毕业证悉尼科技大学毕业证成绩单如何办理
一比一原版UTS毕业证悉尼科技大学毕业证成绩单如何办理一比一原版UTS毕业证悉尼科技大学毕业证成绩单如何办理
一比一原版UTS毕业证悉尼科技大学毕业证成绩单如何办理
aagad
 
Living-in-IT-era-Module-7-Imaging-and-Design-for-Social-Impact.pptx
Living-in-IT-era-Module-7-Imaging-and-Design-for-Social-Impact.pptxLiving-in-IT-era-Module-7-Imaging-and-Design-for-Social-Impact.pptx
Living-in-IT-era-Module-7-Imaging-and-Design-for-Social-Impact.pptx
TristanJasperRamos
 

Recently uploaded (12)

The AI Powered Organization-Intro to AI-LAN.pdf
The AI Powered Organization-Intro to AI-LAN.pdfThe AI Powered Organization-Intro to AI-LAN.pdf
The AI Powered Organization-Intro to AI-LAN.pdf
 
1.Wireless Communication System_Wireless communication is a broad term that i...
1.Wireless Communication System_Wireless communication is a broad term that i...1.Wireless Communication System_Wireless communication is a broad term that i...
1.Wireless Communication System_Wireless communication is a broad term that i...
 
ER(Entity Relationship) Diagram for online shopping - TAE
ER(Entity Relationship) Diagram for online shopping - TAEER(Entity Relationship) Diagram for online shopping - TAE
ER(Entity Relationship) Diagram for online shopping - TAE
 
Article writing on excessive use of internet.pptx
Article writing on excessive use of internet.pptxArticle writing on excessive use of internet.pptx
Article writing on excessive use of internet.pptx
 
BASIC C++ lecture NOTE C++ lecture 3.pptx
BASIC C++ lecture NOTE C++ lecture 3.pptxBASIC C++ lecture NOTE C++ lecture 3.pptx
BASIC C++ lecture NOTE C++ lecture 3.pptx
 
History+of+E-commerce+Development+in+China-www.cfye-commerce.shop
History+of+E-commerce+Development+in+China-www.cfye-commerce.shopHistory+of+E-commerce+Development+in+China-www.cfye-commerce.shop
History+of+E-commerce+Development+in+China-www.cfye-commerce.shop
 
Multi-cluster Kubernetes Networking- Patterns, Projects and Guidelines
Multi-cluster Kubernetes Networking- Patterns, Projects and GuidelinesMulti-cluster Kubernetes Networking- Patterns, Projects and Guidelines
Multi-cluster Kubernetes Networking- Patterns, Projects and Guidelines
 
一比一原版UTS毕业证悉尼科技大学毕业证成绩单如何办理
一比一原版UTS毕业证悉尼科技大学毕业证成绩单如何办理一比一原版UTS毕业证悉尼科技大学毕业证成绩单如何办理
一比一原版UTS毕业证悉尼科技大学毕业证成绩单如何办理
 
How to Use Contact Form 7 Like a Pro.pptx
How to Use Contact Form 7 Like a Pro.pptxHow to Use Contact Form 7 Like a Pro.pptx
How to Use Contact Form 7 Like a Pro.pptx
 
The+Prospects+of+E-Commerce+in+China.pptx
The+Prospects+of+E-Commerce+in+China.pptxThe+Prospects+of+E-Commerce+in+China.pptx
The+Prospects+of+E-Commerce+in+China.pptx
 
Latest trends in computer networking.pptx
Latest trends in computer networking.pptxLatest trends in computer networking.pptx
Latest trends in computer networking.pptx
 
Living-in-IT-era-Module-7-Imaging-and-Design-for-Social-Impact.pptx
Living-in-IT-era-Module-7-Imaging-and-Design-for-Social-Impact.pptxLiving-in-IT-era-Module-7-Imaging-and-Design-for-Social-Impact.pptx
Living-in-IT-era-Module-7-Imaging-and-Design-for-Social-Impact.pptx
 

How to prevent gradual loading of css in WordPress

  • 1. wphold.com http://wphold.com/how-to-prevent-gradual-loading-of-css-in-wordpress/ How to Prevent Gradual Loading of CSS in WordPress Do you Know? Reading this Post will take around 1 minute You must have observed when you open a website, it takes few gradual steps before it completely loads. I mean, initially you may see a different appearance and it will then suddenly changes to another. It happens due to gradual loading of stylesheet(.css) file. If font for h1 heading was ‘Verdana’ in initial part of the stylesheet and then it was changed to ‘Tahoma’ at the very last line of stylesheet then users will first see all h1 headings in ‘Verdana’ and then ultimately changing to ‘Tahoma’. I have observed this phenomenon even on famous websites too, but personally, I hate to spoil my visitor’s experience. It gets even more pronounced if you are on shared hosting. Appearance of your webpage flickers when you have messed up your stylesheet. When I was optimizing wpHOLD.com, I spent some time playing around my .css files but I could not completely resolve this issue. I could have done it but it was taking more time than I could spare. I then started searching for a plugin in WordPress repository. After having tried few, I settled with Loading Page with Loading Screen. Plugin is written by CodePeople and premium version is available for $19.It is a smart, sleek and efficient plugin. There are few limitations with free version but it is what I was exactly looking for.
  • 2. What Loading Page with Loading Screen does is, it pre-loads everything in the background while showing a customizable screen with progress bar on it. When all resources are loaded, webpage is rendered at once. It has lot of room for customization like custom progress bar and animations. Loading Page with Loading Screen Pre-Loads resources to speed up webpages. Navigate to any other page on this blog and you will see a loading progress bar. It is courtesy of Loading Page with Loading Screen. Here is a screenshot. Let me know if you have a better idea or a plugin to resolve gradual loading of webpages. I would love to hear about it.