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

2. HTML / CSS Validation Website Performance Optimization

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

4. 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

5. 2- end tag for "img" omitted, end tag for "input" omitted, but OMITTAG NO was specified Use instead of, instead of In HTML the tag has no end tag. In XHTML the tag must be properly closed. In new websites doctype declaration is: So use XHTML recommended structure. Pair tags: …, …, … Stand-alone tags:,,

6. 3- value of attribute "align" cannot be "absmiddle"; must be one of "top", "middle", "bottom", "left", "right" The align attribute is not supported in HTML5. Use CSS instead e.g. vertical-align in CSS The align attribute of is deprecated in HTML 4.01. Values which are deprecated or have no impact should not be used We should follow new trends/specification.

7. 4- required attribute "type" not specified in Use type = “application/javascript” has also obsolete Ajax file uploader uses for some thing in asp.net

8. 5-StartTag: invalid element name if (noredirect.indexOf("no_redirect=true") < 0){ Add // inside … A CDATA section is "a section of element content that is marked for the parser to interpret as only character data, not markup"

9. 6- duplicate specification of attribute Be careful while writing something 7- there is no attribute "displayText" We should not use non-existing attributes

10. 8- end tag for "ul" which is not finished, - document type does not allow element "ul" here; assuming missing "li" start-tag Add empt in ul tag change $text to $text

11. 9- & throwing error in iframe url - character "&" is the first character of a delimiter but occurred as data Food & Water In code use & in URL and then use urldecode(URL) or try to use just & without decoding Use & in iframe URL Use html encoding / decoding for the values stored into / fetched from database or just do not use.

12. 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.

13. 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;

14.  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

15. Suggested By: -http://gtmetrix.com/http://gtmetrix.com/ -https://developers.google.com/speed/pagespeed/insight shttps://developers.google.com/speed/pagespeed/insight s -http://www.webpagetest.org/ (for browser specific testing)http://www.webpagetest.org/

16.  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.

17. 1- Images optimization 2- Combined images using CSS sprites 3- Set images dimension 4- Minify Java scripts 5- Setting Keep-Alive 'On' for HTTP connections 6- Enable gzip compression 7- Leverage Browser Caching

18. 1- 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/

19. 2- 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.

20. 3- 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 tag, or in CSS.

21. 4- 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.

22. 5- 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’.

23. 5- Setting Keep-Alive 'On' for HTTP connections Configuration directives: (httpd.conf) KeepAlive On MaxKeepAliveRequests 100 KeepAliveTimeout 20

24. 6- 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 http://technet.microsoft.com/en- us/library/cc771003%28WS.10%29.aspx

25. 6- Enable gzip compression For Apache: (.htaccess)(check Mime Types using httpd.conf) # compress text, HTML, JavaScript, CSS, and XML AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE application/x-javascript # remove browser bugs BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch \bMSIE !no-gzip !gzip-only-text/html Header append Vary User-Agent

26. 7- 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.

27. For Apache server (.htaccess) ## EXPIRES CACHING ## ExpiresActive On ExpiresByType 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 ##

28.  http://gtmetrix.com/wordpress-optimization- guide.html 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!

29.  How to use GIMP  http://www.makeuseof.com/tag/optimize- images-web-gimp/