How do I minimise HTML?

Minimising the size of each request can save money, and increase the speed of your web site, pleasing search engines and users alike.

Code bloat

Modern web sites are full of unnecessary or bloated code, however these can have a huge impact on the speed of your website.

We have some separate articles for minimising CSS and JavaScript but what about HTML?

If you develop in Visual Studio, content automatically gets tabbed to increase readability, but each of those tabs is a character that needs to be zipped and sent by your server then received, unzipped and parsed by the browser.

One of the simplest wins is to use shift+tab to left align all of the code. The difference between the two sets of code from a section of a web site in the image is 2212 characters for left aligned and 2455 for the standard code.

It doesn't sound like a lot, but if it is done across your whole site you could save thousands of bytes, and potentially also money as you will have less bandwidth being used.

Remove unnecessary formatting

Below is an extract from one of our other articles.

When I first started writing my blogs, I would copy and paste from the relevant application into MS Word, and then into the article so that I could keep the colours. While it looks nicer, it is a serious code bloat.

The copy on the left (or first on mobile) is unformatted text, and weighs in at 1474 characters. The second is formatted with only the colours and comes in at 6869 characters.

The difference in reading them is minimal, and our end user can still copy and paste into their own applications if needed.

On a mobile device this is a big saving.

Unformatted

Use [utilities]GOCREATE PROC [maint].MaintenancePlan AS BEGINDECLARE @BackupType VARCHAR(1)='E'IF DATEPART(HOUR,GETDATE()) BETWEEN 5 AND 21 BEGINSET @BackupType='D'END--EXEC ('USE TempDb; DBCC SHRINKFILE(templog, 0)');--This is only needed when space is at a premium!--Re-index LiveIF @BackupType='E' EXEC [maint].DatabaseReIndex 'dbname'--Create BackupBACKUP DATABASE TO DISK=N'{backuplocation}{dbname}.bak'WITH NOFORMAT, INIT, NAME =N'{dbname}', SKIP, NOREWIND, NOUNLOAD, STATS= 10;--EXEC ('USE ; DBCC SHRINKFILE(_log, 0)');--This is only needed when space is at a premium!--Backup Other Files at NightIF @BackupType='E' BEGIN  EXEC [maint].DatabaseReIndex 'dbname'  --Backup Others  BACKUP DATABASE [databasename] TO DISK=N'{backuplocation}{dbname2}.bak'  WITH FORMAT,INIT, NAME =N'{dbname2}',SKIP, NOREWIND, NOUNLOAD,  STATS= 10END
--Restore Backups on other serverEXEC [server].[utilities].[maint].KillConnections 'dbname';EXEC [server].[utilities].[maint].RestoreDatabase_{dbname};
--Restore Backups on other server for db_2 etcIF @BackupType='E' BEGIN  EXEC [server].[utilities].[maint].KillConnections 'dbname2';  EXEC [server].[utilities].[maint].RestoreDatabase_{dbname2};END
ENDGO

Formatted

Use [utilities]
GO
CREATE PROC [maint].MaintenancePlan AS BEGIN
DECLARE @BackupType VARCHAR(1)='E'
IF DATEPART(HOUR,GETDATE()) BETWEEN 5 AND 21 BEGIN
SET @BackupType='D'
END
--EXEC ('USE TempDb; DBCC SHRINKFILE(templog, 0)');--This is only needed when space is at a premium!
--Re-index Live
IF @BackupType='E' EXEC [maint].DatabaseReIndex 'dbname'
--Create Backup
BACKUP DATABASE TO DISK=N'{backuplocation}{dbname}.bak'
WITH NOFORMAT, INIT, NAME =N'{dbname}', SKIP, NOREWIND, NOUNLOAD, STATS= 10;
--EXEC ('USE ; DBCC SHRINKFILE(_log, 0)');--This is only needed when space is at a premium!
--Backup Other Files at Night
IF @BackupType='E' BEGIN
  EXEC [maint].DatabaseReIndex 'dbname'
  --Backup Others
  BACKUP DATABASE [databasename] TO DISK=N'{backuplocation}{dbname2}.bak'
  WITH FORMAT,INIT, NAME =N'{dbname2}',SKIP, NOREWIND, NOUNLOAD,  STATS= 10
END
--Restore Backups on other server
EXEC [server].[utilities].[maint].KillConnections 'dbname';
EXEC [server].[utilities].[maint].RestoreDatabase_{dbname};

--Restore Backups on other server for db_2 etc
IF @BackupType='E' BEGIN
  EXEC [server].[utilities].[maint].KillConnections 'dbname2';
  EXEC [server].[utilities].[maint].RestoreDatabase_{dbname2};
END
END
GO

Minify CSS

Our tool to minify your CSS files

Optimise your CSS for a faster web site

Minify JavaScript

Our tool to minify JavaScript

Optimise JavaScript for a faster web site

What else can be done?

Removing the line returns will give you an even bigger saving, but can be time consuming.

There are plugins for various applications, so it may be worth having a look in your favourite search engine.