PVII Support Forums + General Web Design, CSS, and Dreamweaver Discussions

PVII Forums » General Web Design

Need to Load Pages Faster

(20 posts) (5 voices)

Started 2 years ago by wcamp
Latest reply from beets

wcamp

offline
Member

Hello:

As an active photo editor, I've included thousands of photo images on my websites. Many of my photo-rich pages take a while to fully load.

I came upon a site called GTmetrix that measures the loading speed of web pages. With it, I tested a web page of mine that has numerous photos; the page is 85 kilobytes in size. . .

https://www.warrencampdesign.com/scripturePhotosNT-luke.html

GTmetrix gave my page the following scores: an "F-28%" page-speed score; a "9.3 seconds to fully load" score; a "total page size" of 11.5MB; and "144 requests." You can see the complete report on this page. . .

https://gtmetrix.com/reports/www.warrencampdesign.com/icWUj57g

Does my page take you ±9 seconds to fully load? . . .

Obviously, reducing a page's loading speed is [always] essential. But I cannot tell if the GTmetrix report is unbiased or if it supports links to its advertisers.

If you're familiar with GTmetrix, please tell me/us if its test results have merit. If so, which scores are important to improve?

Are you familiar with a different page performance site that you trust and recommend?

Thanks for your help with this inquiry.

Warren
_______

Posted 2 years ago
beets

offline
Member

It was more like 5 seconds for the page to load completely, but the images above the fold load right away and most people aren't going to wait for the entire page to load before looking at the images anyway. Maybe try P7's Show More/Less?

The gzip and browser caching is done via your .htaccess file. (Well, that's how I did it - I'm not sure how your site is setup.)

You can optimize your images when you save them from your photo editor, but only you can decide the best balance between image quality and PageSpeed metrics. Try optimizing a few of the images and see how it affects your score.

My PageSpeed score is C (75%) and the only "F" I get is for parsing JS, and it's Google's YouTube videos that are the culprit. which is pretty funny considering G owns YT

Posted 2 years ago
wcamp

offline
Member

Hello "beets":

Glad to meet you "digitally."

Seeing that my page took 5 seconds to load for you, I loaded my page again (for the first time today) and it took 6 seconds. I then rechecked with GTmetrix and it declared a page-load speed of 9.5 seconds. As a result, I suspect that GTmetrix is less than reliable in what it presents.

Regarding photo image optimization, I routinely optimize all photos, large and small. I use JPEGmini Pro.

GTmetrix has given me an "F" (0) score for image optimization! How can I get an "F" when all have been optimized???

At this point, I'm not going to be led (or mislead) by that site performance site.

