Topic: Once again lets make your website a better user experience

[weather34]

Lets make your website quicker with simple solutions and knowledgeable solutions...

so now Im email free and dont have to sit here and go through hundreds of emails each week I thought I would turn the attention to performance because it matters a lot
in fact its the big one if your offering or hoping to attract visitors to your sites. We cant dictate what browsers they use , what connections they use be it 3G,2G,4G,wifi ,lan, 100mps or more but what we can do is make it a better user experience and some of this would be beneficial to those on limited bandwidths and usage ..


lets make no secret some of the template designs are just awful in there design structure of scripts and css all over the place. so unless the developer(s) do something about there is not much you can do on that front .. However what we can do just to make things a little bit smoother is some additions to code with some research and do take the time to learn and do some research its all win and win if done right..

before doing any of these below do a test of your current page at https://gtmetrix.com and then after adding each suggestion then compare it again.. it may reveal other bottlenecks which all can be addressed..

1. here is piece of code that can be simply added to your index.php or main page file . it does NOT have to be added to all pages it only needs to be loaded once . the result is quite
significant if your PHP configuration supports it . just place this line of code at the top your main or index.php file .

//weather34 kick the gzip into action
<?php if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) ob_start("ob_gzhandler"); else ob_start(); ?>


2.check your template code for the most overlooked and often laziness in the code ... image size widths and heights... I often get lazy but always address it once i spot it!!

<img src="blablabla.png " width="20%" but no height added !!! />
Specifying a width and height for all images allows for faster rendering by eliminating the need for unnecessary reflows and repaints.

3.now for the really good most effective way .htaccess this little GEM Ive mentioned before it works wonders and many years ago(10+) I use to use to wordpress and I use to use simple plugins that you could download anyway after looking at these one click install plugins I realised most of them just overwrite the .htaccess file.. so the  .htaccess file will work wonders and note it can used for other methods where specific functions like security,ip blocking,redirects and so on that need to be controlled..

the file .htaccess before you do any of this always make a back up of your original somewhere on your desktop or cloud , because if it dont work for you you simply replace the modified version with your original you backed up..


1. .htaccess

Add Expires headers to leverage browser caching

Expires headers tells the browser whether to request a specific file from the webserver or whether to get a version of a page from the browser’s cache.

Expires headers speed up your site by reducing the need for yourself or your users to download the same files from your webserver twice.  it also reduces the number of HTTP requests that need to be made, completely speeding up the time it takes for the page to load. !!!

Adding Expires Headers  add this code into the .htaccess file.  below you can tweak it once you understand and have done research on what exactly you are doing..
here is my snippet from the htaccess you will NOTICE I am literally compressing everything that is possible be it css,jquery,svg,icons,fonts and content..

