Lets make your weather station website fast and useable especially those on shared hosting (probably 95% are)
Over the last few months I have been fortunate to exchange many emails, personal messages with many forum users who
for years had there own websites using various templates . Some personally built , some used the popular templates available and some use all of them which frequently discussed on these forums .
Please note this is not a dig at anyone or a detrimental view of anything anyone uses . we all have a preference and what is upmost of
importance is what you like and what meets your requirement.However lets try and make it better as the knowledge and capability is growing month
by month at a pretty good rate.
During the last few months I have noticed some sites just load absolutely awful in terms loading performance, I have seen extremes of total failure ,part load pages, spinning logos for up to 5 minutes or more to just total unusable . I always also consider that my ISP is having maintenance period or the internet is getting throttled back here in Istanbul, this happens frequently when a catostrophic,fatality event has occurred or is happening and anyone who follows the news will know that here in istanbul we have had a troubled last few years.
So what I do is make a check and analyse the performance using gtmetrix.com , this gives me results and solutions that are NOT related to my ISP internet performance. This has been my tool for designing websites for a few years now .
80% of the solutions to poor performance can be resolved with some thought and a little bit of time and sometimes just a simple file edit as you will see below .
Below is not a discovery or anything new and i have had to use these practices for years when clients request features and performance and if adding features causes a slowdown in performance then I have always had to resolve it one way or the other.Paying clients rarely accept your excuses or failure so you have to resolve the issues.Fortunately there are ways of doing this and its all in front of you.
Make it faster and make it useable and make it friendly ..
Tips IMAGES: Take the time to compress all your images , one of the biggest bottlenecks oversized file sizes .
https://compressor.io/compress or there are app solutions for your desktop
Use the now popular SVG format where ever possible apps like vector magic,affinity designer or sketch allow you to convert many formats
into SVG vector based images.
here is a typical SVG image with a file size of less than 1kb with no loss of image quality ! compared to a optimised compressed 3kb if it was in a png format . doesnt sound a lot but when using multiple array of larger images you will see the benefits .
typical svg you don’t actually need to open it in an graphic editor you can edit size and colour via any common code/text editor
<svg id="i-chevron-bottom" viewBox="0 0 32 32" width="10" height="10" fill="none" stroke="#F26C4F" stroke-linecap="round" stroke-linejoin="round" stroke-width="10%"> <path d="M30 12 L16 24 2 12" /></svg>
Always set the width and height and try to serve images wherever possible that do not require resizing when using gif, jpg,png
<img src="darkskyicons/cloudy.png" width="20px" height=“20px”>
.HTACCESS (treat with caution )
This file found in the root of 90% of servers will turn your slow performing unusable website due to load performance to either
a blazing fast loading site or to useable state where the loading performance is acceptable. However take into consideration
if your templates scrapes data direct from other external sources the outcome won’t be as good however it will be improved.
Below is my .htaccess file which produces simply amazing results you can see below in the image just how good it makes things
after addressing the issues raised before adding tweaks to the .htaccess in a default state.
You will see reference to almost every aspect of what your site is using and what you can do to make it fly
I’ve tweaked the cache to serve fonts, images, css,jquery files, just about anything and it does not affect anything
being that the data changes anywhere between every 16 seconds and upwards.
<IfModule mod_headers.c>
Header set Vary "Accept-Encoding"
</IfModule>
<IfModule mod_expires.c>
ExpiresActive on
# Perhaps better to whitelist expires rules? Perhaps.
ExpiresDefault "access plus 1 month"
# cache.appcache needs re-requests in FF 3.6 (HTML5)
ExpiresByType text/cache-manifest "access plus 0 seconds"
# Your document html
ExpiresByType text/html "access plus 0 seconds"
# Data
ExpiresByType text/xml "access plus 0 seconds"
ExpiresByType application/xml "access plus 0 seconds"
ExpiresByType application/json "access plus 0 seconds"
# RSS feed
ExpiresByType application/rss+xml "access plus 1 hour"
# Favicon (cannot be renamed)
ExpiresByType image/x-icon "access plus 1 week"
# Media: images, video, audio
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 video/ogg "access plus 1 month"
ExpiresByType audio/ogg "access plus 1 month"
ExpiresByType video/mp4 "access plus 1 month"
ExpiresByType video/webm "access plus 1 month"
# HTC files (css3pie)
ExpiresByType text/x-component "access plus 1 month"
# Webfonts
ExpiresByType font/truetype "access plus 1 month"
ExpiresByType font/opentype "access plus 1 month"
ExpiresByType application/x-font-woff "access plus 1 month"
ExpiresByType image/svg+xml "access plus 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
# CSS and JavaScript
ExpiresByType text/css "access plus 1 year"
ExpiresByType application/javascript "access plus 1 year"
ExpiresByType text/javascript "access plus 1 year"
<IfModule mod_headers.c>
Header append Cache-Control "public"
</IfModule>
<IfModule deflate_module>
AddOutputFilterByType DEFLATE text/css text/csv text/html text/plain text/richtext text/sgml text/tab-separated-values application/javascript application/x-javascript httpd/unix-directory
AddOutputFilter DEFLATE html htm shtml php php4 pl rb py cgi css js txt
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
</IfModule>
# Cache any images for one year
<filesMatch ".(png|jpg|jpeg|gif|svg)$">
Header set Cache-Control "max-age=31536000, public"
</filesMatch>
# Cache any CSS and JS files for a month
<filesMatch ".(css|js)$">
Header set Cache-Control "max-age=2628000, public"
</filesMatch>
If you want to use this please always make a copy of your original .htaccess as always server configurations vary
and also your HOSTING company may have already added certain tweaks related to other things like
Hotlinking Prevention,force HTTPS ,404 redirects,force to use latest PHP version,ip blocking ,Disable server signature ,
,stop SPAM comments from bots, Antivirus, Firewall etc.
so it is very very important to make a back up if you don’t you may regret it .
The above code can be appended to your existing .htaccess and also you may have some of these already
present so check closely and don’t assume , screwing this file will break everything .
some background might be useful before doing anything
http://www.3-prime.com/2016/12/htaccess-tweaks-to-improve-page-speed-for-wordpress-websites/VPS (Virtual Private Servers) based hosting
If your fortunate to have a VPS based hosting package then forget all above you probably flying happily already ..
HTTPS (Hyper Text Transfer Protocol Secure)
The benefits of switching over far outweigh the negatives , however the chances are you will probably have to
make adjustments to your templates , Ken True of Saratoga fame ,I have seen him making vast improvements in this direction considerably in recent weeks ,this is a positive move and probably very time consuming. From recent experience I spent a total of 24 consecutive days minus sundays just going through a clients website built 9 years ago when there was NO requirement for HTTPS.For my own template it was not such a chore as I was pretty much from August last year implementing HTTPS requirements where needed .
HTTPS where is the performance gain well watch out for the HTTP/2 specification it is only supported over a HTTPS , I have seen comparison test of 80% performance increase when comparing using a standard HTTP against the HTTPS .When your host implements HTTP/2 you will see a dramatic performance increase .
So HTTPS is not all about the positive benefits of trust,security ,seo etc in the near future you will see many other benefits , do a simple search via google
https://www.google.co.uk/?gws_rd=ssl#q=benefits+of+https&*
screenshot below is a report back from
https://gtmetrix.com take 5 minutes to diagnose your own website and see what you get back and I really hope it is of use and some of the above will help you to improve the performance .
brian..
to highlight the gains of doing some of these last week i took an old clients website from a rather poor 26% overall performance to 87% performance rating just by spending 20 minutes reducing image file sizes and adding a few tweaks to the .htaccess file..