I built a website with the help of Next.js. The website contains images and videos. The videos are autoplayed which means they are fetched immediately. The website has been deployed on Vercel. I experience big issues with the loading times of all assets not only the videos:
Chrome Dev Tools showing loading times of assets
It seems like the assets are served one after another and since some of the videos are quite big ~10Mb other resources are blocked for quite a while.
Is it normal that Vercel does only serve one asset at a time? I thought that multiple videos or images could be served simultaneously.
Also, I am wondering why it does take so long in the first place. My internet connection is roughly 100Mbit/s and I do not experience any issues on other websites I have deployed to Vercel. Just this one is incredibly slow and has issues serving the assets.
Does anyone know what's happening?
I already thought the problem was that there were too many and too big videos on the website which is why I reduced the size of each video and added a lazy loading functionality to the videos so they are just loaded when needed. However, this didn't solve the issue.
Related
About two weeks ago I implemented a simple one-page website using WordPress and Elementor for a friend of mine.
The page was loading slowly due to a shared FTP, which hosted another website, so I assumed that after the page is migrated to a dedicated FTP, the loading problems will be gone.
Unfortunately, the issue remains - it's a simple website, yet it takes ages to load, and its not due to its weight, but the delay between the request is processed by the client's browser.
After looking up the Network tab in Chrome console I discovered that the page remains in "Stalled" status for almost 6 seconds before the request is passed over and the website begins to load.
Do you have any idea how to solve this issue? I was certain that Elementor bundles and minifies the final files before serving them over FTP and Chrome is not forced to exceed the TCP limit of 6 files downloaded at the same time, as described here ( Understanding Chrome network log "Stalled" state ). I'm a purely front-end dev and have no in-depth knowledge regarding the back-end, so I'm pretty stuck at this point and any help will be highly appreciated.
Check your database foreign keys or index
I'm trying to speed up my website built in using Wordpress.
Caching is enabled for most parts of the site, also I'm using cloudflare to speed it up.
When I ran couple of tests, to check optimization and speed of my site, I had some issues showing up in css sections and some font headers, that took a lot of time to load. Theme that I used for wordpress site was ASTRA theme. However, I am having problems now finding those in my main database, to make corrections.
Domain and hostings are from HOSTGATOR, hatchling plan.
Website page is : healthy-paradise.com
I'm still building up this site.
Anyone to try to help me out and tell, where can I locate these files, folders and directories, to make changes, and what needs to be changes?
Link of picture attached shows files in question..
Best regards to everyone.
first of all you need to understand a few thing about website performances. There is no "perfect" website, getting the 100% on google page speed insight or lighthouse is nearly impossible, but you can get close.
Most of the theme available (free or for purchase) are using what we call "libraries" or "framework" made to ease the development process. The downside of those website is that you're loading more content, tools, code than necessary.
For example your website is using jquery (an heavy js library) and bootstrap (css framework). So you're already losing performances on that end. Usually you can't do anything for that beside properly loading scripts (loading them from the function.php file ... etc).
From what I can see you're losing a lot of performances on your image sizing, this you can control, your images should be optimized for web with proper format, size and dimensions.
One other big thing is that you're not using ssl. which also impact performances.
Anyway I think you should get it now, fix all you can fix, and you should be good.
https://web.dev/measure/?gclid=Cj0KCQjw9IX4BRCcARIsAOD2OB2k4TK53FGVyn-B2ASY_46zmbyHBzUAmI_Cj6UWvHBi9_3jiKbeAKAaAiqTEALw_wcB
I did all the things Like image optimization, rendering for page speed optimization. I checked my mobile page speed increasing but desktop page speed not increasing it's still 22 again and again. I want to know why I am facing this problem. My website is www.sagorkhan.com. Can anyone please help me?
enter image description here
There are many factors that could affect your page speed and actually I see you've done a good job so far but you may go a litter farther.
I've tested your site with google page speed, pingdom tool, gtmetrix, webpagetest and here is my conclusion:
I guess your problem is about how to reduce server response time. While testing your site, it took more than 3+ seconds (6 on webpagetest) to completely load which may be considered a huge time. Reduce the server response time is not an easy task and could be a real challenge but here is a few tips:
1. Images optimization:
You said that you've done image optimization but still, your site have some huge images, one of them for example, is about 1MB which is can really affect the server response time. These images can be easily optimized, just go to google page speed and after you test your site scroll down and find: Download optimized image, JavaScript, and CSS resources for this page. Download the zip file and try to replace the old images with optimized ones using any FTP client, FileZilla is more then good for that.
Note that you can find the images locations under Optimize images section in case you don't know the location. Repeat that step again to make sure all your images are optimized.
Also I'd recommend some plugins like wp-smushit for optimize and compress all of your images and Regenerate Thumbnails to fix Serve scaled images issue. tinypng is good online alternative too if you like to do it manually.
2. Optimize CSS Delivery
That's not easy actually because it may requires to optimize the code and structure of your theme but you can give Autoptimize or W3 Total cache a try. Both support combining and minifying all enqueued JS, and CSS files.
3. CDNs:
CDN can really accelerate your site and greatly reducing your page loading time. Now, there are tons of good CDNs providers but I would recommend CloudFlare as a start since its free and easy to use and their free plan is enough and does work really great.
4. Caching
WordPress caching is a must if you care about performance, I don't see any sign of caching plugins except your HTML, JavaScript, css files is minified already which is good but not enough. I would recommend W3 Total Cache or WP Super Cache.
5. Web Hosting
If you're hosing your site in a shared host, don't hope too much to get perfect page speed even if you done all the required optimization. I'd definitely recommend upgrading to a VPS since its kinda cheap (unmanaged servers can be cheaper then shared host) and not that hard to setup and secure, A small VPS server can have a significant impact on page load speed.
You are resizing massive images using HTML/CSS when you should be resizing them individually using Photoshop or a similar image editing tool. You have a lot of render blocking js, specifically they're the YouTube scripts you're running.
Another big issue is the sheer amount of stylesheet and js files you're loading -- 19 js and 13 css. Try combining your js files together as much as you can, as well as your css files ... you're going to want to minify them as well.
You're loading many components from various sources, adding more http request overhead. If it's possible, you should consider hosting your own copies of some files.
Take a look at the output from https://gtmetrix.com/reports/sagorkhan.com/cBTMzOjD ... that should get you on the road to optimizing. Make sure you take your time reading the pagespeed and yslow tabs.
So I recently setup a Wordpress site that is being hosted through HostGator with their business share-hosting plan. The website was experiencing very slow load times, sometimes up to 30-45 seconds.
I went ahead and scaled down/resized all the images that are currently on the site, added a caching plugin (W3 Total Cache), an optimization plugin (WP-Optimize), a CDN (Truespeed CDN), minified js/css, and added expires headers.
The site scores much better on site speed tests after I made these changes
Pingdom: 87
GTmetrix: 92%/87%
and it seems that the timing to the first byte is pretty quick too.
Loading the site in its current state still feels pretty slow and after taking these measures, I'm unsure of what could be causing the issue, or if possibly the host might be too slow. Any help and suggestions would be much appreciated.
The url for the site is: http://vmklighting.com/
I am also using Shopisle Theme with Woocommerce and WPML.
To give you a little background, I have a website with WordPress as my content management system, which revolves around users uploading panoramic photos. The site is hosted on a small Amazon EC2 instance. After encountering a few days of noticeably slow speeds, I decided to address the issue. In following the suggestions of several speed diagnostic sites (i.e., enabling browser caching, gzip compression, and keep-alive), I was able to increase my scores substantially and speed over basic site usage. Unfortunately the site remains incredibly slow when uploading files as panoramic photos tend to be large in nature. When a user uploads a file, a new post is created with a resized version of the panoramic image, and once complete, the user is redirected to the new URL. Does anyone have any suggestions to expedite this process? Are there any options besides upgrading my server?
The following plugin does exactly that:
Dynamic Image Resizer
Changes the way WordPress creates images to make it generate the images only when they are actually used somewhere, on the fly. Images created thusly will be saved in the normal upload directories, for later fast sending by the webserver. The result is that space is saved (since images are only created when needed), and uploading images is much faster (since it's not generating the images on upload anymore).
The author is WordPress core developer and knows WP code inside out.