Transcript
Page 1: Presented By: Zulqarnain Abdul Jabbar Date: 25 th March 2013

TAKE CARE ABOUT WEBSITE HEALTH

Presented By: Zulqarnain Abdul JabbarDate: 25th March 2013

Page 2: Presented By: Zulqarnain Abdul Jabbar Date: 25 th March 2013

OVERVIEW

• HTML / CSS Validation• Website Performance Optimization

Page 3: Presented By: Zulqarnain Abdul Jabbar Date: 25 th March 2013

HTML / CSS VALIDATION

Powered By: http://validator.w3.org/

Page 4: Presented By: Zulqarnain Abdul Jabbar Date: 25 th March 2013

HTML VALIDATION

1- Missing “alt” tag in “img” tag

• Recommended in W3C standards• Serves to display text when image src is

incorrect or image source is not found• Serves to display text when image takes time

to render due to slow internet connection• Use appropriate text to display

Page 5: Presented By: Zulqarnain Abdul Jabbar Date: 25 th March 2013

HTML VALIDATION2- end tag for "img" omitted, end tag for "input"

omitted, but OMITTAG NO was specified

• Use <img … /> instead of <img… >, <input … /> instead of <input … >

• In HTML the <img> tag has no end tag.• In XHTML the <img> tag must be properly closed.• In new websites doctype declaration is:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">So use XHTML recommended structure.• Pair tags: <div>…</div>, <b>…</b>, <tr>…</tr>• Stand-alone tags: <img … />, <input … />, <br/>

Page 6: Presented By: Zulqarnain Abdul Jabbar Date: 25 th March 2013

HTML VALIDATION

3- value of attribute "align" cannot be "absmiddle"; must be one of "top", "middle", "bottom", "left", "right"

•The <img> align attribute is not supported in HTML5. Use CSS instead e.g. vertical-align in CSS•The align attribute of <img> is deprecated in HTML 4.01.• Values which are deprecated or have no impact should not be used• We should follow new trends/specification.

Page 7: Presented By: Zulqarnain Abdul Jabbar Date: 25 th March 2013

HTML VALIDATION

4- required attribute "type" not specified in <script>

• Use <script type=“text/javascript”></script>• Use <style type=“text/css”></style>•type = “application/javascript” has also obsolete• Ajax file uploader uses <script> for some thing in asp.net

Page 8: Presented By: Zulqarnain Abdul Jabbar Date: 25 th March 2013

HTML VALIDATION

5-StartTag: invalid element name

if (noredirect.indexOf("no_redirect=true") < 0){

• Add // <![CDATA[ … // ]]> inside <script …>…</script>

• A CDATA section is "a section of element content that is marked for the parser to interpret as only character data, not markup"

Page 9: Presented By: Zulqarnain Abdul Jabbar Date: 25 th March 2013

HTML VALIDATION

6- duplicate specification of attribute

• Be careful while writing something

7- there is no attribute "displayText"

• We should not use non-existing attributes

Page 10: Presented By: Zulqarnain Abdul Jabbar Date: 25 th March 2013

HTML VALIDATION

8- end tag for "ul" which is not finished, - document type does not allow element

"ul" here; assuming missing "li" start-tag

• Add empt <li> in ul tag• change <ul>$text</ul> to $text

Page 11: Presented By: Zulqarnain Abdul Jabbar Date: 25 th March 2013

HTML VALIDATION

9- & throwing error in iframe url - character "&" is the first character of a

delimiter but occurred as data<option value="11" >Food & Water</option>

• In code use &amp; in URL and then use urldecode(URL) or try to use just &amp; without decoding

• Use &amp; in iframe URL• Use html encoding / decoding for the values stored into

/ fetched from database or just do not use.

Page 12: Presented By: Zulqarnain Abdul Jabbar Date: 25 th March 2013

CSS VALIDATION

1- list-style-position none is not a list-style-position value

• Use existing values like ‘inside’, ‘outside’, ‘inherit’.

2- Property zoom doesn't exist

• It's not W3C valid• zoom is only supported by IE till IE8.• display: inline-block; does the same thing, but is

standard code.

Page 13: Presented By: Zulqarnain Abdul Jabbar Date: 25 th March 2013

CSS VALIDATION

3- 9999px is not a z-index value

• change z-index: 9999px; to z-index: 9999;

2- Unknown dimension 145px\9 - background #fafafa\9 is not a background-color - background repeat-x\000009 is not a background

• change width: 145px\9; to width: 145px;

Page 14: Presented By: Zulqarnain Abdul Jabbar Date: 25 th March 2013

CONCLUSION

These are all small things, but the validator shows a big number of errors for these small things and create a bad impact on client.

e.g. “alt” and ending tag is missing in img and there are 5 img tags on page then there will be 10 errors on page.

Some are word press generated issues, and some are developers generated issues. We can take care during development and can test website using validator.w3.org after development

Page 15: Presented By: Zulqarnain Abdul Jabbar Date: 25 th March 2013

WEBSITE PERFORMANCE OPTIMIZATION

Suggested By:- http://gtmetrix.com/- https://developers.google.com/speed/pagespeed/insi

ghts- http://www.webpagetest.org/ (for browser specific

testing)