<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 (thx Remy ~Introducing 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>
   
# 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>

.htacess

GZIP suprisingly its not a default switch on hosts in some cases but again the result is all win and win for everyone..

here is my snippet from the htaccess

# gzip
<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/php
  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>


.htacess

Enable the Keep-Alive reduce the bandwidth

HTTP Keep Alive refers a message sent between the machine and the web server asking for permission to access a  file. Enabling Keep Alive allows the client machine to access multiple files without repeatedly asking for permission, this saves bandwidth.

<ifModule mod_headers.c>
    Header set Connection keep-alive
</ifModule>






4. script and css structure one of the biggest bug bears I have when assessing code from a template , i recently installed Ken True's template for a local school here and I have to say this guy followed the rules of css/jquery structure within 15 minutes I completely understood his template code . This is so important to create a useable structure because the browser renders code in a certain way and there is little you can do to change the way your browser renders stuff so you have to apply the sensible clean code in the template .

a. render the css prior to loading the jquery and other sources

put CSS at the top of your page as before any jquery files , as browsers won’t render your page before rendering the CSS file. Javascript, on the other hand, should be as close to the bottom as possible, since it prevents browsers from parsing after the tag before it is loaded and complete.

to really perfect this method above combing all your css into one file as a massive advantage for performance as you can imagine plopping a bulk of inline css half way down a page is going to have big impact as any jquery is going to halt until loaded the css so one file for all works wonders !!

it also no brainer to place all your jquery at the foot of the page and use the defer method where possible ...

<script DEFER src="blabla.js"></script>

5..Round trip times or known in the world web design RTTs this is a big one but not often looked at and frequently overlooked its something you come to realise after some years.

In the code you need to check if you are calling the same jquery file multiples times or unnecessary multiple instances, you only need to load it once..!

if you see a jquery file being loaded multiple times on page load then the problem lies in the code structure , Ive paid attention to this so much and the end result of removing
multiple instances of the same jquery being loaded time and time again is substantially a really good performance increase...!!

this is also very apparent where you are loading or calling the same image multiple times from a different url structure

example note the image is the same but its delivered from a different a url structure ... improving the code or script to serve from the same url fixes this bottleneck and unnecessary load time ..

<img src="img/sunny.png">
<img src="../forecast/sunny.png">

so in all the code i could use just anywhere in the code if the file sunny.png is needed..

<img src="forecast/sunny.png">
<img src="../forecast/sunny.png">




6. Disable hotlinking ...yes another overlooked and often only termed and discussed when someone is scraping your web page for there services etc..just simply turn it of ..

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?weather34.com [NC]
RewriteRule \.(jpg|jpeg|png|gif)$ – [NC,F,L]


so take all this as someone trying to improve things for everyone , you dont have to use it there is no must obligation and if your happy with how things are working then
dont use any of the above... but just for your curiosity goto https://gtmetrix.com and see what it what it returns ...

i have mentioned all this some months ago and I know some of you added those suggestions but recently I installed a template for a school and we did many comparison tests amongst the popular templates before we decided on what was best suited and we were quite shocked at some of the results returned . We did this as not to throw our limited time into something we would have to spend hours or weeks fixing as we wanted to keep the performance at optimum . So we opted for Saratoga as a general more in depth information and my own template for tablet use and wall display around the buildings . it was important to us to use minimal bandwidth usage as it is all built on local server which at peak times is serving some 450-600 users for other purposes !!

i will continue with other things to improve as time goes bye its all just things I have learnt since 1999 and don't take it as a must do and neither do I make claim I know better sometimes what works for one don't always work for the other and I certainly wouldn't suggest things I have  NOT actually used or tried over the years but Im in winding down mode of doing web designs and code etc . I like to learn from others about various subjects,theories and I always remember the 72 year old man passing his 40 years radio ham experiences and knowledge when I first got interested in radio communications.Sometimes that little bit of info switched on a light bulb in my brain...

i hope it is of help feel free to shoot me or thank me .. either way its good to share knowledge and digest ..brian

[Jáchym]

Yes, I completely agree, some pages take a long time to load, I wish more people cared about speed like us two You should however emphasize that editing htaccess should only be done if people know what they are doing. I know that some of this stuff causes issues with my hosting provider and it is extremely easy to make your page completely non-functional by having incorrect info in htaccess, so this is also something to keep in mind. One thing that made a huge difference you forgot to mention was switching from PHP 5.x to PHP 7.x. That cut the loading time to about half, so I strongly recommend to anyone to do it if you have the possibility to upgrade. With all its features my page now fully loads in 3.2s. I guess it would be even faster if I could add some extra stuff in the htaccess.  Given my MySQL db now has almost 2mil rows and the server is rather slow due to the load, Im very pleased with it, much better than some of the older versions

[weather34]

thanks but as I said

1.the file .htaccess before you do any of this always make a back up of your original somewhere on your desktop or cloud , because if it dont work for you you simply replace the modified version with your original you backed up..

2.i will continue with other things to improve as time goes bye

..take each step as it comes there is no rush too much information at once can just GO over peoples head.. but thanks anyway ps...

add this to the top of your .htaccess your always be on the current latest available provided by your host then when years go bye for version 8 I'm sure it will still work..

AddHandler application/x-httpd-php7 .php

have a nice day ...brian

[weatherc]

You forgot one thing what speeds up things a LOT. Finally dump those zillions of icons often used in ie forecast/weather-related scripts and go css-sprite or svg (done with code, not files) or if possible even better, font.

[weather34]

You forgot one thing what speeds up things a LOT. Finally dump those zillions of icons often used in ie forecast/weather-related scripts and go css-sprite or svg (done with code, not files) or if possible even better, font.

absolutely 100% agree ..do what I did create your own SVG from a vector as for fonts never mastered creating fonts but Im sure doing a bit research I could my head around it .. a simple chance of snow and what I liked about SVG you could edit the design in a simple text editor if needed...

<svg width="302pt" height="340pt" viewBox="0 0 302 255" id="weather34 chance of snow"><path fill="#ff8841" stroke="#ff8841" stroke-width=".1" d="M48.6 13.7c17.6-10 41-8.5 57.3 3.4C89 20.3 73 31 65.4 46.7c-3.5 7-5 14.8-5 22.6-12 3.5-23.3 11.6-29 23C23 81 19.4 66 21.6 52c2.4-16 12.7-30.5 27-38.3z"/><path fill="#e4e3e3" stroke="#e4e3e3" stroke-width=".1" d="M106 17c23-4.5 49.3 5.3 61.7 26 15.5-10 38-8 50.8 5.5 5 5.2 8.2 12 9 19.3 13.6 2 26.5 9.2 34 20.8 6.6 10 8.3 23 4.4 34-4.8 14.2-17.5 25-31.8 28.6-9.4 2.7-19.3 1.6-29 1.8-3.3-5-11.4-5.2-14.7 0h-41.3c-1.7-1.7-3.7-3.3-6-3.4-3-.4-5.5 1.5-7.7 3.2-12.7.4-25.5.4-38 0-3.6-3.3-9.4-3.4-12.7.2-7.5 0-15 .4-22.3-1.4-13.6-3-26-12.3-32-25.2-5-10.7-4.6-23.6 1-34 5.7-11.6 17-19.7 29-23.2 0-7.8 1.5-15.6 5-22.6C73.2 31 89 20.2 106 17M187 86.3c-5.7 2.6-9.2 8.5-9.5 14.8-2.8 1.3-5.7 2.6-7.7 5-3.3 4-4 10-1.4 14.4 2.8 5 8.7 7.7 14.4 7.6h47c8 0 16-6.8 15-15-.6-6.7-6.7-11-12.7-12.5-1.3-3-2.7-6.4-5.8-8-4.2-2.7-9.5-2-14-.2-5.4-7.8-16.7-10.7-25.3-6m-17.7 42.4c-5.6 1.7-8 9.4-3.8 13.6 4.3 5.3 14 2.5 14.8-4.2 1.5-6-5.3-11.5-11-9.3m-52 1c-5.7 2-7 10.4-2 14 4.7 4.5 13.4 1 14-5.6 1-6-6.6-11.4-12-8.3z"/><path fill="#aca6a6" stroke="#aca6a6" stroke-width=".1" d="M187.2 86.2c8.6-4.6 20-1.7 25.4 6 4.4-1.8 9.7-2.4 14 .3 3 1.6 4.4 5 5.6 8 6 1.3 12.2 5.8 12.7 12.4 1 8.2-7 15-15 15h-47c-5.7 0-11.6-2.5-14.4-7.6-2.6-4.5-2-10.5 1.4-14.4 2-2.4 5-3.7 7.7-5 .3-6.3 3.8-12.2 9.5-15z"/><path fill="#00a4b4" stroke="#00a4b4" stroke-width=".1" d="M169.5 128.7c5.7-2.2 12.5 3.3 11 9.4-1 6.8-10.5 9.6-14.8 4.3-4.3-4.2-1.8-12 3.8-13.6zm-52 1c5.4-3 13 2.2 12 8.4-.6 6.5-9.3 10-14 5.7-5-3.6-3.7-12 2-14zm73 23.2c3.3-5.2 11.4-5 14.7 0 1.2 3.4 1.4 8-1.7 10.5-3.4 3.2-9.4 3-12.3-.7-2.4-2.6-2.6-7-.7-10zm-105.7 0c3.3-3.6 9-3.5 12.6-.2 2.7 3 3 7.8.3 11-1.5 2-4.2 2.8-6.7 3.5-2.4-.7-5.2-1.3-6.8-3.6-2.6-3-2-8 .6-10.8zm50.6-.3c2.3-1.6 4.7-3.5 7.6-3 2.5 0 4.5 1.6 6.2 3.3 4.2 5.2-.5 14-7.2 13.5-6.7 0-11-8.6-6.6-13.8zm27.3 5c4.8-1 10.3 3.2 10 8.3.4 5.7-6.4 10.2-11.6 8-4-1.5-6.5-6.2-5-10.3 1-3 3.6-5.2 6.7-6zm-52.2 1c5.3-2 11.6 2.7 11 8.4 0 6.7-9 10.7-14 6.3-5.3-4-3.2-13 3-14.7zm21 21c3.8-1.3 8.4 0 10.3 3.5 2.8 4.8-.2 11.6-5.7 12.5-4 1-8.7-1.7-9.8-5.8-1.6-4.2 1.3-9 5.3-10.4zm54 0c4.8-3.4 12.4.2 13 6 .7 6.2-6.3 11.6-12 9-6.2-2.2-7-11.8-1-15zm-105.2.5c5-2.4 11.7 2.2 11.4 7.8.3 6-7 10.6-12.4 7.6-6.3-2.6-5.7-13.5 1-15.4z"/></svg>

[Jáchym]

You forgot one thing what speeds up things a LOT. Finally dump those zillions of icons often used in ie forecast/weather-related scripts and go css-sprite or svg (done with code, not files) or if possible even better, font.

Good point, also look up FontAwesome, that will be enough for most purposes and if you need special icons use this page:
http://fontastic.me/
To create your own font just with CSS.

[Jáchym]

Other good thing is using CDN libraries (jQuery, Highcharts etc.). JQuery for example will most likely be on almost every computer already in temporary files.

It has to be however emphasized too that one must never follow those speed tips from Google etc. blindly. Often some of those are not applicable or would not be suitable to implement. They are just general guidelines, or things you might want to check and see if it really is the way you wanted it.

One great example is Google Analytics. That script has to be run externally, it is the only way of using it, yet Google´s own speed tips recommend changing this (in a way that would make it non-functional...)

[weather34]

Other good thing is using CDN libraries (jQuery, Highcharts etc.). JQuery for example will most likely be on almost every computer already in temporary files.

It has to be however emphasized too that one must never follow those speed tips from Google etc. blindly. Often some of those are not applicable or would not be suitable to implement. They are just general guidelines, or things you might want to check and see if it really is the way you wanted it.

One great example is Google Analytics. That script has to be run externally, it is the only way of using it, yet Google´s own speed tips recommend changing this (in a way that would make it non-functional...)

hmmm there are pro's and cons to using CDN and font-awesome libraries ..

CDN offers no control design or improvements and delivering libraries from multiple CDN resources doesnt always have the performance you are thinking off . best practice ONE CDN FOR ALL thats a private CDN less rendering of ecternal resources because thats what a CDN is ..

1.99% of the time your loading up a file with masses of unused code its far better to have some control over what your designing with again why load up unused stuff.

1b. living in a country that is controlled at ISP level google CDN and many others are a NO GO full stop we dont put any emphasis on google driven stuff , I understand its not the case everywhere but if the CDN drops out then you are stuffed.. then again your server hosting could drop out but from experience of google blockages and other popular CDN networks we are very cautious not to use google as a tool..

2. fontawesome 600+ icons a lot of code  loaded up in the css best way to serve this is locally from your server sit down and strip out the unused stuff..this also applies to bootstrap there heck of a lot code totally unused again I would serve this locally and sit down strip out unused code.. all these things take time but the end result far better..

and designing you own gives you a far better approach as any designer will tell you there is nothing better than working with your own code that you created than something by others.. especially when it goes wrong

just my 2 cents worth pros and cons to everything m8...Brian

[Jáchym]

Sure, I see your point, it is true, there is always pros and cons.

With regards to FA, I did make my own version. For jQuery I use CDN.

One other danger with using CDNs is that if you use the default script (with no version specified), you are always loading the latest file - which again can be sometimes ideal (security fixes automatically etc.), but also dangerous

[Jáchym]

Another issue I have with the Google tips is that it will always tell you to reduce image size when the image on the page is smaller than the actual image file. This however does not make sense if you use % widths. If the image can stretch to eg. 80% of the page, then you might create 2 or 3 sizes (and even that would take you a lot of time), but still, on smaller monitorsl the images might still be displayed in reduced size simply because otherwise they would look awful on large monitors. There is no way you can create image for any screen size.

[weatherc]

I use FA and weatherfont + own homebrew condition-SVG's in my scripts with success. FA & co may load little slower at first load but after that do they load fast.

For jQuery & co did i test CDN's but noted they can be increadible slow to load at times. But mainly to be sure that the script allways use same version (of ie jQuery) do i use own hosted ones for them all.

[weather34]

Another issue I have with the Google tips is that it will always tell you to reduce image size when the image on the page is smaller than the actual image file. This however does not make sense if you use % widths. If the image can stretch to eg. 80% of the page, then you might create 2 or 3 sizes (and even that would take you a lot of time), but still, on smaller monitorsl the images might still be displayed in reduced size simply because otherwise they would look awful on large monitors. There is no way you can create image for any screen size.

best way to deal image scaling is create @css media image and background-image rules it takes time its not a drop in and go solution particularly useful where big fat header images need scaling down correctly.
as for google i think I said before months ago do everything to according to googles recommendations you wont have much of a website or distinctiveness ..

they kind of stifle the possibilities of web design and flexibility.. its all a learning curve Jachym we make mistakes and move on to the better from it..its the ones that continous make the same mistake never seem to progress . anyway back to speeding things up

[saratogaWX]

One caveat about using

Code: [Select]

# 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"
on a Saratoga or Leuven template -- sometimes the image contains data from the weather station so is updated regularly (like 5 minutes), or cached from external sources (ec-radar) so should not have a '1 month' expiration.  Yes, both Wim and I use lots of images for forecasts (some dynamically created) and it's best to not use ExpiresByType for the images and let the browser decide when to refresh the cache based on it's internal logic.

Another thing to note is that the Saratoga template was designed to fully render using only PHP(HTML) and CSS and does not require JavaScript for rendering, even for the flyout-menu (CSS only) -- the JavaScript used only provides the addition of near-realtime updates for conditions and some limited frame animations, and later for Google Map/mesonet-map displays. I always disliked any site that said 'enable JavaScript to see the site'.  Call me old-school if you like, but I do think that the ability to see a site having JavaScript disabled in the browser is still a good thing, especially given the malware sneakiness creeping in via browser-executable code (JavaScript, Flash...).

Neither Wim nor I developed our respective templates when modern items like SVG, FontAwesome, responsive layouts were available in the browsers at the time -- that's why we stuck to the commonly available features for our developments.

[Jáchym]

Ken your template is unbeatable given when you created it.

One thing to also keep in mind however is that template that uses a database and calculates everything will always be slower and that is also one of the reasons why Ajax was sort of a necessity (and hence the need for JS).

There was a funny incident about 5 yrs ago. As you know, almost every website today (news websites etc.) uses the FB API for sharing, liking etc. About 5 yrs ago FB was down for several hours and it turned out these pages were not prepared for this and it resulted in half of the Czech news websites and other not working... they then implemented measures to prevent this, but only after this happened.

[weatherc]

One caveat about using
Code: [Select]

# 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"

on a Saratoga or Leuven template -- sometimes the image contains data from the weather station so is updated regularly (like 5 minutes), or cached from external sources (ec-radar) so should not have a '1 month' expiration.  Yes, both Wim and I use lots of images for forecasts (some dynamically created) and it's best to not use ExpiresByType for the images and let the browser decide when to refresh the cache based on it's internal logic.

I agree with Ken there. Our sites uses lots of images whats updated frequently (like cams). The above expiresby's would cause lots of headace in such cases....

[weather34]

One caveat about using

Code: [Select]

# 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"
on a Saratoga or Leuven template -- sometimes the image contains data from the weather station so is updated regularly (like 5 minutes), or cached from external sources (ec-radar) so should not have a '1 month' expiration.  Yes, both Wim and I use lots of images for forecasts (some dynamically created) and it's best to not use ExpiresByType for the images and let the browser decide when to refresh the cache based on it's internal logic.

Another thing to note is that the Saratoga template was designed to fully render using only PHP(HTML) and CSS and does not require JavaScript for rendering, even for the flyout-menu (CSS only) -- the JavaScript used only provides the addition of near-realtime updates for conditions and some limited frame animations, and later for Google Map/mesonet-map displays. I always disliked any site that said 'enable JavaScript to see the site'.  Call me old-school if you like, but I do think that the ability to see a site having JavaScript disabled in the browser is still a good thing, especially given the malware sneakiness creeping in via browser-executable code (JavaScript, Flash...).

Neither Wim nor I developed our respective templates when modern items like SVG, FontAwesome, responsive layouts were available in the browsers at the time -- that's why we stuck to the commonly available features for our developments.

OLD SKOOL not at all what was important is we understood the structure thats what appealed to me anyway never thought for a moment of old school  i think I said above we had success using your template so be it old school or not we simply chose that design due to its performance and if we had any issues we could hopefully resolve it in a reasonable time..we didn't apply any of the .htaccess mentioned above for the simple reason it may conflict with other stuff already in use..

when we are finally all connected and running all via there own solar generated energy ill send the link along with a password ..

brian.. 

[Jáchym]

When dealing with imgs such as webcam, the safe bet is to always add current timestamp to the image URL

[weatherc]

When dealing with imgs such as webcam, the safe bet is to always add current timestamp to the image URL

Thats true. One can never be sure if browser x caches images or not no matter whatever expires etc tags says...

[SoMDWx]

good info here..

Is there a way to cache certain files with wildcards? I.E, I have a menu system with GIFS that will ALWAY be used and could be cached. The GIF names are:

somdwx_m1bg0.gif
somdwx_m1bg1.gif
somdwx_m1bg2.gif
somdwx_m1bg3.gif
somdwx_m1bg4.gif


Jim

[weather34]

good info here..

Is there a way to cache certain files with wildcards? I.E, I have a menu system with GIFS that will ALWAY be used and could be cached. The GIF names are:

somdwx_m1bg0.gif
somdwx_m1bg1.gif
somdwx_m1bg2.gif
somdwx_m1bg3.gif
somdwx_m1bg4.gif


Jim

if your confident and understand the .htaccess  file and its consequences when it goes wrong ..

#30 days
<Files “somdwx_m1bg0.gif”>
  ExpiresActive On
  ExpiresDefault A2592000
</Files>



#1 year 365 days
<Files “somdwx_m1bg0.gif”>
  ExpiresActive On
  ExpiresDefault A31536000
</Files>

it is best to do some research ..

brian..

[weatherc]

At least with Nginx what i use as frontend is it quite easy to play with a "own rules for each file"-system. It can also create expiresdate based on filetime, like filetime + 6h whats quite handy for ie forecastmaps, like this: 

Code: [Select]

location ~ /maps/ {
  add_header    Cache-Control  private;
  expires       modified +6h;
 }


[weather34]

At least with Nginx what i use as frontend is it quite easy to play with a "own rules for each file"-system. It can also create expiresdate based on filetime, like filetime + 6h whats quite handy for ie forecastmaps, like this: 

Code: [Select]

location ~ /maps/ {
  add_header    Cache-Control  private;
  expires       modified +6h;
 }


thats when you wish there was a like button thanks for the info

[SoMDWx]

good info here..

Is there a way to cache certain files with wildcards? I.E, I have a menu system with GIFS that will ALWAY be used and could be cached. The GIF names are:

somdwx_m1bg0.gif
somdwx_m1bg1.gif
somdwx_m1bg2.gif
somdwx_m1bg3.gif
somdwx_m1bg4.gif


Jim

if your confident and understand the .htaccess  file and its consequences when it goes wrong ..

#30 days
<Files “somdwx_m1bg0.gif”>
  ExpiresActive On
  ExpiresDefault A2592000
</Files>



#1 year 365 days
<Files “somdwx_m1bg0.gif”>
  ExpiresActive On
  ExpiresDefault A31536000
</Files>

it is best to do some research ..

brian..

Thanks! implemented a few files that are static on my page...

Jim

[weather34]

good info here..

Is there a way to cache certain files with wildcards? I.E, I have a menu system with GIFS that will ALWAY be used and could be cached. The GIF names are:

somdwx_m1bg0.gif
somdwx_m1bg1.gif
somdwx_m1bg2.gif
somdwx_m1bg3.gif
somdwx_m1bg4.gif


Jim

if your confident and understand the .htaccess  file and its consequences when it goes wrong ..

#30 days
<Files “somdwx_m1bg0.gif”>
  ExpiresActive On
  ExpiresDefault A2592000
</Files>



#1 year 365 days
<Files “somdwx_m1bg0.gif”>
  ExpiresActive On
  ExpiresDefault A31536000
</Files>

it is best to do some research ..

brian..

Thanks! implemented a few files that are static on my page...

Jim

Rica ederim..your welcome..🇹🇷

[SoMDWx]

Now that I have modified my .htaccess file to "cache" these files, where can I check to see if they are really being cached to my local machine rather than retrieving from file server?

Jim