Combine External JS / CSS Files into Few Files


For viewing all tips see here


Applicable To
All Browsers


How Improves Page Load Time
By optimizing number of network round trips


Prologue
It is very common in development to build application with modular, reusable components but that might leads to multiple JS / CSS Files, which need to be downloaded separately.  It introduces delays and increases the page load time.  Combining external JS / CSS into few files cut down extra roundtrips and hence improves the page load time.


Why
o        To minimize the number of roundtrips
o        To avoid blocking of further download of other resources due to JS / CSS processing


How
o        Use different JS / CSS files during the development cycle and then merge during the deployment process.


Exceptions
o        There are some cases where JS / CSS code need different versioning and combining those files with other can’t be a possibility
o        JS files are being served from external third party domains


Recommendations
o        It is recommended to have 2-3 external JS / CSS files
o        Partition the JS / CSS into two files, one minimal JS / CSS file that is needed to render the page at startup and other that might be required after page load.
o        Have java script / CSS of rarely used components in its own file and serve it only when the component is requested by user
o        For small code of java scripts / CSS, which shouldn’t be cached, it can be in lined 

Comments

Post a Comment

Popular posts from this blog

Performance Test Run Report Template

You have gathered requirements from clients, identified key critical business scenarios, analyzed the workload distributions, found out performance goals and requirements, identified  tool for generating load, setup the test environment, designed the scripts, executed the performance run, collected the raw data, analyzed it, what next?  Send information to stakeholders? No!!  Wait!! It needs to formatted, customized for different stakeholder(s) and reported accordingly. This article suggests one of the ways to report performance run results to client especially if the performance testing activity has been outsourced to yours company.  It discusses the performance report template and importantly the reasons for including the items in the report. The performance report template contains information by data collected from client side only and doesn’t discuss / talk about data from server side like processor utilization etc. Broadly the performance report has been divided in three major
Read more

Understanding Blockchain

This notes will cover below questions... Introduction to Blockchain What is the difference between Blockchain and Bitcoin? What are some other uses of blockchain that go beyond bitcoin? History of blockchain Could you explain the blockchain process in laymen terms? If all data is available to the public. Can anyone know my bank balance (in Bitcoin)? Introduction to Blockchain The Blockchain is a decentralized and distributed public (digital) ledger where transactions are recorded and confirmed anonymously. It’s a record of events that is shared between many parties. More importantly, once information is entered, it cannot be altered without altering subsequent blocks. WTF is the blockchain? A guide for total beginners What is the difference between Blockchain and Bitcoin? The blockchain is a technology
Read more

Bugs Management in Agile Project

Agile has a refreshing approach to bugs, especially when contrasted with traditional waterfall practices. Historically, teams would postpone bugs to a stabilization phase. This stabilization phase was long and tedious, typically with high stress and long hours. Agile, on the other hand, promotes the following thought processes: Carrying bug debt is unhealthy and sometimes, even destructive. We should fix bugs, not track them. A feature isn't done until the bugs are fixed. Quality is part of the overall cost. Bugs are prioritized against new features. A bug needs to be more important than the next new feature. Notes All new features have a "bug tail." The bug tail is the diminishing number of open bugs on the new functionality. When a feature is added, bugs are introduced. Most are discovered and fixed immediately by the team as a part of feature development: some a few days later, others not until long after a story is considered &quo
Read more