Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Speeding up your website load times.


JcMagpie

Recommended Posts

Now I am always skeptical when people tell me they have a new way to speed up my website! However it can some times be true and help. So here is one simple way to do this using your .htaccess file.

Its explained In depth in this article.

https://varvy.com/pagespeed/cache-control.html

First lets bench mark your site as it is so we have something to compare the changes against.

Use this link to do this.

https://tools.pingdom.com/

Once you have a load time make a note.

 

image.png.144b76a39336a1e8da88f6df3fed24f4.png

 

Now open your .htaccess file and add the following code.

 

# One month for most static assets
<filesMatch ".(css|jpg|jpeg|png|gif|js|ico)$">
Header set Cache-Control "max-age=2628000, public"
</filesMatch>

 

This is basically telling the browser of any one coming to your site to keep stuff in the cache. The article goes into more depth about this and how it works.

Now save and close your .htaccess file, that's it. Now press f5 key to clear your browser cache, or go to settings and clear it.

Now go back to https://tools.pingdom.com  and run the speed load test again.

image.png.0f6ccebe8392441a373211df700140e4.png

Has it made any improvement? If yes then your all good and enjoy the faster loading of your site. If not then never mind just remove the code from your .htaccess file.

I have seen small improvements on every site I have tested. If you alrady have this set in your .htaccess file then you dont need to do this.

 

 

Link to comment
Share on other sites

A couple other things in .htaccess that may be useful in speeding up site access:

## EXPIRES CACHING ##  per gtmetrix.com suggestions
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
#ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"
</IfModule>
## EXPIRES CACHING ##
	## compress output to reduce bandwidth
	#from kinsta.com
<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>

Remember, .htaccess gets processed on every action, so be careful not to load it up with too much junk.

Link to comment
Share on other sites

Dear @MrPhil , If I add everything above in  my .htaccess, + what @JcMagpieposted above and in this forum:

https://www.oscommerce.com/forums/topic/413146-a-new-danger/?tab=comments#comment-1772840

That could slow the loading of my website? What do you recommend?

Best regards.

Valqui

:heart: Community Oscommerce fan :heart: You'll find the latest osC community version here.

 

Link to comment
Share on other sites

Well, anything added to .htaccess is going to slightly slow things, as it has to be processed for each page. I hope that it gets cached to some degree and doesn't have to be reread and fully reprocessed. Anyway, my set of changes are to tune expiration dates for cached content (cached = doesn't have to fetch again) and to cause various files to be compressed (smaller = faster transmission, but a small cost to expand back to normal size before loading). The other set of changes is intended to block certain bots. If a bot is wasting server cycles, it may be worth blocking them. It doesn't cost much to block a bot, but if you're not having any problems, it might not be a critical thing to do.

All in all, if you're wanting to know what effect they will have, you can measure load times before (several times with different methods, to get a consistent number). Add one section of this stuff to your .htaccess and measure load times again. Add another section and measure again, and then do the third section and measure. See if load times improve, or if any of them actually increase load times. If there's very little change either way, it's up to you whether you want to keep the changes.

Link to comment
Share on other sites

10 hours ago, valquiria23 said:

That could slow the loading of my website?

This is the difference between an empty .htaccess file and one with everything in it. It is stock frozen with the fine tuning described in the other thread.

image.png.6d1918c934030d9fe99f8018b969c58d.png

 

This is the same site now with a .htaccess  file with all the recommended bits added.

image.png.cf615cf3ab206403a15e6d81acbcd9da.png

As you can see the adding of the cache and other bot stuff has only made a small change to the optimized site.

Basically adding as little as possible to your .htaccess . Also try not to add duplicate instructions.

 

Link to comment
Share on other sites

Hi @JcMagpieZahid, thank you very much for the response!

Apparently with the addition of this content to the .htaccess you improve the load time !!! so it was an improvement :)

Thank you very much @JcMagpie and @MrPhil for this valuable information !!

Best regards.

Valqui

:heart: Community Oscommerce fan :heart: You'll find the latest osC community version here.

 

Link to comment
Share on other sites

If you have Cpanel, it has a button called "optimize website" that will set up deflate for you at the directory level.  You have a couple options for what you want to compres.  I use "Compress All Content".

 

I'm not really a dog.

Link to comment
Share on other sites

One thing I did a long time ago is set up a thumbs directory and big image directory, so only my small sized thumbnails are on the load.  Also, at times, I'll go through and run an image optimizer to make sure they're all small as can be without degrading them.  So, my home page is only 240k to load.  I added a main site image to see if it helped my tablet and mobile because they like to show an image.  That added a little size to the site, but not much.  I've had my site running since 2002 and some of my systems are old and could be improved. 

 

This test is with Google Analytics turned off.  Not much slower with it on, but the grade goes down because of how it works.  It's also full SSL all pages.

e13f384e-ed36-40c9-b610-a67f98d14152.png

I'm not really a dog.

Link to comment
Share on other sites

