Uptown HTML
Optimizing your web page is basically making your sight faster by lowering the amount of data being loaded to the page. This is for a better user experience when visiting your site.
In this lesson you will be learning how to make your site faster and more convenient for your users.
This lesson will include the following key points about optimizing your web page: Minimize HTTP Requests, Making JavaScript and CSS External, Reduce DNS Lookups, Minify JavaScript and CSS, Flush the Buffer Early, No 404s, Optimize Images, Optimize CSS Sprites.
Minimize HTTP Requests
A HTTP (Hypertext Transfer Protocol) Requests is when a user submits an HTTP request through their web browser witch fetches a file (a page, a picture, etc) from a web server.
To reduce the number of HTTP request it is better to combine your files. An example of this is putting your scripts into a single script document. It is also helpful to try to place all of your CSS into one stylesheet. These things will ultimately increase your response time for your sites.
Far as image requests CSS Sprites are the preferred method to reduce the amount of image requests that are being sent. You can use this technique by combining your background image into a single image and use the CSS background-image and background-position properties to display your image wherever you please.
Put Scripts at the Bottom: Scripts block other downloads and thats why it is best practice to place the scripts before your closing body tag, Then place the depending funtions after. This allows the page to load faster witch also allows the user to see the content fatser.
Make JavaScript and CSS External
Making your JavaScript and CSS files external means to make separate files for each and not placing them inside of your HTML document. This is helpful because the browser catches all of the files this allows the HTML document size to be reduced. Since all of the files are all caught by the browser they are all ready downloaded for the user. So wen the user reloads the page the only HTTP request that is being sent is for the HTML page.
Reduce DNS Lookups
The Domain Name System (DNS) maps hostnames to IP addresses, this is similar to a phonebook and how it connects people's name with their correct phone numbers. When you type in a url into your browser, a DNS resolver contacted by the browser returns that server's IP address. The only down fall about DNS is that It typically takes 20-120 milliseconds for DNS to lookup the IP address for any given hostname. This causes the browser to be unable to download any of the content until that IP address also known as the url is found. To see an example of a DNS Lookup view the code below.
<link href='http://fonts.googleapis.com/css?family=Lily+Script+One|Chango' rel='stylesheet' type='text/css'>
Minify JavaScript and CSS
Minification is when you get rid of all unnecessary characters and spacing in your code to reduce the size of your documents witch ultimitly increase your load speed. This is really commenly used in jquery and javascript files but you can also do this to your HTML and CSS documents. This increases load speed because the file size of the downloaded file is reduced greatly.Two popular tools for minifying JavaScript code are JSMin and YUI Compressor. The YUI compressor can also minify CSS. To see an exaple of how CSS looks compressed just view the code box below.
@charset UTF-8;
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;font-family:Arial, Helvetica, sans-serif;margin:0;padding:0}
html,body{height:100%;background-image:url(images/bedge_grunge/bedge_grunge.png)}
.wrapper{min-height:100%;height:auto!important;width:1020px;margin:0 auto -142px}
.footer,.push{height:40px;clear:both;background-color:#242425;border-top:solid;text-align:center;padding-top:20px;font-size:12px;border-color:gray;border-width:1px}
.logo{float:left;margin-top:-10px;margin-left:25px}
.logo_title{font-family:Chango, cursive;color:#FFF;float:left;font-size:30px;margin-left:20px;margin-top:20px}
#nav{font-size:13px;height:80px;background-color:#1a6884}
#nav ul{overflow:hidden;width:480px;float:right;margin-top:16px}
#nav ul li{list-style:none;float:left;font-size:16px;padding:10px 8px}
a:hover{color:#a8c048;text-decoration:none}
#container{margin-top:30px;margin-bottom:30px;background-color:#FFF;border:2px solid #dddbd4;border-radius:10px;overflow:auto;width:985px;margin-left:14px}
.information{float:left;width:690px}
.lessons_titles_one{padding-bottom:15px;margin-left:7px;color:#84aa57;font-size:24px;font-family:Chango, cursive}
.all_lessons a:link,a:visited{color:#FFF;font-family:Arial, Helvetica, sans-serif;text-decoration:none;background-color:#2d2b27;border-top-right-radius:7px;border-top-left-radius:7px;margin-left:7px;font-size:15px;padding:6px}
.all_lessons a:hover{color:#4DC5F0;text-decoration:none}
.all_lessons{color:#FFF;border-top-left-radius:7px;margin-left:48px;border-top-right-radius:7px;width:828px;margin-top:50px;padding:15px 15px 15px 20px}
.all_lessons ul li{list-style:none;padding-bottom:10px;float:left;margin-left:-1px}
.lesson_image{margin-left:58px;border-radius:5px;margin-top:-33px;border-top-left-radius:0}
.objective{float:left;background-color:#2d2b27;color:#FFF;border-top-left-radius:7px;padding:15px 15px 15px 20px}
.objective p{padding-bottom:10px;line-height:22px}
.objective_titles_one{padding-bottom:5px;color:#84aa57;font-size:24px;font-family:Chango, cursive}
.objective_titles_two{padding-bottom:5px;color:#84aa57;font-family:Chango, cursive}
.content_info{margin-top:8px;float:left;width:700px;padding:20px 20px 20px 16px}
.content_info_titles_home{color:#1a6884;font-size:24px;font-family:Chango, cursive}
.info{width:385px;line-height:22px;float:left;padding-top:5px}
.info_p2{width:385px;line-height:22px;float:left;padding-bottom:15px;margin-left:99px;padding-top:15px}
.important_text_info{color:#4DC5F0}
.info_icon{float:left;padding-right:15px;padding-bottom:80px}
.line{width:669px;margin-left:3px;clear:both}
.screen_shot{float:left;margin-top:-20px}
.code_button{width:99px;background-color:#2d2b27;color:#84953d;border-radius:10px;float:right;margin-right:27px}
.code_box{width:445px;text-align:left;background:#333;border:#5ED4FF solid thin;overflow:auto;border-radius:5px;padding-left:5px;margin-left:98px;color:#BEC9BD;font-family:"Courier New", Courier, monospace}
.ex_box1{height:50px;width:50px;background-color:#069;color:#FFF;float:left;text-align:center;margin-right:3px;clear:both;margin-left:100px}
.ex_box2{height:50px;width:50px;background-color:#903;color:#FFF;float:left;text-align:center;margin-right:3px}
.ex_box3{height:50px;width:50px;background-color:#6C9;color:#FFF;float:left;text-align:center;margin-right:3px}
#example_nav{list-style:none;font-weight:700;margin-bottom:10px;position:relative;margin-top:20px;float:left;padding-bottom:100px}
#example_nav li{float:left;margin-right:10px;position:relative}
#example_nav a{display:block;color:#fff;background:#333;text-decoration:none;border-radius:10px;padding:5px}
#example_nav a:hover{color:#fff;background:#6b0c36;text-decoration:underline}
#example_nav ul{background:rgba(255,255,255,0);list-style:none;position:absolute;left:-9999px}
#example_nav ul li{padding-top:1px;float:none}
#example_nav ul a{white-space:nowrap}
#example_nav li:hover ul{left:0}
#example_nav li:hover a{background:#1a6884;text-decoration:underline}
#example_nav li:hover ul li a:hover{background:#333}
.lesson_nav a:link{color:#000;font-family:Arial, Helvetica, sans-serif}
.lesson_nav a:visited{color:#000}
.lesson_nav a:hover{color:#1a6884}
.lesson_nav{float:right;width:250px;padding-right:25px;padding-top:20px}
.lesson_nav ul{list-style:none;margin-top:-7px}
.lesson_nav li{background-color:#bec1c2;margin-top:15px;border-radius:1px;padding:5px}
.web_add{margin-left:-28px;width:265px}
.quiz_container{border:dashed 2px gray;margin-top:15px;margin-bottom:20px;line-height:25px;padding:10px}
.quiz_container_questions{color:#1C9BC9}
.quiz_container_answeres{padding-bottom:20px}
.question{margin:0 0 40px}
.answer{top:20px;left:200px}
.correct{color:green;font-size:16px}
.incorrect{color:red;font-size:16px}
.footer{font-size:13px;height:50px;background-color:#1a6884;color:#FFF;padding-bottom:10px}
.footer ul{overflow:hidden;width:405px;margin-left:315px}
.footer ul li{list-style:none;float:left;padding:10px 8px}
.information_contact{width:690px}
.objective_contact{float:left;background-color:#2d2b27;color:#FFF;border-top-left-radius:7px;border-top-right-radius:7px;margin-left:277px;padding:15px 15px 15px 20px}
.form input,textarea{border:1px solid #E5E5E5;width:200px;color:#999;box-shadow:rgba(0,0,0,0.1) 0 0 8px;-moz-box-shadow:rgba(0,0,0,0.1) 0 0 8px;-webkit-box-shadow:rgba(0,0,0,0.1) 0 0 8px;padding:10px}
.form textarea{width:400px;height:150px;max-width:400px;line-height:18px}
.form input:hover,textarea:hover,.form input:focus,textarea:focus{box-shadow:rgba(0,0,0,0.2) 0 0 8px;-moz-box-shadow:rgba(0,0,0,0.2) 0 0 8px;-webkit-box-shadow:rgba(0,0,0,0.2) 0 0 8px;border-color:0 solid #C9C9C9}
.form label{margin-left:10px;color:#999}
.submit input{width:100px;height:40px;background-color:#84aa57;color:#FFF;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,#nav li,.footer li{display:block}
a:link,a:visited,a:visited{color:#FFF;font-family:Chango, cursive}
a:link,.all_lessons a:link,#example_nav li:hover ul a{text-decoration:none}
a:active,.all_lessons a:active{color:#a8c048;text-decoration:none;background-color:#2d2b27}
body#index #nav li.index_link a:link,body#index #nav li.index_link a:visited,body#lesson #nav li.lessons_link a:link,body#lesson #nav li.lessons_link a:visited{text-decoration:none;color:#4D8842}
.view_full_demo a:link,.view_full_demo a:hover,.view_full_demo a:visited{color:#84aa57;font-family:Chango, cursive}
.content_info_titles,.lesson_nav_title{color:#1a6884;font-size:18px;font-family:Chango, cursive}
@media only screen and min-width 768px and max-width 991px {
.ex_box1{height:50px;width:50px;background-color:#069;color:#FFF;float:left;text-align:center;border-radius:30px;margin-right:3px}
.ex_box2{height:50px;width:50px;background-color:#903;color:#FFF;float:left;text-align:center;border-radius:30px;margin-right:3px}
.ex_box3{height:50px;width:50px;background-color:#6C9;color:#FFF;float:left;text-align:center;border-radius:30px}
}
@media only screen and min-width 320px and max-width 480px {
.ex_box1{height:50px;width:30px;background-color:#069;color:#FFF;float:left;text-align:center;border-radius:30px;margin-right:3px}
.ex_box2{height:50px;width:30px;background-color:#903;color:#FFF;float:left;text-align:center;border-radius:30px;margin-right:3px}
.ex_box3{height:50px;width:30px;background-color:#6C9;color:#FFF;float:left;text-align:center;border-radius:30px}
}
Flush the Buffer Early
In PHP there is a function called flush(). This function allows you to send your partially ready HTML response to the browser so that the browser can start fetching components while your backend is busy with the rest of the HTML page. This gives the impression that the sight is loading very quickly to the user.
... <!-- css, js -->
</head>
<?php flush(); ?>
<body>
... <!-- content -->
The best place to put this function is after the HEAD. This is because the information form the HTML document is usually the easiest for the browser to get first. So behind the scenes the browser is loading the JavaScript and CSS files. There is an example of how this is written below in the code box.
No 404s
404s are basically an alternate page that your user is sent to wen there is an error in your site; basically a request could not be completed to the server. This is just like a user clicking a link and the page is not being found. This could really affect your site if this occurs particularly wen your external links are incorrect. This will block downloads to your site and it will also cause the browser to parse the 404 response body as if it were JavaScript code, trying to find something usable in it. You can make the user have a better user experience by creating a helpful 404 page just incase this problem arises in your site.
Optimize Images
It is always good to optimize your images, because usually a basic images file size is very large. Optimizing your images will reduce the file size of the image and this will allow your images to load a lot faster on your web page. This also creates an all around better load speed for your site.
There are a few different image Types such as GIF, JPEG, PNG-8 and PNG-24 but the best one for the web is PNG-24 or PNG-8. This is because it gives the best resolution and is also safe to use in any browser. It is also good to use because the number in the PNG is basically the color palette and of course the less color palettes are the better, so there for PNG-8 would be the better one to use but both still works very well.
Optimize CSS Sprites
Arranging the images in the sprite horizontally as opposed to vertically usually results in a smaller file size. Combining similar colors in a sprite helps you keep the color count low, ideally under 256 colors so to fit in a PNG8. "Be mobile-friendly" and don't leave big gaps between the images in a sprite. This doesn't affect the file size as much but requires less memory for the user agent to decompress the image into a pixel map. 100x100 image is 10 thousand pixels, where 1000x1000 is 1 million pixels.(Information provided from AIY of York)
Related Sources
If you would like to see more uses of the HTML5 tags just visit the sites listed below.
Articles:
Best Practices for Speeding Up Your Web Site
Tools:
The Finished Peace
Now that you understand how to successfully use the HTML5 tags, try and test your self on what you have learned by taking the quiz located on the right side of the screen. GOOD LUCK!!!
Click the link below to see the finished peace using the HTML5 tags.