May I ask you this, "beets" (and all others who can weigh in on this)? Have you used a JavScript (such as lazyload.js or lazyload.min.js ?

Lazy loading basically means that we defer the loading of images that aren't required immediately. Typically, any image that's not visible to the user on his screen or the viewport can be loaded at a later point in time (i.e. when the image enters or is about to enter the viewport). I've Google-searched "lazy loading" and it sounds ideal for me and my image-heavy photo-editing web pages.

For those of you who use a "lazy loading" JavScript, please suggest the specific script that you use, and how to identify that script with each image.

I know absolutely nothing about JS. I hope one of you will guide me on how to implement a "lazy loading" JS process to my page.

Thanks, in advance.

Warren
_______

Posted 2 years ago
mandarin

offline
Member

Lazy load might look pretty but it just adds another javascript to the page!

Image optimisation - according to GTM this will save just 8% in file size downloads ans will hardly impact on overall speed.

Gzip - waste of time on a modern server / fast broadband.

Test Server - I see you used their default Vancouver server - not sure where you are but test again selecting a server nearer to you an again from where your audience originates, you'll see different results.

Keep Alive - top of the GTM list - you should explore this and make sure it's on if you can, probably the very easiest way to speed up page load when there are a lot of calls to server being made - and your home page is one of them!

GTM - I've used there tests for several years and they give a good indication of true load speeds and are 99.99% accurate - or as far as they can be when testing from other side of world - hence the need to test also with a local server location.

HTH

Mike

Posted 2 years ago
wcamp

offline
Member

Hello, Mike!

Thanks for weighing in on this need.

As you suggested, I've rerun GTmetrix using Dallas, TX for the test server region. My new test got these results: "F" (28%); "D" (67%); 7.0 sec.; 11.5 MB page size; and 144 requests. All that improved (albeit slightly) was the fully loaded speed.

I looked at the "Enable Keep Alive" feature but I can't determine from its brief description what I ought to do. Do I myself make a unique entry to the markup on every web page? Or does my host/server set up an automatic preference setting for that? Please advise.

I need to make a meaningful effort at reducing the time it takes for my photo-rich pages to load. A number of my pages are much larger than the page I referenced above.

I hope that you (or another PVII customer on this forum) can help me implement a most effective means to reduce the time it takes for my pages to open so that the thumbnails on my pages can quickly begin to be enlarged.

Thanks for your help with this, Mike.

Warren
_______

Posted 2 years ago
mandarin

offline
Member

Hi Warren

11.5mb is a lot for the page, I'd optimise the images to begin with. I took one image - sun shining through trees- and dropped it from 184kb to 84kb at jpg 60% with no loss of quality. A bit fiddly for the number of images but do as a batch file.

Enable Keep Alive is on by default on Apache servers and allows browser to make multiple requests on the same http call to server.
Sounds like it's been turned off on yours, assuming you are on Apache server that is.

What your server is doing is opening then closing server port for every call. It's set in http.conf file with the command

KeepAlive On

DO NOT try to use in .htaccess as it will not work - if you have access to conf files just add as a new line.

If you have access to .htaccess try adding these lines

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

That will turn gzip on which "may" help a bit with speed, Make sure you clear browser cache before trying.

Try those steps, particularly Keep Alive and you should see improvements. Incidentally, from London Server i get an 8 sec page load.

Mike

Posted 2 years ago
beets

offline
Member

Don't forget - although the number/size of your images is a big part of the overall "F" score, you're also getting gigged for the other three "F" metrics as well, so even though mandarin may be correct that gzip doesn't matter, they're still using it to compile your overall score.

My gzip code is almost the same as mandarins and this is what I have for browser caching (I haven't checked lately to see if those line entries are current):

RewriteEngine on
## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 6 months"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>
## EXPIRES CACHING ##

You seem like a smart guy, but if you haven't worked with .htaccess before be sure to check your site when you're done editing the .htaccess file, and make sure you're not looking at a cached copy. Better yet, have someone else use a different device to check that the site is up and running when you're done.

Posted 2 years ago
wcamp

offline
Member

Glad to find e-replies from both of you, "beets" and Mike. Many thanks. Because there's a lot that's been expressed in both of your e-replies, I'll respond only lightly to a few items at a time. ( ; - )

Mike: Regarding the optimization that you performed on one image (presumably "luke.1.78-79.scripturePhoto_lg.jpg"), I've now rerun that image using JPEGmini and there was absolutely no reduction in its 188kb file size. Kindly advise me of the image optimization application you use so I can see it in action. Thanks.

Mike: I've now emailed my host/server support team, asking (1) if Apache is used on my root directory and (2) if Enable Keep Alive has been enabled on it. I hope to get an answer within the hour.

Mike and "beets": I've heard of but never used ".htaccess." I don't know where to begin. I'm afraid to open and get my feet wet with cPanel, assuming that that's where to access ".htaccess." Each of your suggested snippets is much appreciated, however, I'm not knowledgeable about, nor am I experienced with ".htaccess. In addition, I live in a small remote town in California with no one "in the know" about web development. Knowing that about me, what might you suggest I do next?

"beets": I also have never heard of "gzip code" and "RewriteEngine." The snippets you propose are "Greek to me." Sorry. I'm an experienced photo editor; I'm not an accomplished web developer/coder. (However, I'm glad that you perceive me to be a "smart guy." That made me smile.)

What's next for me, my friends?

Warren
_______

Posted 2 years ago
wcamp

offline
Member

Here's what I received from my host/server, Christian Web Host, in response to what I'd asked a few minutes ago, as noted in my previous post . . .

* * * *

Hello Warren,

Thank You for contacting us.

>> 1. Is Christian Web Host using Apache on my pages?

The server your domain warrencampdesign.com is currently hosted makes use of the Apache version 2.4. Please see the snippet below:-

~~~~
>httpd -v
Server version: Apache/2.4.38 (cPanel)
Server built: Feb 18 2019 19:25:26
~~~~

>> If so, is Apache’s “Enable Keep Alive” on by default, or has it been turned off for some reason?

Please note that the that 'Keep Alive' is disabled by default in the Apache configuration. Since this a server wide setting, we cannot enable this for your domain as it will affect all the other domain hosted on this shared server. Hope you understand the situation.

* * * *

I'm afraid that I don't know what to make of that dire comment. Is there something I can do to enable "Keep Alive"? ? ?

I look forward to finding an encouraging recommendation from one or both of you (or another on this forum).

Sincerely,

Warren
_______

Posted 2 years ago
mandarin

offline
Member

Hi Warren

I opened the image in Fireworks CS6 and used Export Wizard setting quality ti 60%.

By default Keep Alive is switched "ON" on Apache servers so your host must have made a specific point in turning it off, not clear why as all it achieves is to massively increase the number of http calls to server as confirmed by your GTM report.

You should have the ability to create an .htaccess file on shared hosting. You should ask host to confirm and get them to add the code i gave to existing file or create a new one for you. Again though gzip should be on by default so sounds like they are only offering a pretty dumbed down hosting service.

You can also check if you have access to File Manager via cpanel, just set it to show hidden files and any .htacces file will be shown.

Mike

Posted 2 years ago
beets

offline
Member

Your website copyright says 2006, but your site has https enabled so there's probably a redirect in place and quite often that's done via the .htaccess file. Try logging in to cpanel, go to file manager, and the public_html directory should show by default. The .htaccess file will probably be the first file after all the site folders. Single click the .htaccess to select it and in the top navigation bar there should be a 'View' tab on the right. Click that tab and you'll be able to see the contents of the .htaccess file. At least it's a starting point.

After reading your host's reply I'm not sure this is going to be helpful or that your cpanel will be similar to miine. They seem to have a very no-frills setup.

Posted 2 years ago
Sinclair

offline
Member

Sounds to me like Christian Web Host is a reseller and whois suggests 1&1 as suppliers to them, better off going elsewhere for your hosting, get what you need, possibly cheaper as no middleman involvement and less restrictive.

Posted 2 years ago
wcamp

offline
Member

I thank all three of you for your comments and suggestions.

I've emailed an inquiry to the host/server asking it to answer several questions that you've raised. I'll get back to you after I receive its e-reply.

Warren
_______

Posted 2 years ago
choreo

offline
Member

Just for comparison (and for fun) I just ran my Home Page via GTmetrix and you may be chasing the impossible? My page is a fraction of the size of your page, but still only get a B/C score.

This is my report:
https://gtmetrix.com/reports/choreo.com/vFt3ctVA

FYI - When I went to your Home Page it only took about 1-2 seconds to load on my AT&T cable connection.

Posted 2 years ago
mandarin

offline
Member

Warren

A recently completed site hosted on a "proper" server. All done with P7 stuff, loads in 240ms.

https://gtmetrix.com/reports/www.kayceebears.co.uk/yUxU9lAq

Putting here to show how much of an improvement a properly configured Apache server can improve speeds.

In addition to Sinclair's comment - 1 & 1 host on older heavily loaded non SSD servers in Germany, speed has never been their strong point. Really would recommend a move else where.

Mike

Posted 2 years ago
wcamp

offline
Member

Hi, all. I've received my host/server's e-reply, which sounds encouraging. Here it is . . .

• • • •
Dear Warren,

The issue is now resolved. Please check pages from your end.

I have now enabled both KeepAlive and GZIP compression for you. As you mentioned, KeepAlive should have been enabled in the server. There was a recent update process in the server and the KeepAlive setting seems to have been turned off during this process.

GZIP compression is disabled for domains by default. I have now enabled the same for you using the "Optimize Website" utility available in the server.

.htaccess files can easily be created from your end or from our end. You can easily create a file via your FileManager or upload the file to the server via FTP or FileManager.

I hope this answers your queries and issues.
• • • •

After receiving this e-reply, I speed-tested the above referenced "Luke" page.
The previous GTmetrix results were: "F (28%)"; 9.3 secs to fully load; 11.5MB page size; and 144 requests.
Today's improved test results are: "F (48%)"; 3.8 seconds to fully load; 11.4MB page size; and 144 requests.

Today's results include two "F": (1) Optimize images and (2) Leverage browser caching.

Regarding "Optimize images," I await an e-reply from JPEGmini that addresses the concern I raised.

Regarding "Leverage browser caching," I plan to ask my host/server to load into my .htaccess file the two snippets that mandarin and beets suggested. If I should include something more in my .htaccess file, or if I should change the data in either of the two snippets you provided, please advise me of that. I want to minimize the number of requests I'll make to the host.server.

Thank you. Write back when you can.

Warren
_______

Posted 2 years ago
mandarin

offline
Member

Warren

If host has turned on Gzip there's no need for the htaccess file I gave.

I never do anything about browser caching as by default my cache is emptied every time i exit browser (Chrome Extension).

Concentrate on making images smaller and you'll see more improvements although quite honestly 3.8 seconds is not bad.

Mike

Posted 2 years ago
wcamp

offline
Member

Hello, again:

In my follow-up e-exchange that I've had with my host, I received the following suggestion yesterday. It deals with "combining images with CSS sprites." Because some of the images on my home page are from TPM, I suspect that each of you can easily suggest what I might do in this case. Here's the Home URL if that helps you:
https://www.warrencampdesign.com

Here's what was suggested:

• • • •
The Gtmetrix still suggests to Combine images using CSS sprites(and gives a D grade for the same).

The following images served from warrencampdesign.com should be combined into as few images as possible using CSS sprites.
https://www.warrencampdesign.com/p7tpm/img/tpm11_east.gif
https://www.warrencampdesign.com/p7tpm/img/tpm11_east_down.gif
https://www.warrencampdesign.com/p7tpm/img/tpm11_west.gif
https://www.warrencampdesign.com/p7tpm/img/tpm11_west_down.gif
https://www.warrencampdesign.com/warren/images/listRedBullet.gif

Combining images into as few files as possible using CSS sprites reduces the number of round-trips and delays in downloading other resources, reduces request overhead, and can reduce the total number of bytes downloaded by a web page. If you want to implement the same or improve the website load time even further, kindly contact an SEO expert.
• • • •

I'm eager to learn this new aspect of improving SEO. Assuming that you agree with this recommendation, I look forward to receiving your suggestion(s).

Sincerely,

Warren
_______

Posted 2 years ago
mandarin

offline
Member

Hi Warren

Don't bother with CSS Sprites, the effort required to implement is far greater than the real world benefit suggested.

Concentrate instead if you feel the need to doing more in just reducing file size of all those images. It's current load time though is quite acceptable.

If you really want to explore sprites here's the reference i used once and have never bothered since

https://css-tricks.com/css-sprites/

Posted 2 years ago
beets

offline
Member

It's great that you've addressed some of the issues, but don't let the GT page score make you crazy. There are several other speed tests out there including PageSpeed Insights (read: Google) where you score a very impressive 98% overall. My page scored a barely average 70% - I'm still getting gigged for things like JS, but this time G doesn't like the Vanilla and DMM js. The PageSpeed metric from the GTmetrix test said nothing about Vanilla or DMM - they didn't like the YT vids.

https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.warrencampdesign.com%2FscripturePhotosNT-luke.html

Posted 2 years ago

PVII Forums » General Web Design

RSS feed for this topic

Reply

You must log in to post.