30 Tips to Optimize HTML/CSS/Images for Smooth Web Experience

By Alex Carter on October 2, 2024

Do you want your customers and/or employees to have a speedy, no-hassle end-user experience when they use your website or server, respectively? Of course you do – because an unsatisfied end-user means lost business – as in the case of a customer – or a really annoyed employee – as in the case of a server.

That’s why Paid Monitoring — the 100% Cloud-based, complete, and flexible IT monitoring solution that consolidates back-end monitoring, application monitoring, website monitoring, and cloud monitoring in an all-lin-one, central monitoring service (that was a mouthful) — has put together this collection of tips for optimizing HTML/CSS (Cascading Style Sheets) and images. In order to check the effect of these tips Website administrators can use Paid Monitor’ instant web page load test or use real browser full web page monitoring.

So, here are some ways to speed things up:

Tip #1 – (IMG) Compress Images

(https://www.ampsoft.net/webdesign-l/jpeg-compression.html)

By compressing all images in a website, your portal will load faster and decrease the amount of space used to store that size. Compressing an image involves decreasing the size in bytes for the file without significantly decreasing the quality of the image.

Tip #2 – (IMG) Set Image Resolution to 72dpi

(https://www.websiteoptimization.com/speed/12)

Don’t let image disasters happen to you. Set the size of all images on your website to 72dpi and the page will load faster. Plus the quality will not be diminished. If an image resolution is greater than 72dpi, it will take longer to load and will also increase the disk space used on the web server.  This is particularly important for sites with multiple pictures.

Tip #3 – (IMG) Optimize GIF, JPG, PNG files

(https://www.websiteoptimization.com/speed/tweak/png-optimization)

Optimize GIF, JPG, and PNG files so that you can increase the load speed for a website.  This can be done with a number of graphic optimization tools, for example, PunnyPNG, Web Resizer, and SuperGIF. By not optimizing images on a site, images will consume a lot of bandwith to load and you’ll drag out your total load time.

Tip #4 – (IMG) Strip meta data from JPEGs

(https://www.webdesignbooth.com/12-really-useful-image-optimization-tools-for-web-designers)

One of the ways to decrease the size of a picture is to remove the “meta data” from the files before loading them on a website.Image meta data are stored on any picture, and includes: date taken, camera model, flash used, GPS position, etc. Another good reason for removing picture meta data is for privacy purposes.

Tip #5 – (IMG) Link Thumbnails to Larger Images

(https://universalusability.com/access_by_design/images/thumbnails.html)

If you want to place large images on a website, the best option is to use “thumbnails” that link to them. This allows a user to decide whether they want to wait for the large image to load or if the thumbnail picture is sufficient enough to use. The biggest advantages in linking thumbnails to larger images is that websites load faster because most thumbnail images are a lot smaller in size.

Tip #6 – (IMG) Use Proper Image Formats

(https://www.r1ch.net/img-formats)

For website optimization, it’s really crucial to use the proper image format for all images.  Basically, there are three common formats that should be used; JPEG, PNG, and GIF.  All three formats have their own benefits, and usage. Some are great for line art, others for text and screenshots, while others for general web graphics, etc.). If you use the wrong image format, your images will be distorted and unclear, and will also slow down the speed of loading a website.

Tip #7 – (IMG) Save HTTP Requests by Combining Images

(https://www.websiteoptimization.com/speed/tweak/combine)

Pictures that are placed adjacent to each other on a website should be combined into one image in order to decrease the number of HTTP requests.  HTTP requests require going back to the server every time, and that can increase the number of delays.  This type of delay is eliminated by combing images together. The negative with combining images is that the file size for that particular image becomes larger, but with the right format and compression, loading speed is not compromised.

Tip #8 – (IMG) Use Styled Text Instead of Graphic Text

(https://www.websiteoptimization.com/speed/tweak/text)

Graphic text is text that has been converted into an image. Unfortunately, that can slow down the loading time of a website.  Using graphic text will also require additional HTTP requests and increases page weight.  By using style text, such problems are eliminated and create additional advantages, for example, better SEO rankings, lower maintenance costs, faster downloads.

Tip #9– (IMG) Don’t Scale Images

(https://developer.yahoo.com/performance/rules.html#opt_images)

It does no good, and it’s a waste of time. Setting image display size in the <img> tag will not decrease the amount of bytes transferred: a big image will still use the same bandwidth and will be scaled in the browser.

Tip #10– (IMG) The Fewer Graphics the Better

(https://www.freemarketingzone.com/website-design/web-graphics.html)

Other than sites that are used strictly as an image gallery, it is recommended to use fewer graphics in order to speed up a website.  A site should have no more than four to five, and each image should also be optimized.

Tip #11– (CSS) Don’t Group Selectors with Common Declarations

(https://www.websiteoptimization.com/secrets/css/group-selectors.html)

By merging common declarations into separate classes, CSS (a new feature being added to HTML that gives both Web site developers and users more control over how pages are displayed) can be dramatically optimized. This is possible because of the ability to assign multiple classes to one element, which is supported by a multitude of browsers. Referencing multiple classes provides better options for styling content, and allows elements that share the same styles to be grouped into one shared class.

Tip #12– (CSS) Group External CSS Files

(https://www.websiteoptimization.com/speed/7/)

In order to minimize HTTP request, grouping external CSS files can have a drastic impact on the load speed of a site. There are several methods to achieve this but it is better to include them directly in the XTML pages.

Tip #13– (CSS) Group Selectors

(https://www.websiteoptimization.com/speed/7/)

A good method to applying multiple declarations to multiple selectors is to combine the grouping of selectors that share the declarations and declarations that share the same selector. The result is a compact and more powerful set of CSS rules.

Tip #14– (CSS) Use Descendant Selectors Without Class Selectors

(https://reference.sitepoint.com/css/descendantselector)

Because the descendant selector is used to match all elements that are descendants of a specified element, it makes it more efficient to use descendants to get more specific without the use of class or ID selectors. Class selectors would only be more efficient if there is a requirement to encode styles into names and to use them in the rules.

Tip #15– (CSS) Utilize Inheritance

(https://www.websiteoptimization.com/secrets/css/inheritance.html)

By using an element to inherit the properties of its parent element, the child elements will inherit the same family from the body rules. Specifying an inherit value will cause the element to gain its parent’s computed value for the property in question.

Tip #16– (CSS) Practice the Use of Value Replication

(https://docstore.mik.ua/orelly/web2/css/ch07_03.htm)

By using value replication for borders, border colors and other graphics, you can save space needed for a site. Using one value can apply to all four sides, which enables the replication to be more efficient.

Tip #17– (CSS) Use Shorter Class and ID Names

(http https://www.websiteoptimization.com/speed/7/)

Utilizing long class names can add additional bytes to a site, and slow it down in the process. Long names are great for allowing designers to understand them more clearly, but using shorter class and ID names can be more beneficial in the long run.

Tip #18– (CSS) CSS Comments Should Be Removed

(https://www.websiteoptimization.com/speed/7/)

The best method to decrease the overall size of a site is to use PHP comments in the CSS, which once parsed correctly, will automatically remove the comments. Besides, once you become familiar with a site’s layout, you won’t need to add comments.

Tip #19– (CSS) Abbreviate Hexadecimal Colors or Names

(https://www.websiteoptimization.com/speed/7/)

Shorthand hexadecimal colors are supported by most browsers, and can be the most efficient method to specifying colors within a site to ensure it is at its minimum size possible. Unless the name of your colors is shorter than the shorthand-named hex colors (navy, purple etc.), it is better to go with the latter.

Tip #20– (HTML) Enable Standards Mode by Using a Strict DTD

(https://www.w3.org/QA/2002/04/valid-dtd-list.html)

Strict DTD (Document Type Declaration) not only tells the HTML validator which version of (X)HTML standard the web page coding is supposed to comply with, but it also tells the browser how to render the page in standards-compliant mode.

Without strict DTD, browsers can often misinterpret the markup language that the site is written in, thus slowing down the speed of loading altogether.

Tip #21– (HTML) Too Much White Space Isn’t Good

(https://www.websiteoptimization.com/speed/3/)

Removing whitespace from a site’s codes will not alter the appearance of the pages, but will make the site slightly smaller and run faster. Depending on the size of the page itself, the savings can be very beneficial to improve the site’s speed and performance.

Tip #22– (HTML) Omit Redundant Tags and Attributes

(https://www.websiteoptimization.com/speed/3/)

Redundant tags and attributes will often increase the size of a site, and will also decrease its performance. The best option is to strip away or omit any redundant tags and attributes left over by many web development programs. Your site will be leaner and faster.

Tip #23– (HTML) Use Descriptive ALT Values

(https://www.websiteoptimization.com/speed/3/)

Alt values (those messages you see when you mouse over an image) can often be worded too generically and be too long. This can cause havoc when optimizing for search engines, but can also increase the size of the page.

Tip #24– (HTML) Use Less Meta Tags

(https://www.websiteoptimization.com/speed/3/)

Using Meta Tags, other than for the purpose of a site description or keyword tags, does not add value to the site and affects the overall size of pages.  Adding conditional Meta Tags can be effective to identify pages, but it can also slow down a site’s performance.

Tip #25– (HTML) Remove All Comments

(https://webdesign.about.com/od/speed/qt/tipspeedcomment.htm)

Comments can slow down a site, although comments can make it easier to maintain a specific site. Removing comments can be done manually or by using a server-side scripting language.

Tip #26 – (HTML) Don’t Use Complex Tables

(https://www.webreference.com/authoring/languages/html/optimize/8.html)

Complicated layout tables may allow you to put a “face” to information, but they can also cause significant accessibility problems. Optimize the use of table and cells attributes.

Tip #27 – (HTML) Reduce the number of nested tables

(https://webdesign.about.com/od/layout/a/aa111102a.htm)

To speed up page display, and avoid long wait times for each table to display, it’s best to use the least number of nested tables.

Tip #28– (HTML) Use Name Colors Rather Than Hex

(https://www.webreference.com/authoring/languages/html/optimize/8.html)

As in CSS, use the name of colors rather than the corresponding Hex code — but only when shorter. This reduces the size of the page.

Tip #29– (HTML) Ensure All Tags are Closed

(https://www.webreference.com/authoring/languages/html/optimize/8.html)

For site optimization, closing all tags ensures that there is no lag in processing time. If there are errors in the code, the page will not load properly. Worse, it won’t  load at all.

Tip #30– (HTML) Pages Sizes Should Be Less Than 30K

(https://www.webreference.com/authoring/languages/html/optimize/8.html)

A well optimized page should take no longer than one second to load, and a maximum of 10 to 15 seconds. The easiest way to improve the load times is to ensure that a full page is 30 kilobytes in size or less. This can be done by avoiding unnecessary and/or unnecessarily large graphics and creating a site design that specifies reasonably sized blocks of content on each page.

Paid Monitor hopes that you can use some of these 30 tips on making your web images perform better and interact more efficiently with your site. For other handy information on making your IT infrastructure a happier place, see our 30 Tips to Improve Java Script Performance!

Like it? Click like it and Follow us on Twitter!