This is a UI element that helps your users. However, the Select2 library is a JavaScript library, which in turn depends on some CSS and JQuery libraries. This means three round trips are required to collect a bunch of files of different sizes:
JQuery - 101kb
Select2 JavaScript - 24kb
Select2 CSS - 3kb
This isn’t ideal for site speed, but in order to provide users with a streamlined interface, we’re pretty sure it’s worth it.
This allows the user to search the list or freely type their own response, therefore providing the same functionality. Plus, it has a native interface on smartphones!
detail
LonelyPlanet has a beautiful website, and I’m looking at this page about Spain , which has a “Read More” link that most web users will be familiar with:
Like everything I see, they use a JavaScript library to do new zealand mobile database this, which again comes with a bunch of overhead.
However, HTML has a pair of built-in tags, called details and summary, designed to do exactly this. Free and native to HTML, with no overhead, it’s more accessible to people who need access to screen readers, while conveying semantics to Google.
These tags can be styled in all sorts of flexible ways via CSS, and recreate most of the JS versions I've seen out there.
See a simple demo here:s:codepen.ioTomAnthonypenGRRLrmm
Summary of key points
Takeaway: Examine the functionality of your site and see where there might be opportunities to reduce reliance on large Javascript libraries where there are native HTMLCSS options.
Key point: Remember that the issue is not the size of the JS file, but the number of round trips required.
Note: There are some cases where you should use a JS solution, but it's important to weigh the pros and cons.