Author Topic: Lets make your weather station website fast  (Read 1947 times)

0 Members and 1 Guest are viewing this topic.

Offline weather34

  • Forecaster
  • *****
  • Posts: 1068
    • https://weather34.com/homeweatherstation
Lets make your weather station website fast
« on: March 16, 2017, 04:33:45 AM »
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..
« Last Edit: March 16, 2017, 04:53:05 AM by weatherist34 »

Offline Bushman

  • Forecaster
  • *****
  • Posts: 7549
    • Eagle Bay Weather
Re: Lets make your weather station website fast
« Reply #1 on: March 16, 2017, 06:02:35 PM »
Very good info!  I once read a study  that 4 seconds was the optimal load time, after which users move on.
Need low cost IP monitoring?  http://wirelesstag.net/wta.aspx?link=NisJxz6FhUa4V67/cwCRWA or PM me for 50% off Wirelesstags!!

Offline weather34

  • Forecaster
  • *****
  • Posts: 1068
    • https://weather34.com/homeweatherstation
Re: Lets make your weather station website fast
« Reply #2 on: March 17, 2017, 09:18:04 AM »
Very good info!  I once read a study  that 4 seconds was the optimal load time, after which users move on.

Hello

the good thing about gtmetrix.com it now gives a true reflection of total page load of all scripts loaded even if you defer scripts like I do .
benefit of defer scripts is it doesn't block page loading . some use the practice of loading just scripts at the bottom of the page that doesnt always
work to the expected benefit so best practice defer them scripts .

also I have noticed increased discussions elsewhere if we design our templates not specifically about weather but in general according to the google specification or suggestions we basically would only have very static page that doesn't always reflect in what your site is about and doesn't offer that brand distinction .

4 seconds or more  is debatable  but I use it as a target reference if I get within 2 seconds of it Im happy and try not to disregard the feature Im adding however if a feature increases the load time 4 or 5 seconds above 4 seconds  then its time to resolve it and improve the feature or just forget it..

glad you find it of interest its not all about percentage there is a lot useful indicators on that site that can really be beneficial if you study the performance sheet .

have a nice day.

brian

Offline Jáchym

  • Meteotemplate Developer
  • Forecaster
  • *****
  • Posts: 8605
    • Meteotemplate
Re: Lets make your weather station website fast
« Reply #3 on: March 17, 2017, 09:27:05 AM »
Hi,
I also disagree with what Google recommends. They are basically forcing things that work for the most commonly used pages - eg. blogs etc. But some of the things just cannot be achieved with for example our websites.

I had a similar issue - people wanted lot of forecasts, data about earthquakes, tides, radar images... this is impossible to do in 4s. Originally it was an issue. So I finally came up with a mechanism that more or less works... The blocks are loaded independently on the homepage so the user sees something is going on and those blocks that do not use external sources (and there are many) load pretty much immediately.

If someone wants a very fast loading website, then they can only choose those blocks that load fast and don´t use external data. In such case it will be even in the 4s limit. If they choose to have many blocks, then it is still usable because as I said, the other parts of the page load, so you can already look at those and you also know that the rest is loading one by one.

The worst thing is when you have all this loaded by PHP because then the user just sees "Waiting for..." and the spinner, which gives you no indication of what is going on and you see just a blank page and wonder if the page works at all and are very likely to hit the Back button.

Offline weather34

  • Forecaster
  • *****
  • Posts: 1068
    • https://weather34.com/homeweatherstation
Re: Lets make your weather station website fast
« Reply #4 on: March 17, 2017, 09:47:32 AM »
Hi,
I also disagree with what Google recommends. They are basically forcing things that work for the most commonly used pages - eg. blogs etc. But some of the things just cannot be achieved with for example our websites.

I had a similar issue - people wanted lot of forecasts, data about earthquakes, tides, radar images... this is impossible to do in 4s. Originally it was an issue. So I finally came up with a mechanism that more or less works... The blocks are loaded independently on the homepage so the user sees something is going on and those blocks that do not use external sources (and there are many) load pretty much immediately.

If someone wants a very fast loading website, then they can only choose those blocks that load fast and don´t use external data. In such case it will be even in the 4s limit. If they choose to have many blocks, then it is still usable because as I said, the other parts of the page load, so you can already look at those and you also know that the rest is loading one by one.

