Daft Website Online


(Alfons Salmhofer) #1

My draft website is now online for testing purpose. If anyone is interested visit below provided link. Still a lot work to do but it’s a beginning.

http://www.qse-support.com

Any suggestions to speed up the loading of the index page would be appreciated!

Alfie


(Greg) #2

I like it Alfons, it did take a while to load on the first visit (`~15 seconds), the second visit was only about 5 seconds. The source code shows a ton of “w.LsdException” and it also shows 3 errors…

[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (banner_sector_construction.jpg, line 0)
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (construction career.jpg, line 0)
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (background-1 copy.jpg, line 0)


(Colin) #3

Alfie,
I agree with Greg, it looks great and works well but load time is around 12 seconds for me and there are the errors. I also took a look at the images which appear to be around 2.6 mb in total. I think (and I am not an expert) it would be better to reduce your image weight on start up
Colin


(strmiska) #4

cool design!
your images are too large. pngs should be compressed by using 8-bit pngs (not 24) - 128 colors and down.
better you use for large images compressed jpg. but there´s always a decision you´ve to make.
if you produce for websites, jpgs are smaller. if you produce for an app, i recommend using png,
because on retina-displays jpgs gets blurrier. for animations there´s a new standard - .apng (animated png)
this will remove animated gif for the future, but it isn´t working on all browsers at this times.


(Alfons Salmhofer) #5

Dear All,

Many thanks for your constructive feedback, which is much appreciated! It helped me a lot to prioritise my focus for improving the loading time.

Greg:
I have removed the file reference for the images that create error in the source folder (images that I had used before but deleted later), thus the errors should be resolved now. I have deleted all “w;LsdException” from the code (I was not sure if I can do this but it seems that it is working). Loading time is still long I believe.

One thing I noted is that every time I export the project to a HTML5 document, it writes me this junk of apparently useless code into the index file. I have Googled a bit about this phenomenon and one suggestion was that this can happen when text is copied from a MS Word document into the project. I’ll keep Googling about this…

Colin:
The total size of all documents in the web folder (on the server) is 5,2 mb. I tried to reduce the size of all files as much as I could, but it is still a lot. I keep trying…

strmiska:
The png files have transparent background somewhere within the image which I need to retain. I have tried in photoshop to convert them to 8 bit pngs but the the transparency is only of acceptable quality when I save them as 24 bit pngs, otherwise I have sort of a white colour frame at the edge of the transparent background.

I have uploaded a screenshot of the file list that is in my web folder:


(Greg) #6

I found this on the net about pasting MS Word content…

https://wordpress.org/support/topic/huge-code-added-each-time-i-add-an-image


(strmiska) #7

yes, it´s true - if you use shadow, for example in png, then it´d be better to compress to 24 bit.
otherwise the shadow gets granulated.
but it looks good now, i think.


#8

Here’s our guide for decreasing load speeds: Decreasing load times and optimizing performance: Preparing a Large project in Hype

By default, Hype will preload all images and only begin displaying your document after all images have been loaded. You can control this behavior on a per-image basis by disabling the Preload option that’s presented in your document’s Resource Library when an image is selected. This will probably give you the biggest speed boost.

It does look some there’s some extra style information present in your .html document, but it should have a huge effect on loading time.


(Greg) #9

Take look at the innerHTML of your text boxes, if you are copy / pasting text from MS Word, it will put a lot of formatting tags in the innerHTML


(Alfons Salmhofer) #10

Continuing the discussion from Daft Website Online:

Yes correct. I have noticed this when I had the issue with the font shade/background that I had behind my text and wouldn’t go away unless I deleted some of the formatting/style code in the innerHTML that was copied over to hype from MS Word.
The Hype build-in font shade/background on the font inspector didn’t allow me to change the font formatting for copy/pasted contents.

Since I am not a coder I have to experiment and google a lot. I was hoping I can get away without any coding knowledge/skills but figured that some sort of knowledge is always good to have at some point. I keep learning :wink:

Continuing the discussion from Daft Website Online:

Dan:

Great guide. I will optimize my hype project accordingly and try improving loading time. Once I am happy with it, I will replace the documents on the server.

I have one question though if you don’t mind:
Is the loading time when I preview the project in the browser from the Hype app (offline) equivalent to the loading time in the browser online (from the domain host)? Just wonder if I have to update my hosted files every time I wand to test loading times.

Cheers, Alfie


(Greg) #11

That may be because of the innerHTML formatting tags. Try saving your MS Word content as a Plain Text (.txt) file. That should strip all of the formatting from your text. Open the Plain Text file, then you can copy / paste the text from the .txt file into Hype.


#12

Yes, you’re going to need to re-upload to test the loading times. You’re testing a combination of things: your own connection to the Internet, your browser’s cache of site data from previous visits, and the speed of your own computer. The best way to get a complete picture of how long it will take is to test on browsers and devices with a clean cache (each browser has a way to ‘empty cache’) from your server.


(Alfons Salmhofer) #13

Yes it works fine, no formatting issues. Just one step more in the work flow. Copy/paste from Word document into a plain text editor and then copy/paste from text editor to hype, but never mind. Not the end of the world :wink:

It still surprises me that formatted text that is pasted from an external source into hype cannot be reformatted differently directly in hype (text/font inspector) without this extra step to be done or doing some work in the code. I believe copy/pasting text from an existing external document is standard procedure for many designers/web developers and most of the time it is already a formatted text. This seems to be rather a work-around than a standard action in an application.

In order to get rid of this junks of “w;LsdException” codes from my exported document, I will need to delete all my text contents in the hype project and copy paste it back once again from a plain text document. Thanks god I don’t have too much text on my website yet.


Youtube embed not working
Auto-convert pasted text to plain-text-format
(Hans-Gerd Claßen) #14

does pasting directly to the open ‘innerHTML’-window within hype from wordsource paste plain text? works here …


(Alfons Salmhofer) #15

@h_classen
Thanks for the tip, I will try this tonight and see if it’s working.


(Greg) #16

Great Tip! Thanks Hans. This should be added to the “Tips & Tricks” Section of the forum


(Jonathan Deutsch) #17

You can also use ‘Edit > Paste and Match Style’ which will achieve a similar effect.

We’re relying on WebKit’s text editing in conjunction with elements as divs, so there’s still room for a lot of improvement in how Hype handles text.


(Alfons Salmhofer) #18

OK I have finalized my website (well, for me nothing is ever final…).

I had the initial intention to embed a photo/video gallery but finally decided to generate an album outside of the hype document and just link to it. I used jAlbum which generates quite some nice galleries. It works fine and the dark theme of the gallery seems to match with the theme of the website. I assumed that embedding an album would effect the loading time pretty much as well.

Loading time still takes a little while but I decided to leave “pre-load all images” on as the overall experience is so much better on the first visit. Those animations which start “on scene-load” wouldn’t be smooth enough otherwise or elements are missing, thus it wouldn’t look too good. Also, my website is actually one document with 9 scenes in it, so I believe all images of the 9 scenes are “pre-loaded.” Sure that will take a while.

In the future, I am planning to make another version of my website where I just break down the scenes into separate html files to reduce loading time.

I am working on my wifes website now and will share the link also once the draft revision is good to go. I am planning to use waypoints for some nice animated effects during scrolling. Thanks to Daniel for the waypoint tutorial (Viewport / Waypoint actions in Tumult Hype: Starting an animation when an element is visible) and @jakob for further guidance in this regard.


(Jonathan Deutsch) #19

I definitely would like to improve preloading control in the future, so you could possibly do things like pause between a scene transition to load only the images that scene needs. I’m not sure when we’ll get to it, but definitely see the value.


(chrisgrande) #20

Run your PNGs thru Pngyu and ImageOptim this will shave 60-80% off the images and they will basically look identical.