I am trying to reduce page load time. Now it's turn for icons.
What is better for page speed?
Load 10-50 SVG icons from files or
Use FontAwesome
If your goal is reduce page load times you surely better use svg icons served from a local folder in your server. How many icons you will use? 50? My biggest project used 34 icons half of which were not present in any icon font, so I had to draw them myself, after that I realized, one day I commited a typo when coding and Font Awesome didn't load. And my page loaded really fast. Nothing else to think about it. I have created a personal system which essence is explained here How to Replace the Web Font with SVG icon in CSS(Font Awesome)?
Hope it hepls you as much as it has to me!
Related
Can anyone explain me what is been used on this template to secure the images used in the website template http://template-entitled.webflow.com/ and is there anyway I can extract them out, every time I save the pages, I just able to save icons not the background and slider images. I downloaded its css and js files but couldn't find and png files for background.
Not sure if you just need the background images or you need to recreate the same effect of this theme. Anyway if you just need the images with firefox you can right click on the image an choose visualize background image (not sure if the English menu is exactly like this) and you'll have the url of the image (i.e.: http://uploads.webflow.com/533e797fc51278ef4200094a/534e45fb2dd7fcb8350002df_Office-6-2.jpg)
I'm trying to put together a page at http://www.sketch360.com/store/home/ which should show featured products and thumbnails for those products. For some reason the images aren't showing on page load, even though they immediately appear when you either right-click on the image, click on a next/previous arrow, or open 'developer tools' in chrome.
The status of the image styling in css I've noticed, changes from display:none to display:inline-block when you perform any of the above actions to get the images to show.
I've been through the timthumb troubleshooting steps at http://www.binarymoon.co.uk/2010/11/timthumb-hints-tips/ and have changed permissions on all directories according to these instructions. Any help would be much appreciated in getting these images to show up on page load.
The images show up (also using the timthumb method, I believe) on this alternative page: http://www.sketch360.com/store/shop/ but not on the first page (that is going to form the home page for the site: http://www.sketch360.com/store/home/ ).
Any suggestions would be gratefully received.
It isn't a timthumb or wordpress issue. It looks like it is a stylesheet / jQuery issue - where the div that covers the image (used for the highlight on hover) is opaque and covering the images. The funny thing is that when I "Inspect Element", the images all appear.
Double-check your starting styles for class "overdefult" - make sure it has the right opacity or set the background color to transparent. (You could also try removing it temporarily to prove that this div is indeed your issue.)
After many hours banging my head against a brick wall, I have discovered an updated script available that controls the bxSlider used to display these images in li's - and having upgraded the minified script, the problem seems to have resolved itself - just in case there are others needing help on this too.
I'm designing an e-mail template for a company and it tests great in everything besides Outlook. For some reason the bottom images of the email look like they're loading half way and then stop. I've found information online that Outlook won't load images with a height greater than 1728px, but the tallest image we have is much shorter than that. There are images beyond 1728px on the page that are loading just fine, so I'm not sure that's the issue. Does anyone have any experience with this? Any advice would be helpful.
Hi Here is a quick solution for this to be done in the outlook.
Use photoshop and follow this steps:
Once the design is over, slice up the image parts / height(1728px as per yout example).
Save this as, File->Save for web and device. click save. you will get option under save box
Under format change this to HTML and image from drop down.
Save them in one folder. A new HTML file and image file will be created in this folder.
Open this HTML file in a browser.
Just copy and paste the content in the outlook using a single cell table.
That's you are done. Now your image will load without any problem.
I have been using nextgen gallery of wordpress, which uses jquery cycle.
I noticed that the images load in a lazy way (eg the gallery has 15 images, and at first only three load, then 2-3 more etc). The thing is that I create thumbnails of them so I need them to load instantly.
Does anyone knows which code should I mess with in order to make change this behaviour?
thanks!
This is because of the nextGen Gallery javascript wrapper on jQuery Cycle.
If anyone needs to modify this, s/he should mess with the ngg.slideshow.min.js.
We all know that pre-fetching images can run slow because of browser limits in the HTTP protocol, right? So, I have XHTML, jQuery, Apache httpd, and PHP at my disposal. What's an easy solution to pre-fetch a lot of images, without using sprites or multiple hosts?
See, I have these themes one selects with a SELECT box. It changes the 200x200 theme image on the right of the box. Unfortunately there are like 150 of these. So, when I load the page, the progress bar keeps running to download these all.
How can I get these images pre-fetching faster without using sprites or multiple hosts?
If it's just a theme change, which probably rarely happens (right)? Then why wouldn't you just load the image for a theme when the the select is changed and a new theme is chosen? It seems "strange" to load 150 images of which 149 may not be seen.
Correct me if I'm missing the point - and if so, can you provide a screenshot so I can get an idea of what you're really trying to show?
Hindsight is probably 20/20. I probably should have implemented it in sprites, as well as for many of the buttons I used on the site. It's just that I lack a good sprite editor tool that speeds that process up.
Anyway, the strategy I went with was to use Javascript prefetch via jQuery. But even that wasn't enough. I had to wrap that function in a setTimeout(), but that only helped a little. I then had to fire that setTimeout() during a login form submit. It made the login form submit slightly longer, but made the website appear snappy on load.