I have a shop website , I have a problem with seo and loading time ,when I check my website with gtmetrix , it shows me this result :
total page size : 5.5mb
load time 6.5 s
I check some shops and I get this results for example
total page size : 350kb
load time 1.5 s
but it has lots of images and content either /.
I think they load the content via javascript after the page has loaded
How can I do so ? How can I make it load fast and then get the images and contents ?
thanks
Use minifier to minify your js and css code.
Serve your static assets from cdn
use Lazy Loading for Images
Is your website a single page application? If yes then loading in the content via a separate AJAX call would be possible allowing your users to view the basic webpage first and then the content and images later.
Otherwise there are a number of ways you could optimise:
1) Concatenate and minify all your JS and CSS to reduce file size and number of files downloaded.
2) Allow caching. You will have to set this up from your webserver.
3) You could optimise your images by removing unnecessary meta info if any.
GTMetrix's report should list down the ways your website specifically could be optimised. Take some time to go through that report.
Related
I'm honestly confused about where to start with minimizing the load time of a website i'm building - https://projectrhea.herokuapp.com/ . Currently takes around 9 seconds to load the website which I want to try and bring down to sub 3 seconds.
I've done a diagnostic test, shown here https://www.webpagetest.org/result/171113_T2_851758db144ac117ab4e986a3798b1b5/1/details/#waterfall_view_step1 .
From what I can see there are three main reasons it would be taking awhile to load.
The first is the javascript.
I only need a small amount of it to run the site but I am very
confused about how to separate the code I need from the code I don't
need. I use it for the banner to show multiple phrases underneath the
banner that I would rather keep.
The second part is the shear amount of CSS files I'm drawing from.
I used a template to begin the site (it was a good way for me to learn
how to design the site). Now I think this has meant there is way too
many css and other files connected to this landing page.
The third part is the video file I have.
I would love to keep this
video as I just like how it fits in the site. I'll try and minimize
the file size after I have worked out the above issues.
This is my first real time trying to solve an issue like this and I would really appreciate the knowledge a more experienced coder could bring to this. Thanks!
Use following automated tools:
https://developers.google.com/speed/pagespeed/
https://gtmetrix.com/
Chrome's lighthouse
Optimize image sizes and quality. (Automated tools above provide You with the optimized images)
Place Your CSS file at the beginning of your bootstrapping file such as index.html
Compress CSS files (remove the formatting)
Place Your JS file at the bottom of the file.
Compress JS files (remove the formatting)
Trying to address the specific points raised by you.
The first is the javascript.
I only need a small amount of it to run the site but I am very
confused about how to separate the code I need from the code I don't
need. I use it for the banner to show multiple phrases underneath the
banner that I would rather keep.
Your JS files are not minified. Please make sure you are minifying your js files and order as suggested by Ante Jablan Adamović.
The second part is the shear amount of CSS files I'm drawing from.
I used a template to begin the site (it was a good way for me to learn
how to design the site). Now I think this has meant there is way too
many css and other files connected to this landing page.
You should combine and minify all the CSS files.
For minification and combining of JS and CSS you can use gulp.
https://github.com/gulpjs/gulp
The third part is the video file I have.
I would love to keep this video as I just like how it fits in the
site. I'll try and minimize the file size after I have worked out the
above issues.
I can see that you are serving some resources through S3. See if you can move your video as well to S3 and serve it through cloudfront.
Place your css imports in the top of the page and import your javascript after your html body ends.
Well for a start -
Place the css at the top, consider using a js loader to load the js once the page has loaded.
If you can obviously remove everything you don't need their are tools to do this but in reality is a tough task especially if its a template
And finally with the video get an image of the first frame, show the image not the video when the page loads.
How to make a loading image when loading HTML5 video?
The bigger your css, the longer the page takes to load. So try to reduce/minify css and try to use css in a single file. Same with JS also
Use Lazy load for images so webpage displays quickly without calling images.
Make sure server is using keep-alive as it can truly affect how your server fulfills requests.
Enable gzip compression
Minimize page redirects because it affect page speed
Enable browser caching so your browser can load the page without having to send another HTTP request to the server.
I built my photography website with angularjs, but loading time is relatively slow.
What can I do to improve loading time other than reducing the image file size?
Or, at least speed up the perception of loading time?
Link to my website is www.jbkphotographs.com
I did a fresh load of your web page with Chrome's Network tab open, and copied the image here:
It shows that loading your Javascript files is taking up most of the time. angular.js, jquery-2.1.3.js and ui-bootstrap-tpls-0.13.0.js all took over one second to load.
If you could compress them, that should save some time. Another trick is to use the public CDNs instead of your own server, that's why they're there (like the Google Fonts):
https://developers.google.com/speed/libraries/
http://www.bootstrapcdn.com/
http://cdnjs.com/libraries/angular-ui-bootstrap
http://cdnjs.com/libraries/masonry
Our application loads a huge HTML file in an iframe. I know the size of the content already, so to check the download progress I am using innerHTML.length. Is there any alternative to count the number of characters loaded in an iframe.
EDIT
The HTML file which is loaded in iframe is large(1.5 MB+) and is generated every time compilation process is done. We would like to show the progress bar to users about the download progress and AFAIK in JavaScript there is no way to check download progress of JS (or resource) file(s), so I am using the content length of iframe to show progress bar.
You can also use innerText.length, Not an alternate but another way to achieve this.
I have a website that 40 babynames are shown in each page, each name have some photos that are uploaded by users. I use iframes to show the images of each name when the user clicks on "show photos button" (iframe is created dynamically after click). Well in this case images are never indexed with search engines.
If I load them right after each name (and not in a iframe) then the page size will be very large and will load very slow.
I'm looking for a way that load images on demand (just as it is now) without using iframes. setting the src on demand will be in-vane as search engines won't have access to them and setting them will make page very heavy as I said before.
Any suggestions on how to do this?
You could use a php script that displays one singe thumbnail (1x1 pixels) when the query string ends on "small"; with ajax you can now access every single image and remove the ending "small" so that the php script uses the original file.
http://php.net/manual/en/function.imagejpeg.php might help ^^
So you access "image.php?myimage.jpg-small" and the script loads the fixed thumbnail that will get cached after the first load. Then, you change the img src property using ajax to "image.php?myimage.jpg" and we're done...
You could use a .htaccess - rewrite for better look of the image source...
You can't really get Google to index the images if they're not there to start with - could you use thumbnails instead for each image avoiding slow loading speeds and allowing Google to index them? Then on click you could replace the src tag with the full size image.
There's libraries like Timthumb that can generate and cache thumbnails for you if you don't want to write all the resizing code.
Folks,
I am opening a popup through ajax in my magento site. The issue is the page which i am calling need lot of js and css files to get loaded to make that page work properly. But in turn it is increasing the load time of my popup.
I thought of loading loading all css /js on main page itself.But as you guys know that once the popup opens it doesn't know the content of main page as it is just an different entity.
And ajax approach is required because i am sending product id.
Please suggest.
You should also have a look at the content which you are requesting using AJAX.
Following things you can do -
Minify CSS and JS
Optimize your code which prepares the data for Ajax response.
Optimize Magento Collecions (if exist in response code)
It may help to decrease the load time.
Please refer the below links ,
http://developer.yahoo.com/performance/rules.html
https://developers.google.com/speed/docs/best-practices/caching