Page 16: Presented By: Zulqarnain Abdul Jabbar Date: 25 th March 2013

SPEED MATTERS

Studies show that users leave a site if it hasn't loaded in 4 seconds; keep your users happy and engaged by providing a fast performing website!

Google Page speed and Yahoo YSlow are most widely used tools.

Page 17: Presented By: Zulqarnain Abdul Jabbar Date: 25 th March 2013

OVERVIEW

1- Images optimization 2- Combined images using CSS sprites3- Set images dimension4- Minify Java scripts 5- Setting Keep-Alive 'On' for HTTP connections6- Enable gzip compression7- Leverage Browser Caching

Page 18: Presented By: Zulqarnain Abdul Jabbar Date: 25 th March 2013

WEBSITE PERFORMANCE OPTIMIZATION1- Images optimization

• Photoshop and Illustrator creates images of very large size

• This is because, images hold data other than just the pixels we see on the screen.

• Optimizing means saving or compiling your images in a web friendly format

• Suggested Tool: GIMP• Online Tool

http://tools.dynamicdrive.com/imageoptimizer/

Page 19: Presented By: Zulqarnain Abdul Jabbar Date: 25 th March 2013

WEBSITE PERFORMANCE OPTIMIZATION2- Combined images using CSS sprites

• Downloading multiple images incurs additional round trips.

• A site that contains many images can combine them into fewer output files to reduce latency.

Page 20: Presented By: Zulqarnain Abdul Jabbar Date: 25 th March 2013

WEBSITE PERFORMANCE OPTIMIZATION3- Set images dimension

• Webpage begins to render a page even before images are downloaded

• If image dimensions are not specified in the containing document, or if the dimensions specified don't match those of the actual images, the browser will require a reflow and repaint once the images are downloaded

• To prevent reflows, specify the width and height of all images, either in the HTML <img> tag, or in CSS.

Page 21: Presented By: Zulqarnain Abdul Jabbar Date: 25 th March 2013

WEBSITE PERFORMANCE OPTIMIZATION4- Minify Java scripts

• "Minifying" code refers to eliminating unnecessary bytes, such as extra spaces, line breaks, and indentation making files loading fast.

• CSS and HTML can also be minified• Suggested Tools: Closure Compiler,

JSMin, YUI Compressor.

Page 22: Presented By: Zulqarnain Abdul Jabbar Date: 25 th March 2013

WEBSITE PERFORMANCE OPTIMIZATION5- Setting Keep-Alive 'On' for HTTP

