I'm working on my first web app (www.shopperspoll.com). It's a Django based facebook app and I was wondering how I can go about making the pages load faster. Sorry that the main page is a mess now, started making some major changes yesterday, but you'll notice that it takes a really long for the page to load. I was wondering if that has something to do with the way I've set Django up on my host, or something else. If you could give me some pointers on how I can go about making it faster, I'd really appreciate it!
Thanks!
Couple of points need to be considered for better page loads
1) Put all javascripts externally, and always load scripts at the end of the page (in footer).
2) Always minify javscripts and css.
3) Merge all CSS and javascript into one file during load.
4) Make use of browser caching (for css, javascript and images).
5) Host static files like css, javascript and images over different domain. (Ex : static. shopperspoll.com )
6) Use tools likes firebug & yslow to check the load time.
7) use cdn.
Also refer this URL (better web performance from yahoo) : http://developer.yahoo.com/performance/rules.html
i hope this helps.
As for what Aby said, I'd also suggest using a Content Delivery Network (CDN) - CloudFlare offer a free tier for theirs which could be useful for you whilst early in growth. The majority of speeding up is already covered in Aby's answer, but once you've done that, a CDN can help with putting files geographically closer to your users.
Related
I use divi and I created landing page. After finish I figured that it loads like 20 seconds for visitors! There is link to this page my page , I guess it's some kind of block or plugin but I can't figure out which. Any help? Struggling with this for hours.. Thanks.
you are loading a lot of content, images, videos, ... try to implement some lazyload for images & videos.
there are a lot of errors in the console.log
your hosting is slow
Try to fix these. Even Lighthouse times out on that page.
Regards Tom
I think it has to do with the hosting, because TTFB (Time To First Byte) is like 13 seconds.
I have runned a website speed check from GTMetrix, you can see the actual test here:
• https://gtmetrix.com/reports/universeoflight.xyz/xwhl9MyP
I am able to see on the "PageSpeed" and "YSlow" tab that there are few "SERVER" listed optimization recommendations:
Leverage browser caching
Add Expires headers
These recommendations can be easily fulfilled with good WordPress cache plugin. Recently, I have started using WPCacheOn on all of the websites I am managing and I am very happy with it. Simply install and activate the WPCacheOn and no further configurations or settings are needed for faster website.
Additionally another thing you should look into is the "lazy load" optimization. You can also consider using CDN service such as Cloudflare. Ensure that you are using the latest PHP version for optimal performance and security. Another good practice is to lower the images size. In the "Waterfall" tab in GTMetrix you can see that there is the next image:
https://universeoflight.xyz/wp-content/uploads/2019/10/19742.jpg
Which is 2 MB. If you reduce that image size this will also improve the overall loading of of your landing page.
I just found out that I should expect my site to get a bunch of traffic today. Great! But it's loading incredibly slowly!
According to Pingdom, the most important fix would be to minimize my request size
http://tools.pingdom.com/fpt/#!/jT4ro/radionowhere.net
What does this mean and how do I start fixing it?
Agree with BlackHat. Minify CSS, Javascript.
And a free CDN you could use is CloudFlare cloudflare.com
You can also make sure you are caching static items (images/javascript/etc).
Another great tool here too... https://developers.google.com/speed/pagespeed/insights/
To minimize, you basically make your CSS and Javascript files smaller. You can use tools like CSS Minifier for your CSS and jscompress for Javascript.
Another things you can do to help is to use a CDN or content distribution network. This works kind of a like a generic cache, which can help expedite the load time.
I'm trying to improve my site speed as I integrate certain features of a theme I purchased into my site and came across this interesting feature on the website of said theme.
The problem I have now is my CSS style sheet is absolutely massive (220kb) and takes ages (3-4 seconds) to load. I'm working to reduce that, but that's a different story...
When I try to load that exact same page on the theme dev's website, it loads much faster. Upon inspection, on my website, I find my 'Size' and 'Content' amounts of the stylesheet in the dev tools is about identical.
On the developer's page, the size is much smaller than the content. Does this mean that ONLY the elements called upon in the HTML are downloaded from the stylesheet? If yes, how does one accomplish this, because it sounds tremendously efficient.
I also thought it was because the dev's page was caching the content on my browser but I've disabled cache and it still only loads a portion of the content.
My website's cache works by the way, I'm just interested in speeding up that initial load time.
Any thoughts?
Relevant imagery:
Cache Disabled:
Dev's website with small size/content ratio - http://i.imgur.com/B3uhOWF.png
My website with ~1:1 size/content ratio - http://i.imgur.com/Ymu2YRz.png
Off the top of my head, you could minify your CSS. There's a few free tools around including the Page Speed Insights for Chrome.
See https://developers.google.com/speed/docs/insights/MinifyResources
It looks like your CSS is already in a minified file, but perhaps the content isn't!
Just so people aren't confused. The solution was to enable gzip on the server, which you can read more about at https://developers.google.com/speed/articles/gzip (but still minify your css as well).
Thanks to user worldofjr, I found the answer to be ENABLE GZIP on the server.
Unbelievable increase in speed.
That should be required reading whenever someone signs up for webhosting. I can't believe my site has gone 1 year without this when it took 2 seconds to enable!!!
"On the developer's page, the size is much smaller than the content. Does this mean that ONLY the elements called upon in the HTML are downloaded from the stylesheet? If yes, how does one accomplish this, because it sounds tremendously efficient."
That's not generally how css works. And what you describe might not be very efficient even if you did somehow implement it. The server would have to know which styles to send, which would require the browser to load the page and send in it's list and the server would have to generate the custom css and send it back...
You certainly can limit which css loads where--and you should. But that has to be done manually, at least in my experience.
Anyway, a few things to consider before you proceed:
I think 200k is really, really big for a stylesheet. Most sites I work on the total CSS weight might be 20k. Or less. I'd investigate why yours is so huge. Maybe something has gone wrong. Minifying might help, but it isn't going to knock you down a whole order of magnitude.
However, even if it is the world's largest CSS file, 200k isn't THAT big. Not 4-5 seconds big. I'm working on a site right now where an entire page weighs ~350kb and I have it loading in under a second. Again, I suspect something else has gone wrong. The size of that CSS is probably indicative of something but I suspect it's not purely the time it takes the file to download.
I'm learning about Chrome and Native Client.
Basically i want to increase number of pages that are prerendered
by chrome (now its just one page).
I was thinking about creating a extension that would
allow to prerender more pages.
Is this a way to go or am i left with hard coding it into Chrome and build from scratch?
EDIT
I started a bounty for this question. I would really appreciate some input.
No, there is no way to go, you would need to hardcode it in Chrome and rebuild as you noted.
As you probably already know, Chrome explicitly states that they currently limit the number of pages that can be prerendered:
Chrome will only prerender at max one URL per instance of Chrome (not one per tab). This limit may change in the future in some cases.
There is nothing in their supported API's or their experimental API's that will give you access to modify this. There is not a toggle in chrome://settings/ or chrome://flags/ or anywhere else in Chrome currently that allows you to change this. You can however use the Page Visibility API to determine if a page is being prerendered.
In addition to the one resource on the page that you specify using the <link rel="prerender" href="http://example.org/index.html"> you could also consider prefetching resources.
The issue with prefetching is it will only load the top level resource of at the specified URL. So, if you tried to prefetch the other pages, like so:
<link rel="prefetch" href="http://example.org/index.html">
...then only the index.html resource would be prefetched, not all of the CSS and JavaScript links containeed in the document. One approach could be to write out link tags for all of the contained resources in the page but that could get messy and difficult to maintain.
Another approach would be to wait for the current page to finish loading, and then use JavaScript to create an iframe, that is hidden off the page, targeted at the URLs you want to prefetch all the assets for. The browser would then load all of the content of the URL and it would be in the user's cache when they go to visit the page.
There is also a Chrome extension that combines these two approaches by searching for link tags that define a prefetch and then creates the hidden iframe causing the assets to be downloaded and cached.
If the goal is to optimize around client performance for navigating your site there might be other alternatives like creating a web application that uses a Single Page Application (SPA) style of development to reduce the number of times JS and CSS are loaded and executed. If you are a fan of Google then you might check out their framework for building SPAs called AngularJs.
If it was a good idea to pre-render more pages, Chrome would probably already do it. Pre-rendering too many pages will drain website bandwidth and possibly end up slowing down the whole web, which is the opposite of what you're trying to achieve. So it's most likely intentional that you can only pre-render a single page and you shouldn't try to break that.
Not possible. Chrome manages pre-rendering based on many factors. If this was possible, it could also be easily abused by many sites. You could, depending on your page, keep all content on one page.
Is there any way I can speed up this webpage without too much hassle ? http://danydiop.com/node/115
It is too slow to load because it is too long...
thanks
Yes, add paging to your product list, or add a feature to load the next part only when the user scrolls, like Google image search does.
You can also choose to load just a small piece of the product list and add the rest automatically after the page is loaded even when the user doesn't scroll.
Your best bet is to break the product listing into multiple pages. There is simply too much information to display on that page.
You could in theory strip back the HTML used to render the page, and enable http compression on the server, but it won't help the fact that the page is simply too long.
Compress more the images
Enable gzip-encoding for the served pages
Put static files (images, CSS, js) on a cookieless domain
Ensure HTTP pipelining is supported by your server
Use CSS sprites for the images
In general follow the suggestions provided by google pagespeed
1) Use a CDN
2) Minify CSS
3) Minify JS
4) Compress images/use thumbnails and use lightbox to display close-ups.
5) Use Google's CDN for JS libs
6) Reduce HTTP Requests
7) Cache your pages
In addition to the advices given by Zoomzoom83, CAFxX and GolezTrol, you may want to take a look at the YSlow Firefox Extension. It that analyses your page and offers performance advices. From their page:
YSlow analyzes web pages and suggests ways to improve their performance based on a set of rules for high performance web pages. YSlow is a Firefox add-on integrated with the Firebug web development tool. YSlow grades web page based on one of three predefined ruleset or a user-defined ruleset. It offers suggestions for improving the page's performance, summarizes the page's components, displays statistics about the page, and provides tools for performance analysis, including Smush.it™ and JSLint.
https://addons.mozilla.org/en-us/firefox/addon/yslow/