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:

https://gtmetrix.com/

http://www.webpagetest.org/

https://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
edited by user golearnweb

3 Answers

+3 votes

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

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

5. 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:

https://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

https://gtmetrix.com/
Page Speed Grade: (86%)
YSlow Grade: (84%)

answered by user golearnweb
edited by user golearnweb
Thanks! Nice info!
+3 votes

You can also use the Google sites - they even give an opportunity to download the minified content (JS and CSS files) and smushed images :-)

https://developers.google.com/speed/pagespeed/insights/

https://testmysite.withgoogle.com/intl/en-gb/

answered by user ak47seo
edited by user golearnweb
+2 votes

This article is superb! If you want to get 100/100 scores read it :-)

https://kinsta.com/blog/google-pagespeed-insights/

answered by user richard8502
edited by user golearnweb
...