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:
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!
This article is superb! If you want to get 100/100 scores read it 🙂
https://kinsta.com/blog/google-pagespeed-insights/
You can use the Google sites - they even give an opportunity to download the minified content (JS and CSS files) and smushed images 🙂
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:
## EXPIRES HEADER CACHING ## <IfModule mod_expires.c> ExpiresActive On ExpiresByType image/jpg "access 1 year" ExpiresByType image/jpeg "access 1 year" ExpiresByType image/gif "access 1 year" ExpiresByType image/png "access 1 year" ExpiresByType image/svg "access 1 year" ExpiresByType text/css "access 1 month" ExpiresByType application/pdf "access 1 month" ExpiresByType application/javascript "access 1 month" ExpiresByType application/x-javascript "access 1 month" ExpiresByType application/x-shockwave-flash "access 1 month" ExpiresByType image/x-icon "access 1 year" ExpiresDefault "access 2 days" </IfModule> ## EXPIRES HEADER CACHING ## <IfModule mod_deflate.c> # Compress HTML, CSS, JavaScript, Text, XML and fonts AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/vnd.ms-fontobject AddOutputFilterByType DEFLATE application/x-font AddOutputFilterByType DEFLATE application/x-font-opentype AddOutputFilterByType DEFLATE application/x-font-otf AddOutputFilterByType DEFLATE application/x-font-truetype AddOutputFilterByType DEFLATE application/x-font-ttf AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE font/opentype AddOutputFilterByType DEFLATE font/otf AddOutputFilterByType DEFLATE font/ttf AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE image/x-icon AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/xml # Remove browser bugs (only needed for really old browsers) 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 </IfModule>
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 🙂
