settingsAccountsettings
Menusettings

Q: How can I improve the speed of a single HTML page (landing page)?

+13 votes
Hi, I have a simple HTML page (just one) with portfolio, images and not that much content inside.

By checking my site in 3 of the most useful speed evaluation sites: http://gtmetrix.com; http://www.webpagetest.org and http://tools.pingdom.com I see that the results are awful :-( Grade E, loading slow, etc...

I know that for WordPress and Joomla there are special plugins and components which are going to improve dramatically the speed of loading. BUT! What about simple HTML pages like mine? Are there are some tweaks? Please help as I want my site to me loading fast and help people with the information! Thanks!
asked in Other category by user hues

1 Answer

0 votes
 
Best answer
In first sight it seems that WP and Joomla has better solution when it comes to improving the speed, BUT - it is very easy to speed up your HTML page as well! :-) I will tell you 6 tips which will help you! :-) Here they are:

1. Check if your hosting provider has CloudFlare option in your Cpanel - if so - enable it for your site! It will help you a lot!

2. Make sure your images ALL HAVE width and height attributes set up! This way you will help the browsers load the images much faster!

3. Use http://www.smushit.com/ysmush.it/ to reduce the size of your images without loosing the quality!

4. Now about the interesting part! :-) Create a simple .txt file and make it .htaccess. Add the lines below. They are for browser caching and adding expires headers:

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType text/css "access 1 month"
ExpiresByType application/javascript "access plus 1 year"
</IfModule>

# 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 application/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

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////

Now - simply upload it with your FTP program in your site's root directory!

5. If you are a good developer you can also combine images using CSS sprites + minify CSS and JS files.

6. If you are using MaxCDN you can also set up a CDN - but for one page I think it is not worth it...

Voila! Check your site now :-)

My own site - http://www.aleikovstudio.com - is also simple HTML and all the tweaks and techniques described about are used. :-) So far my results are:

http://tools.pingdom.com
Perf. grade - 95/100
Requests - 55
Load time - 1.07s
Page size - 1.0MB
Your website is faster than 88% of all tested websites

http://www.webpagetest.org
"A" Grade - First Byte Time
"A" Grade - Keep-alive Enabled
"B" Grade - Compress Transfer
"A" Grade - Cache static content

http://gtmetrix.com
Page Speed Grade: (86%)
YSlow Grade: (84%)
answered by user golearnweb
selected by user golearnweb
Thanks! Nice info!
...