connections• The Keep-Alive extension to HTTP/1.0 and the persistent connection feature of HTTP/1.1 provide long-lived HTTP sessions which allow multiple requests to be sent over the same TCP connection. In some cases this has been shown to result in an almost 50% speedup in latency times for HTML documents with many images.• In http 1.1 servers Keep-Alive is by default ‘on’.

Page 23: Presented By: Zulqarnain Abdul Jabbar Date: 25 th March 2013

WEBSITE PERFORMANCE OPTIMIZATION5- Setting Keep-Alive 'On' for HTTP

connections• Configuration directives: (httpd.conf)

• KeepAlive On

• MaxKeepAliveRequests 100• KeepAliveTimeout 20

Page 24: Presented By: Zulqarnain Abdul Jabbar Date: 25 th March 2013

WEBSITE PERFORMANCE OPTIMIZATION6- Enable gzip compression

• Gzip compresses your webpages and style sheets before sending them over to the browser. This drastically reduces transfer time since the files are much smaller.• For IIS: follow http://technet.microsoft.com/en-us/library/cc771003%28WS.10%29.aspx

Page 25: Presented By: Zulqarnain Abdul Jabbar Date: 25 th March 2013

WEBSITE PERFORMANCE OPTIMIZATION6- Enable gzip compression• For Apache: (.htaccess)(check Mime Types using httpd.conf)# compress text, HTML, JavaScript, CSS, and XML AddOutputFilterByType DEFLATE text/plainAddOutputFilterByType DEFLATE text/htmlAddOutputFilterByType DEFLATE text/xmlAddOutputFilterByType DEFLATE text/cssAddOutputFilterByType DEFLATE application/xmlAddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/rss+xmlAddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE application/x-javascript

# remove browser bugsBrowserMatch ^Mozilla/4 gzip-only-text/htmlBrowserMatch ^Mozilla/4\.0[678] no-gzipBrowserMatch \bMSIE !no-gzip !gzip-only-text/htmlHeader append Vary User-Agent

Page 26: Presented By: Zulqarnain Abdul Jabbar Date: 25 th March 2013

WEBSITE PERFORMANCE OPTIMIZATION7- Leverage Browser Caching

• Every time a browser loads a webpage it has to download all the web files to properly display the page. This includes all the HTML, CSS, javascript and images.

• Each file makes a separate request to the server

• Browser caching can help by storing some of these files locally in the user's browser.

Page 27: Presented By: Zulqarnain Abdul Jabbar Date: 25 th March 2013

WEBSITE PERFORMANCE OPTIMIZATION• For Apache server (.htaccess)## EXPIRES CACHING ##ExpiresActive OnExpiresByType image/jpg "access plus 1 year" ExpiresByType image/jpeg "access plus 1 year" ExpiresByType image/gif "access plus 1 year“ExpiresByType image/png "access plus 1 year" ExpiresByType text/css "access plus 1 month" ExpiresByType application/pdf "access plus 1 month" ExpiresByType text/x-javascript "access plus 1 month“ExpiresByType application/x-shockwave-flash "access plus 1 month“ExpiresByType image/x-icon "access plus 1 year" ExpiresDefault "access plus 2 days" ##EXPIRES CACHING ##

Page 28: Presented By: Zulqarnain Abdul Jabbar Date: 25 th March 2013

GTMETRIX FOR WORDPRESS

http://gtmetrix.com/wordpress-optimization-guide.html

A WordPress plugin that actively keeps track of your WP install and sends you alerts if your site falls below certain criteria

Run analyses, schedule reports on a daily, weekly or monthly basis, and receive alerts about the status of your site all from within your WordPress Admin!

Page 29: Presented By: Zulqarnain Abdul Jabbar Date: 25 th March 2013

GIMP

How to use GIMP

http://www.makeuseof.com/tag/optimize-images-web-gimp/

Page 30: Presented By: Zulqarnain Abdul Jabbar Date: 25 th March 2013

THANK YOU FOR YOUR TIME


Recommended