I’ve been pondering about the best way to do that for a while John, Google strongly recommends having images of the right size for each display device, they recommend minimum of 3 sizes for each image.

The main strategy for serving appropriately-sized images is called "responsive images". With responsive images, you generate multiple versions of each image, and then specify which version to use in your HTML or CSS using media queries, viewport dimensions, and so on. See Images in markup or Images in CSS to learn more.

Another strategy is to use vector-based image formats, like SVG. With a finite amount of code, an SVG image can scale to any size. See Replace complex icons with SVG to learn more.

Yet another strategy is called "client hints". With client hints, the browser advertises its viewport dimensions and device pixel ratio when requesting the image, and the server takes care of serving the correctly-sized image. Note however, that browser support is limited. See Automating Resource Selection With Client Hints to learn more.

Tools like gulp-responsive or responsive-images-generator can help automate the process of converting an image into multiple formats. There are also image CDNs which let you generate multiple versions, either when you upload an image, or request it from your page.

https://developers.google.com/web/tools/lighthouse/audits/oversized-images

 

They also recommend using something like jpg2000 which offer high compression with good quality.

 

JPEG 2000, JPEG XR, and WebP are image formats that have superior compression and quality characteristics compared to their older JPEG and PNG counterparts. Encoding your images in these formats rather than JPEG or PNG means that they will load faster and consume less cellular data.

WebP is supported in Chrome and Opera and provides better lossy and lossless compression for images on the web. See A New Image Format For The Web for more on WebP.

https://developers.google.com/web/tools/lighthouse/audits/webp

I've just not figured out a way to do this without changes to core files!

So how are you using different size images?

I use this little tool to batch process images to different sizes, it saves a lot of time.

Not sure if link is allowed so I’m sure someone will remove it if its not allowed.

https://www.trythenbuy.co.uk/easy-image-modifier-free-p-51.html?osCsid=vcb46ruvcugcmjv2tjcnq1sgk2

 

 

Link to comment
Share on other sites

I'm not doing sizes for each device and what I've done goes way back before smart phones.  I sever a small image that is typically under 2k for my thumbnail.  Then when you click on it you get a large image from another folder.  It makes my pages lighter and I have can a larger, higher resolution for my large image.  Remember, my site is old and I still have core mods from that.  I haven't searched to see what others have done, but you might find an addon that does this without changes to core.

I'm not really a dog.

Link to comment
Share on other sites

I haven't found one so far, they all make core changes! Will have to find time to look at this soon. Might have to look at another way of doing it as Jack Moore

colorbox which we currently use I believe is no longer under development.

I have done a bit with Bootstrap gallery but not sure if its the best way forward or to look at another js option like Lightbox.

 

 

Link to comment
Share on other sites

http://adaptive-images.com has minimal impact .

it only needs addition of one javascript in the head.

i think it fits with the modular BS approach.

i have it running since ages ...

KEEP CALM AND CARRY ON

I do not use the responsive bootstrap version since i coded my responsive version earlier, but i have bought every 28d of code package to support burts effort and keep this forum alive (albeit more like on life support).

So if you are still here ? What are you waiting for ?!

 

Find the most frequent unique errors to fix:

grep "PHP" php_error_log.txt | sed "s/^.* PHP/PHP/g" |grep "line" |sort | uniq -c | sort -r > counterrors.txt

Link to comment
Share on other sites

So downloaded it and installed on test site. The test site has all 500x400 images. If I understood the instructions right it should resize all the images for different size view and hold them in /ai-cache directory.

However so far nothing in the directory! So whats in your directory? Or is this resizing on the fly?. Re sizing is already available with colorbox in stock OcS, it not the preferred method for images. You need it to make and keep images of the right size for each display you want to serve, typicality 3 sizes for each image.

I'll keep it running for a while and see if it loads anything in its directory.

 

Link to comment
Share on other sites

Well gave it all night to do its stuff even with some larger files but nothing. The directory its meant to put the resized images in is still empty!

Never mind was worth a try.

What we need is a addon that will do this automatically every time a new image is added. There is a nice bit of code on the GitHub that could be made to work with OcS but will take some work.

https://github.com/DarthSim/imgproxy

image.thumb.png.03da7dae8c27722493ea77aac1857a88.png

Original 4000x2000 image weighing over 650KB; creating imgproxy URL; resized 500x250 image weighing 19KB

You can read about it here. https://evilmartians.com/chronicles/introducing-imgproxy

We could setup a OcS image server for members use only.

There are several options including the php one, in fact codecanyon is full of resizing scripts costing only a few dollars each.

 

If your feeling creative and want to make your own resizing addon then there is a nice php function for this available on GitHub,

https://github.com/Nimrod007/PHP_image_resize/blob/master/smart_resize_image.function.php

I see the main challenge is integrating any solution into OcS without core changes. If that can be done then the “imgproxy” solution looks very interesting.

Just add one high res image per product and let “ imgproxy” do all the work for you in the back end on the server.

 

 

Link to comment
Share on other sites

