Problems with Slow Page Loading

[johne30213120]

Hello, I am a novice developer, and am plagued and stumped by slow presentation issues.

I have Adobe Creative Cloud 2017.  I built a site using Dreamweaver, embedding Animate animations and photos edited using Photoshop.  I am trying for responsive design, so there is quite a bit of CSS code adjusting for different screen sizes, and most pages call two different images, one for wider screens and one for narrower.  Except in the three animations, most images are background images.

Initially, I posted the site on a testing server at Adobe Business Catalyst (a free service included in my Creative Cloud subscription).  When my reviewers all complained about the slow page builds, I purchased a HostGator account that promised quick response.  I have also:

1. Optimized the images using the Photoshop "Save for Web" feature (choosing "JPEG High")
2. Compressed the images further using the TinyJPG tool
3. Preloaded the main images on the page before the page that calls them, using :root:before {content: lines in each page's <style> section
4. Tried varying the "Publish settings" in Animate so that fewer files are generated

None of this has improved my reviewers' experience.  They see a multi-second delay before each page.  It's worse on the pages with animations.

Oddly, I don't see the same problems.  The pages load fairly quickly for me, even after I clear my cache, no matter whether I view the site using Firefox, Internet Explorer, Chrome, Edge, or Safari.

I am tempted to try a rather drastic solution: Abandon responsive design entirely and, instead, on the launch page, provide 4 links, e.g., "If your screen is less than 768 pixels wide, click here.  If your browser is 768 to 991 pixels wide, click here." and so on).  I would have to spin off multiple versions, but at least each page could be significantly smaller and simpler.

But from everything I read about responsive design, this shouldn't be necessary.  So I thought I would ask this forum first.

The site may be viewed at http://tdquizsite.com/.  Scroll down on the initial page and click "here" to launch.

I would be happy to post any of the Dreamweaver code; I'm just not sure what to select.

Thanks in advance for any suggestions.

John

[pziecina]

Hi,

You are making a typical beginner error, in thinking everyone has the same connection speed as yourself. Connection speeds vary greatly and mobile connections more than landline connections.

Your slow loading problems are almost certainly partly caused by the use of Animate animations, even one animate animation can slow down page load, and three almost certainly will. Also run your page through the html validator as a number of errors are showing, which will increase page render time.

Modern browsers and mobile devices are becomming increasingly un-tollarant to errors in code, and mobile devices are also becomming increasingly sensitive to hi-bandwidth usage.

[Nancy OShea · Accepted solution]

Run your site pages through Google's PageSpeed Insights [PSI].  Not surprisingly, you're getting POOR ratings on both mobile and desktop devices.   This is fairly common for beginners. 

https://developers.google.com/speed/pagespeed/insights/

You'll never achieve a perfect 100% on PSI  but there are several things you can do to improve your score:

• Limit above the fold CSS and JS requests.
• Use minified JavaScripts & CSS files.
• Place all non-essential JS scripts at the bottom of your documents.
• Leverage browser caching by telling browsers which files to cache (CSS, JS, Images, etc...) and how long to remember them.
  https://varvy.com/pagespeed/leverage-browser-caching.html
• If your server supports it, enable GZIP compression.
  GZIP Compression Test

Animations are nice eye candy.  But their necessity must be weighed carefully against file size & site performance.   I use a few JavaScript & CSS animations on my home page which are smaller than anything I could produce in Animate CC.  Do I really need them?  No.  But they don't adversely effect page load so I'm comfortable using them.  

[johne30213120]

Thanks very much, Nancy.

[Nancy OShea]

This is a responsive Quiz built with Bootstrap & jQuery.  It loads quickly and performs well in all devices & browsers I've tested. 

Interactive Exam Multiple Choice

GOOGLE PAGE SPEED INSIGHTS:

     Mobile 68/100

     Desktop 88/100

Nancy