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 cachingExpires 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