21 hours ago, JcMagpie said:

So downloaded it and installed on test site. The test site has all 500x400 images. If I understood the instructions right it should resize all the images for different size view and hold them in /ai-cache directory.

However so far nothing in the directory! So whats in your directory? Or is this resizing on the fly?. Re sizing is already available with colorbox in stock OcS, it not the preferred method for images. You need it to make and keep images of the right size for each display you want to serve, typicality 3 sizes for each image.

I'll keep it running for a while and see if it loads anything in its directory.

it just works from your full size images, creating the necessary images on the fly, but you do need to define which sizes you want. It was very easy for me to get it going, perhaps your colorbox now interferes with it ...

KEEP CALM AND CARRY ON

I do not use the responsive bootstrap version since i coded my responsive version earlier, but i have bought every 28d of code package to support burts effort and keep this forum alive (albeit more like on life support).

So if you are still here ? What are you waiting for ?!

 

Find the most frequent unique errors to fix:

grep "PHP" php_error_log.txt | sed "s/^.* PHP/PHP/g" |grep "line" |sort | uniq -c | sort -r > counterrors.txt

Link to comment
Share on other sites

48 minutes ago, bruyndoncx said:

it just works from your full size images, creating the necessary images on the fly, but you do need to define which sizes you want. It was very easy for me to get it going, perhaps your colorbox now interferes with it ...

Also it would need different people browsing the site with different devices. If only people with desktops viewed the site maybe the script didn't need to be triggered etc...

Try viewing the site on a mobile device and maybe the cache will start to fill up.

Matt

Link to comment
Share on other sites

No had used several devices to force it to make smaller images but it failed to make anything. If it works it would put new images in /ai-cache  but nothing in that so its not converted anything.

setting up was not an issue quite simple, define the sizes you need and where to put them,

$resolutions = array(1382, 992, 500, 400, 250, 200, 100 ); // the resolution break-points to use (screen widths, in pixels)
$cache_path = "ai-cache"; // where to store the generated re-sized images. Specify from your document root!

Then just go to your website from several different screen size devices, you can tell its working as it first shows error website  you refresh and it comes up, but all images are re scaled not resized and nothing in its image directory.

It may just not work with colorbox on the new sites.

 

Link to comment
Share on other sites

Hello everyone,

Using the test page: https://tools.pingdom.com with my test site gives me the following problems:

1. Parallelize downloads across hostnames:

This page makes 66 parallelizable requests to www.XYZ.com. Increase download parallelization by distributing these requests across multiple hostnames:

2. Serve static content from a cookieless domain
Serve the following static resources from a domain that does not set cookies:

http://www.XYZ.com/catalog/images/card_acceptance/american_express.png
http://www.XYZ.com/catalog/images/card_acceptance/maestro_transparent.png
http://www.XYZ.com/catalog/images/card_acceptance/mastercard_transparent.png
http://www.XYZ.com/catalog/images/card_acceptance/paypal_horizontal_large.png
http://www.XYZ.com/catalog/images/card_acceptance/visa.png

and many more images in this list ....

3. Remove the following redirect chain if possible:
http://www.XYZ.com/
http://www.XYZ.com/catalog/index.php

Any suggestions on how to improve / eliminate these problems?

I still do not try any of the recommendations that  @JcMagpie and @MrPhil posted.

Best regards

Valqui

:heart: Community Oscommerce fan :heart: You'll find the latest osC community version here.

 

Link to comment
Share on other sites

12 hours ago, JcMagpie said:

If it works it would put new images in /ai-cache  but nothing

Maybe if your site is in a subfolder u cannot find them there, it will create them in the root folder. ( it does create them on my wamp server in the www folder www/ai-cache/)

 

 

Link to comment
Share on other sites

2 hours ago, Rwe said:

Maybe if your site is in a subfolder u cannot find them there, it will create them in the root folder. ( it does create them on my wamp server in the www folder www/ai-cache/)

No all my sites are always in root. Don't know why but its doing nothing with images. Will play with it some more to try and find out why. Thanks.

 

Link to comment
Share on other sites

It works fine, it was my mistake not understanding the configure fully,

$resolutions = array(1382, 992, 768,500, 480, 250, 100, 40, 57 ); // the resolution break-points to use (screen widths, in pixels)

I added the 100,40,57 this morning as its what is set in admin in the shop.

I now have a folder called /ai-cache/100 with a few 100x80 images in it.

So I think it only produces images for which it has a matching container to show them in?

 

Link to comment
Share on other sites

i guess there is only an  image created IF the  image is larger than the screensize?

It would be nice if this script also could  take care of the thumnails for the listing pages. It could be done in a module AND without touching the core.

 

 

Link to comment
Share on other sites

I think it’s worth pointing out to people that no matter how good you make stock all your good work can be ruined by people installing poor quality add-ons, or just too many.

You should test you site before and after installing any add-on and if it affects performance you need to decide is the additional functionality is worth the drop in performance?

 

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...