The worst thing is when you have all this loaded by PHP because then the user just sees "Waiting for..." and the spinner, which gives you no indication of what is going on and you see just a blank page and wonder if the page works at all and are very likely to hit the Back button.

Hello Jachym

using external resources will always be a bottleneck and the impact can be dramatic enough to bring your site to a halt however take other matters also into consideration
.

problem is you can't address any practices perhaps minifying js/css optimising the images because simply there not accessible .

I went to your user page and just chose a random url . there are many things you address Jachym it takes time because simply the shear scale
of your template . however the end result is beneficial to your users and yourself . as I say not much you can do about external based info but there is a
lot you dress just in your template with out diving into the .htaccess .

don't take it has a negative it is of great benefit to your user base if you can address some of these then its all win win..

i have blotted out the url has I don't want cause any grievance but trust me taking the time albeit it is a pain and time consuming the end result is way better.


Offline Jáchym

  • Meteotemplate Developer
  • Forecaster
  • *****
  • Posts: 8605
    • Meteotemplate
Re: Lets make your weather station website fast
« Reply #5 on: March 17, 2017, 09:57:40 AM »
Hi Brian,
no, I definitely appreciate your comments!

On one hand, it is really impossible to have a 4s-loading page for a user who has over 100 blocks (there are a few, which is fine, but they then have to understand this will never be a lightning fast page), on the other hand it is indeed possible to optimize stuff.

I have to emphasize and I do this all the time - Im still learning, this whole thing is something I first met 2 yrs ago, thats when i first saw HTML... and by creating MT I learned it and especially the older scripts are very poorly optimized and Im in a constant process of tweaking them and Im sure in the future, I will be tweaking what Im creating now :-)

Sometimes it is just stupid mistakes... i.e. the just released update of the riset block, where I accidentally forgot to delete loading of some scripts, which were no longer used by that block.

So to a certain extent I know it can still be a lot better and I hope it will. In v11 for example, I moved from PNG icons to SVG sprites, which again was something Ive never worked with before, but it works nicely, also because you can now scale the icons without quality loss, color them etc. But it takes time...

Offline saratogaWX

  • Administrator
  • Forecaster
  • *****
  • Posts: 9257
  • Saratoga, CA, USA Weather - free PHP scripts
    • Saratoga-Weather.org
Re: Lets make your weather station website fast
« Reply #6 on: March 17, 2017, 08:59:31 PM »
One caveat with the scoring for the optomizers .. they really want you to use long-expire images and caching.  That is a problem for many weather websites who have maps, widgets, etc that are updated frequently and a mix of static images (like icons) that could be cached.  It would take some fine tuning of caching engine directives to get responsive images for weather-conditions stuff and cached images for the static icons etc.

Likely more trouble than it's worth for a personal weather website.

Also.. I'm a strong believer in having a PHP site render completely using just PHP generated HTML and static CSS.  JavaScript shouldn't be required for navigation, or basic presentation of the site, although the 'edgy' sites seem to favor using JavaScript (jQuery, et al) to build the HTML from AJAX requests... *shiver* .. that causes lots of http/https requests to the webserver and takes a while to render in the browser.  I'm also in favor of having a page be less that 1MB (better is <250KB) so even on slow systems, the page appears quickly and renders promptly.  </old-school>

I also split off the Ad blocker stuff to a separate topic as was suggested.
Ken True/Saratoga, CA, USA main site: saratoga-weather.org
Davis VP1+ FARS, Blitzortung RED, GRLevel3, WD, WL, VWS, Cumulus, Meteobridge
Free weather PHP scripts/website templates - update notifications on Twitter saratogaWXPHP

Offline Jáchym

  • Meteotemplate Developer
  • Forecaster
  • *****
  • Posts: 8605
    • Meteotemplate
Re: Lets make your weather station website fast
« Reply #7 on: March 17, 2017, 09:09:56 PM »
On the other hand, not using JS these days is extremely limiting. IMHO there is no point in trying to make a page work without JS, I know absolutely no-one who would have JS permanently disabled - they would basically be unable to use 99% of webpages, including email, FB, or even simple google search (images etc.)!

HTML5/JS/CSS3 also pretty much replaced Flash and other outdated technologies. 

 

anything