This week we continue with the second episode of our two-part masterclass on main causes of slow page loading, and the solutions, tips, and advice that could help us accelerate our page load time to get ahead of the competition.
This episode covers a lot of valuable web-building information for all levels looking to learn about:
How to speed up our platform 01:40
Using superlite (barebones) themes or “going themeless“ 02:34
Removing redundant plugins and addons 03:06
How to lighten up our content 03:51
Reviewing a Waterfall 04:02
Scaling images to appropriate dimensions and resolution 04:27
Wordpress image instances 05:26
What is the correct image resolution for Apple’s Retina technology? 06:05
Use caching or lazy-Load plugins 06:57
Removing redundant structure elements 07:48
Minification (HTML, JavaScript, CSS) 08:30
Performing speed tests and where to get insight 09:02
Finding the balance: good content vs good speed 10:24
Planning and designing for speed 10:54
Check out Part 1 of Monday Masterclass: How to Speed up Your WordPress Website
\ TOOLS MENTIONED in this MASTERCLASS:
▸ GT Matrix |
▸ ImageOptim|
▸ Pixlr X |
▸ Kangax HTML Minifier |
▸ Minifier |
▸ Test My Site |
▸ Speed Scorecard |
\ TOOLS USED in this MASTERCLASS:
▸ Google’s Page Speed Insights |
▸ Hello theme |
▸ Tiny PNG |
▸ WP Rocket |
▸ Photography Portfolio website template kit |
Get Elementor:
Get Elementor Pro:
Improve your Elementor skills and check out our Monday Masterclass: Avoiding 6 most Common Mistakes
4:23 PNGs for vector art … well there goes my trust in this video.
just theoretical talks with some Elemontor Pro pitch sales .. waste of time
Algorithm comment goes here.
Would using placeholder images cause problems with images being indexed by search engines?
PPI (image resolution) is not a factor. This is a common point of confusion. PPI in a file is meaningless. Suggesting one uses a 300ppi image is misleading. The actual display resolution is determined at the time the image is rendered on a screen. What matters is the pixel count – the number of pixels for width and height. Images will typically be scaled to fit in the column, regardless of the file's PPI. If the image has a higher pixel count than 100% of the column width, then the browser not only runs slower down-scaling the image – it also means after downloading all those pixels they're being thrown away. Most of the sites I've worked on have columns of 650 pixels, so the images don't need to be wider than 650 pixels (unless those images are to be featured in a lightbox or allow the visitor to zoom in).
Hi, is this video supposed to be after #16 from Youtube playlist?
Best,
I've written up a speed test and speed trouble-shooting that I did on an Elementor site, including what plugins I tested and how it all went. With my recommendations. Some of the tools are the ones mentioned in this video. Plus some others, doing similar things. You can read about my findings in this article: https://www.bkwinephotography.com/technology/improving-the-speed-and-load-time-of-a-wordpress-site-with-performance-plugins/
Good, as always. However, a few comments. It would have been good to address some of the issues specific to Elementor. The tips were very general (mostly). I also think you are confusing the issue with your reasoning about ppi: The ppi varies from one screen from another, not only on Appel Retina screens. The ppi of the image that you upload is, I believe, irrelevant. What counts is the pixel dimensions. Secondly, about Lazy Load: Almost all Lazy Load implementations that I have tested make internal anchor links unusable. They simply screw up the reference so that an anchor link takes the user to the wrong place. I’ve so far only found one lazy load implementation that works with anchor links (“Lazy Loader”). On a side note, I am not happy with Elementor’s implementation of anchor links: In a “normal” implementation of an anchor link clicking the back-button in the browser takes you to the starting location on the page. Not so with Elementor. Clicking the back-button at an Anchor Link in Elementor takes you to the previous page. Not at all what the user expects (in my experience).
Always appreciate your excellent and interesting videos…thank you.
lazy load is not working on my site. It makes my website more slower (www.ttdib.net)
thanks for sharing this video. you guys amazing. i have 1 question. my job needed to big size image with great quality & resolation. how can i use these images without slowing down my site. If i use any image over 200kb size page speed insight Warn me about then. before uploading any image on site, i reduce then with tiny.jpg … sorry about my bad english. guys plz help me.
The templates are horrible and need to be updated.
Actually we need to know how to load Google fonts locally. The other thing is the font awesome that affects loading speed up of a site.
ELEMENTOR NEEDS TO BREAK AWAY FROM WORD PRESS AND DO A WIX STYLE SERVICE
When viewing website built by elementor in google.
If I right click and view source code.
It shows so much html
Why???
I do the same for other websites built by competitors and it shows hardly any html source code
Pls.ADVISE
Very useful! Also it seems that the new version of WordPress launching at the end of this month will include lazy loading by default, reducing the need for a plug-in : https://www.searchenginejournal.com/wordpress-5-4-lazy-loading/346006/
Elementor is best page builder for me but one element is missing. It is page break. Please sir add this element in elementor
Leave wp now! Never come back
5:18 "upload files of the largest instance that you will need". How exactly do I go about finding the largest instance for a particular image widget etc?
Re: "an entire page in one section?" My approach of design is to first divide the page into logical 'sections' based on the content e.g. Hero, Positioning, Features, Pricing, CTA … etc. So a page might have 4-5 sections. It seems to match the categories of Elementor Blocks (these blocks are also distinct sections). Any thoughts on this?
Great video. In section 6 – you say "keep an entire page in one single section" … how important is this? If you do a single section page, then it's likely that several "inner section" elements will be used.
there is so much to learn that I really feel blocked … I don't know where to start … I want to dominate this so much but at the same time I feel so blocked that I end up just watching videos but I can't land anything …
I preferred to see a practical example, like a case study and your are solving the speed issue step by step.
I would after downscaling in photoshop with ctl,alt,i image size run the export for web (save for web)keep nothing above 999 kb per image. should fine tune sharpen in the save for web section which will get rid of any unwanted unsharp effect by downsizing. good practice if you have more than 3-4000 product images on your site.
"WebP is a next generation image format supported by modern browers which greatly reduces the size of your images." This option is now available on siteground optimizer. Would this make image compression tools/plugins redundant?
I preferred to see a practical example, like a case study and your are solving the speed issue step by step.
your efforts in general is highly appreciated