Problem description
Creating a web site is an art. Web designers use HTML and CSS to design layout and JavaScript to give dynamic behavior of the web page. Well. When we create a big web site, which has more web pages, we need to use multiple CSS styles and calling multiple JavaScript functions to give the dynamic behavior.
Few styles in CSS and few HTML tags have potential drawbacks. For ex, multiple usage of <img> tag with animated gif files will slowdown your webpage render. Multiple usage of ajax call without return statement may not respond your next Ajax call...!
It is better to know the best practices before you start to design your web site. . Researchers say
" if we use 25% optimization techniques, we can improve 62% the performance. " – JavaScript for Web Developer by Nicholas C.Zakas- Pg 385 -
In this document, I have enclosed few tips to optimize the performance of the web site.
server.
Tips #2: Call CSS/JavaScript files ‘style_v1.0.1.css’ ‘style_v1.0.1.js’
Always keep the stylesheet and javascript file in the above format. It is easy to the browser to identify and load these files.
Tips #3: Place css and javascript in external files
Generally, the search engine spiders will look for your page’s header content, title of your page and alternative tags for image tag. They will not look the content of your web page. Therefore, keeping the css and javascript as external file and putting reference inside the <head> </head> tag or <title></title>will be useful for the search engine to crawl and index your site quickly. Moreover, keeping a javascript or css file as external will help Browser to cache for next use and is good for multiple visits.
For ex, Assume that you are creating a web page with a name "Mumbai University" for an educational institute and you are creating a css or javascript file with the name "Model Question.css" or "End_semester_QuestionModel_collection.jss". If anyone searches in the Google with the key term "University questions model" or "Model Question paper", your web page will list in the search result though your web page title is "Mumbai University: !
when it is possible
.
Ex. If you need to display some text, instead of creating image with that text, add the text suitable formatted with css.
Tips #6: Reduce "<!-- -->", "," ,whitespace and <br />
Adding of even one character increases the size of the page. As bigger is the page size as slower will be the loading time. So to decrease the page size reduce comments and white spacing.
Tips #7: Reduce Cookie Size
It's important to keep the size of cookies as low as possible to minimize the impact on the user's response time.
Tips #8: Put ‘/’ at the end of every href (if its possible)
Ex. href=http://www.aspnetsource.com/.
solid;
Tips #10: Reduce < .. class="class_name" .. >
<div>
<p class="class_name"> ... </p>
<p class="class_name"> ... </p>
<p class="class_name"> ... </p>
</div>
.class_name
{
color: #ff0000;
}
can be optimized to:
<div class="class_name">
<p> ... </p>
<p> ... </p>
<p> ... </p>
</div>
.class_name p
{
color: #ff0000;
}
Tips #11: Avoid ‘animated’ gifs and Flash
Animated Gifs and Flash could have huge size, which will slow down the page loading.
Tips #12: Choose appropriate formats of images
When you choose the image format, please keep the following in your mind.
- GIF format of images works best for solid colors and sharp-edged transitions from one color to other.
- JPEGs works best for continuous gradations of many colors or grey tones.
filename (if external css) in the cache and reuse it.
Tips #14: Place javascript at the bottom of the page (if it is possible)
Place javascript at the bottom of page as much possible, because the problem caused by scripts is that they block parallel downloads. The HTTP/1.1 specification suggests that browsers download no more than two components in parallel per hostname. If you serve your images from multiple hostnames, you can get more than two downloads to occur in parallel. While a script is downloading, however, the browser will not start any other downloads, even on different hostnames.
In some situations, it is not easy to move scripts to the bottom. If, for example, the script uses document. write() to insert part of the page's content, it cannot be moved lower in the page. There might also be scoping issues. In many cases, there are ways to work around these situations.
An alternative suggestion that often comes up is to use deferred scripts. The DEFER attribute indicates that the script does not contain document.write, and is a clue to browsers that they can continue rendering. Unfortunately, Firefox does not support the DEFER attribute. In Internet Explorer, the script may be deferred, but not as much as desired. If a script
can be deferred, it can also be moved to the bottom of the page. That will make your web pages load faster.
Tips #15: Avoid the use of query params in image URLs, etc
Browsers refuse to cache any URL containing a question mark by default.
Tips #16: Use short style names
By using short style names, you can save space, especially when you refer to multiple styles.
Tips #17: Specify the height and width attributes for <img> tag
When specify the height and width attributes for <img>, the browser allows to map the layout of your page while the images are being loaded.
Tips #18: Avoid for-each like functionality in JavaScript array object.
The for-in loop requires the script engine to build a list of all the enumerable properties and check for duplicates prior the start.
If your code inside for loop does not modify the array it iterates pre-compute the length of the array into a variable len inside for loop scope.
Slow:
var sum = 0;
for (var i in arr)
{
sum += arr[i];
}
Faster:
Var sum=0;
for (var i = 0, len = arr.length; i < len; i++)
{
sum += arr[i];
}
Tips #19: Make the favicon.ico Small and Cacheable
If you do not care about it, the browser will still request it, so its better not to respond with a 404 Not Found.
Tips #20: Minimize DOM Access
Accessing DOM elements with JavaScript is slow.
Advantages of optimization techniques
1. The loading of the web page will reduce. It is very useful for the people who use the internet with less bandwidth.
2. Researchers say if we use 25% optimization techniques, we can improve 62% the performance.
分享到：
相关推荐
Intel® Integrated Performance Primitives How to Optimize Software Applications Using Intel® IPP by Stewart Taylor
本手册介绍了有关为英特尔微处理器优化代码所需的一切，包括奔腾，奔腾MMX，奔腾Pro，奔腾II，奔腾III，奔腾4，赛扬和至强。
Learn how to test web pages and understand the results Determine if you have performance problems and how to diagnose them Use common performance tools such as Keynote and Gomez Explore web ...
This guide explores how to tune and optimize the MySQL Cluster database to handle diverse workload requirements. It discusses data access patterns and how to build distribution awareness into ...
You’ll begin at square one, learning how the web and web pages work, and then steadily build from there. By the end of the book, you’ll have the skills to create a simple site with multicolumn ...
Along the way, you will learn how to profile your PHP scripts with Blackfire.io, monitor your Web applications, measure database performance, optimize SQL queries, explore Functional JavaScript, boost...
在Simulink中优化控制系统参数是一项关键任务，它涉及到系统性能的提升、稳定性的保障以及设计效率的提高。MATLAB作为强大的数学计算软件，提供了丰富的工具箱，包括Simulink，来支持这一过程。...
You will be introduced to the essentials of good design and how to optimize for search engines. You will discover how to register a domain name and migrate a website to a remote host. Because you ...
The book "Flask Web Development" by Miguel Grinberg is a comprehensive guide aimed at teaching developers how to create robust web applications using Flask, a lightweight and flexible Python web ...
Front-end optimizations refer to modifications you make to the HTML and files downloaded by the browser to make your web page download faster. These actions generally result in reduced ...
如何优化Gemm Wiki页面 Robert van de Geijn教授（ ）版权所有。 改编自Github Markdown Wiki，作者（ ）。目录重复相同的优化进一步优化阻塞以保持性能打包到连续内存中致谢 相关链接BLISlab：优化GEMM的沙箱GEMM：...
And you’ll discover the bottlenecks in Rails code and learn how selective attribute loading and preloading can mitigate the performance costs of ActiveRecord. As you advance to Ruby performance ...
C++ High Performance Boost and optimize the performance of your C++17 code_Code 源码 本资源转载自网络，如有侵权，请联系上传者或csdn删除 查看此书详细信息请在美国亚马逊官网搜索此书
Improve performance at the network level and I/O level, and how to optimize the application as a whole Monitor performance as part of Continuous Integration and regression testing In Detail ASP.NET ...