Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
My friend hired a guy to build her company's website, but the developer has since stopped responding to her attempts to contact him. The site performance is pretty poor, especially because it's a graphic design company. The images should be the most prominent and accessible elements on the page, but they load horribly slowly.
I looked at the page source but I'm a total novice with webdev and this site was developed using WordPress, I think. I'm just trying to help out my friend, so I'm wondering if anyone has ideas why the images might be so slow to load and what I should look into as far as fixing them. Could it be as simple as image size or format? Or how they're loaded? Or where they're loaded from?
Any ideas are greatly appreciated. Here's the website URL: http://studiosaltdesigns.com/
There are more issues at play here than just large images loading slowly.
Testing load speed via http://tools.pingdom.com I can see there are over 10 .css files loading on the homepage and over 20 .js files (many of which aren't minified).
As the prvious answers suggest, you should think about optimising your images (reduce file size) but also try to minify and reduce the number of resources being loaded.
The way the site is built is it hides the images until they've loaded, with that being said your main first image is huge resolution of (3128x1505) the image should be a lot smaller around (1280x600) for full screen images and compressed greatly as that images size is 2mb when the most it should be is around 300-500kb. Hope that helps!
There are a few reasons for slow image loads.
Usually the most common I see are images are not optimized for the web. This meaning the picture resolution is more than 72. 72 being the web standard. Another reason may be very large images. Try to make the images smaller sizes and see what happens
I looked into the page source to try and get the image size. This site has many links and javascript links in the head of the page. Most of the time javascript links should be at the bottom of the body.
Look into optimizing the images. I use ImageOpt for mac. Here is the download link. It is free.
http://imageoptim.en.softonic.com/mac
Hope this helps.
Related
Since google updated their way of scoring mobile I have trouble to optimise my websites.
I want to know what am I doing wrong and what should be done to existing sites to make the score higher. Its easy to get 95-100 on desktop but on same site on mobile will be 25...
Before someone says to follow suggestions by insights then I will say that I do and I managed to remove most of them - worst thing is that the score didn't move at all. This is the biggest struggle I have, it seems that whatever I do it wont be good enough...
I followed this guide https://kinsta.com/blog/google-pagespeed-insights/ + some of my own solutions.
Is there anyone that has any good tips or permanent solution for this issue?
Google Report
As evident from your Page Speed Insights report, the main factor responsible for your low score is images. The solution to this is using RESPONSIVE IMAGES, which will drastically improve the speed of your website on mobile. What it basically means is that, you'll have to keep different sizes of the same image available for the browser and browser will decide which version of the image is suited on a particular resolution.
1) Here's everything you need to know about Responsive Images --> Responsive Image (CSS Tricks)
2) You have to shift the <link href=".." .../> and <script> tags from top of the page to the bottom of the page, just after the <body> tag. This will fix the `Eliminate render blocking resources issue.
3) You can use Javascript Minifier to minify your JS. Just paste your existing JS code inside the Input Javascript box on the website and click MINIFY
Also, cache policy is also one of the factors, bringing your score down. An efficient Cache policy will make browsers, load your website faster, after the first load. Cache handling is server specific, its different for Apache, Express etc.
I have a very large site to audit ( was not really made by a good developer). I have found quite a few references to images that don't exist within css.
For example:
#element-id:after {
background: url("/path-to-broken-image.jpg");
}
My issue is, these broken images are only showing in Safari (where they show a box with question mark in the center), and it's quite a large site to go through page by page.
Does anyone know of a way that I could scan the site and find all the broken references?
Thanks
If this is the wrong outlet for my question, my sincere apologies. I'm trying to improve my load times, I'm using a masonry plugin (WP Canvas - Gallery) for my galleries. They currently use the full high res image even when in the grid. It makes my load times terrible. If there is a way to change that it'd be great!
Also if anyone knows a way to use the lazy load within this system that would also be great!
my site can be found here.
I did a Pingdom Website Speed Test and the load time was ok at 3 sec. I like Fancybox as a versatile tool with many functions and options. You can read more about it and see examples here. There is also a Fancybox WordPress Plugin. Hope this helps.
I know this is probably not the best SO question ever because I don't have the relevant code (I don't know where it is and I can't find it). If anybody has seen this problem before or knows what is causing this I can't tell you how much I would appreciate it.
I have a storefront and the images in the storefront are showing up rotated 90 degrees to the left for no apparent reason.
The actual source files of the images are normal, if you look at the actual .jpg used in on the site they are upright.
How or why would they be showing up rotated? Is this some setting or a bug in WooCommerce?
Note
Yes, I've disabled every addon and used only WordPress and WooCommerce and the result is the same. Different themes yield the same result as well.
I discovered the problem in case anybody stumbles across this later down the road. The issue is with Apple's exif data and rotation information they store within each image. It is apparently not compatible with most computers and when you upload a picture from a mobile device from Apple (ipad, iphone etc.) you are likely to experience this phenomenon.
There is little than can be done about it, shy of uploading the images to a computer and manually fixing the orientation of all rotated images before using them.
This question already has answers here:
Are unused CSS images downloaded?
(7 answers)
Closed 10 years ago.
I'm concerned about load times on home page of our site.
My home page uses a default stylesheet with ALL the styles for the whole site. I have background image references for elements on other pages (i.e. not used on the homepage). Do these background-image graphics get loaded anyways when a user visits the homepage of the site?
Or are the only css background image that get loaded are the ones that are directly used on that page?
One way to find out: try a debugging proxy.
The answers may differ for different browsers.
The images won't load unless they are actually used on the page; as far as all the styles being loaded on the home page goes -- this is actually a reasonably good thing. Once that single CSS file is in the viewer's cache, its there and doesn't have to be downloaded for subsequent pages.
Someone else's post just reminded me I'm basing my info off of firebug; browsers other then FF may very well download those unused BG images, but I really doubt it.
Building on Erik's answer, you could use tools like Google's Page Speed addon for Firefox (which I believe is built on top of firebug) and see what is actually slowing down your website when loading.
You can find more info about the tool and some other tips here: http://code.google.com/speed/page-speed/docs/using.html